CSS only: Animation of a line and a circle that moves along with the line on scroll

Are you excited as I am to create animations like Lemonade using CSS? CSS can do this. Adding scroll and on view animation with CSS is currently only possible in Chrome, but it will soon be available in all browsers.

Here I have created a simple CodePen to explain this.

See the Pen simple line -animation : CSS scroll by trapti (@tripti1410) on CodePen.

If you prefer watching video, here is the link for the same.

Outline of the blog

  1. Setup
  2. Important Note
  3. Line animation
  4. Line animation controlled by scroll
  5. Circle moving along the line
  6. Circle moving controlled by scroll
  7. Other related codepens

Setup

There are totally three elements. Grey line which is always visible on the screen has a class name line-base. A black line is moving on top of the grey line and has class name line-running. The circle will move ahead of the black line as a pointer has a class name line-circle.

Important note

To learn how this is possible with SVG, read this blog post.

In brief, it is possible for us to animate an SVG this way is because SVG provides us with two attributes: stoke-dasharray and stoke-dashoffset. These are the attributes responsible for creating dash in the SVG line. stoke-dasharray for visible dashes and stoke-dashoffset for invisible gaps between dashes. We manipulate these attribute values to create an illusion that the line is moving.

Let’s understand this with example. Say the total length of the line is 100. Then will create a dash using stoke-dasharray of the same length, i.e. 100. Then will also create a gap using stoke-dashoffset of the same length, i.e. 100. The line won’t show on the screen as it’s covered by stoke-dashoffset. For stoke-dashoffset will create animation to move it from the total length of the line to the 0 or any desired value. In this, I am using 0.

Include this attribute pathLength="1" in the animated element. Here it is line-running. In the CSS, you can use 1 for the full length and 0 for the start in stoke-dasharray and stoke-dashoffset. You can also use decimals like 0.5 for the half length.

@keyframes line-animation { from { stroke-dashoffset: 1; } to {
stroke-dashoffset: 0; } }

Attach this keyframe in the animation with 5 seconds duration and linear ease, as shown below.

.line-running { stroke-dasharray: 1; stroke-dashoffset: 1; animation:
line-animation 5s linear forwards; }

Line animation controlled by scroll

Attach the above animation to the scroll just by including this line.

.line-running { // ...Previous properties animation-timeline: scroll(); }

Now the scroll controls line animation. However, there is an issue with the line not moving at scroll speed. So it does not seem like the line is running parallel to the scroll throughout its length. This is happening because the SVG’s length is smaller than the entire page’s length. To fix this will give animation start and end range. Start the animation when scroll reaches a specific position and end at another position.

.line-running { // ...Previous properties animation-range-start: 2%;
animation-range-end: 50%; }

To debug the scroll animation and also figure out these range values, you can use Scroll driven animation browser extension. https://chromewebstore.google.com/detail/scroll-driven-animations/ojihehfngalmpghicjgbfdmloiifhoce This also includes an intro video of how to use it.

Circle moving along the line

Using offset-path we can define the path on which the circle should move. offset-path takes url and the line coordinates.

We will animate offset distance, which is 0 initially to 100%. This way circle will start moving along the line.

.line-circle { transform-box: fill-box; offset-anchor: 50% 50%; offset-path:
path('...copy d attribyte value from the element and use it here'); offset-path:
url('#line-base'); animation: move 5s forwards linear; animation-timeline:
scroll(); animation-range-start: 2%; animation-range-end: 50%; } @keyframes move
{ to { offset-distance: 100%; } }

The position of the circle changed after including offset-path because the circle is by default taking the SVG’s origin. We need to change it to use its own by using transform-box: fill-box. You can read more about it here.

The element’s start is now the default anchor. To center align the circle with the line will use offset-anchor: 50% 50%.

To control moving circle on scroll, add the same properties as line animation and it will work just fine.

TADA!

See the Pen simple line -animation : CSS scroll by trapti (@tripti1410) on CodePen.

I also posted this on x here is how many people appreciated it.

CodePen showcasing similar as lemonade moving with CSS

See the Pen Complex continuous line animation on scroll using only CSS: lemonade by trapti (@tripti1410) on CodePen.

CodePen showcasing line animation similar as lemonade moving with GreenSock

See the Pen line animation on scroll recreation of lemonade:GSAP by trapti (@tripti1410) on CodePen.

Thanks for reading, if you like my content then consider sharing it on Linkedin and Twitter and do tag me. Stay connected.
BACK HOME