Is this parallax, lottie or custom code? And how can it be done?

Design help Animations & Interactions
#1

Hey everyone! Beginner Webflow user here. I’m designing a website and want a couple elements in my hero section to “transfer” down to the next section and stop there. Here is an example of what I’m looking for:

The white logo animate for about 3 sections then stop at the 3rd.

My initial thought is that I could make the hero section 300vh and use the animate on scroll but I noticed the max Y axis movement is 500px.

Can this be done with scroll animation? Or is this a lottie thing?

Or is it only possible with code?

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

#2

hi @alpeers and welcome these are animated SVG’s. This website is based on React, Redux etc. and for animation they also use GSAP (GreenSock).

CleanShot 2021-01-14 at 23.40.03
CleanShot 2021-01-14 at 23.40.03510×581 43.5 KB

You can achieve similar effect in Webflow but it needs a good knowledge of animations and Webflow. Here is one awesome example to study made in Webflow.

LIVE PREVIEW
DESIGNER

Unfortunately there is no READ-ONLY link but you can get most of understanding how it is build from dev-tools console

#3

Ah I see! Thanks so much for shedding some light on this. I’ll check out that website. Thanks!