Need help on Animation

Design help Animations & Interactions
1

Hi!

Any knows how to do the dotted line animation by this site https://asaro.co.uk? Went through Facebook and most of them said to use Lottie. Wondering if this can be done by using Interactions 2.0

Thanks in advance

Here is my public share link: LINK
(how to access public share link)

2

Hello @makdicowz

I think your read-only link doesn’t work :sweat_smile:

Still, Lottie is fine and can do it pretty well but for this case probably there is something easier to setup.

Read-only demo link :
https://preview.webflow.com/preview/background-change-animation?utm_medium=preview_link&utm_source=designer&utm_content=background-change-animation&preview=9111fea338f1605abe81b5e99d545668&mode=preview

I’ve tried doing the following on a demo template :

  • Adding a container with absolute positioning
  • Adding two div blocks inside with the two versions of my dotted line (one black and one white)
  • Z-Index accordingly to have the highlighted one on the front

Now for the animation :

  • The line I want to shows up have 0px height
  • I setup a “While scrolling in view event”
  • At 0% the height of the highlighted dotted line is 0
  • At 100% the height is 100% and that’s it, the trick is done, you have the effect
  • Adding some smoothing effect to be very cool :smile:

Little note :
The image I choose is not very well suited for this kind of effects, you should consider to make a line that never comes back (on height or on width if you animate horizontally) because otherwise the trick will be visible. If the lines always go to the bottom the effect is exactly the same of a Lottie animation exported from AfterEffect, but way easier (and probably in most cases lighter for the browser also).