How do I animate a progressing timeline?

Design help Animations & Interactions
1

Hi,

for quite a while I’m trying to create a widget next to my content, displaying the timeline while labeling the current position.

An example of how it could look like:

Timeline

Something similar to this, or the progress bar in this forum to the right of this post (appears as soon as there is more than one post).
I know how to create the object, but I’m unsure how to animate this. Do I give each element/year a trigger and fiddle with the exact settings?

Thanks for your help!

Cheers
Leon

2

Hi @LeWolf there are two ways how to achieve this effect, first is to use WF while scrolling in view animation as it is simplest way for this task or more comprehensive will be by using javascript intersection Observer

1 Like
3

Hi @Stan,

thank you for the fast reply!
One follow-up question just occurred to me: How do I change the filled dot to a ring?
In my example image, this ring switches while the content scrolls into view:

Inkedc6a26b8df3cad637ed0222b6a8d106217854bda0_LI

I understand the animation part, but do I need to switch the element each time?

4

Hi @LeWolf there are 3 ways “how to” I can thing of right now.
in your case you have in first stage div with black background and no border, in stage two you have white background with black border. This div have `border-radius: 50%"

first let see what tool we have:

CleanShot 2021-04-12 at 14.34.57

Option 1
you can animate bg color and border color so in first stage you can create bg black with border white or transparent (you have no option to add border in this case) and then animate their change.

Option 2
you can animate 2 absolutely positioned elements with opacity. Create 2 div elements set position absolute and then animate their opacity. It will be PIN to do this way but in some cases it can be useful.

Option 3
Switching class while using observer (similar to option 1). Create two classes eg.

.inactive{
  background: black;
  border-radius: 50%;
} 

.active(
  background: white;
  border-radius: 50%;
  border: 1px solid black;
)

and use JS intersection observer to switch these classes. It is up to you what approach is suitable for you. :slight_smile:

You can also scale element down while inactive and scale it back when active but this is another story.

2 Likes
5

Hi Stan,

thanks a lot for the very helpful and quick answers!

My questions are answered for this matter, have a nice week. :smiley:

1 Like