Kevin Powell - Community•7d ago

How do I replicate this scrolling animation?

I found this scrolling animation on motion.dev and thought it would be great to implement it on my own website, but I have no idea where to start. Would appreciate literally any guiding steps on how to start/what the thought process looks like. Currently using React with Chakra UI and motion.

3 Replies

Simon•6d ago

I believe there is no generally valid answer. CSS can do alot already, but people also wrap their heads around things like GSAP. The recording likely displays a combination of techniques e.g. scroll-driven CSS triggers, vanilla JavaScript and libraries plus SVG morphing.

ἔρως•6d ago

the easiest is to read the examples from motion.dev unless you want to replicate it all yourself

b1mind•6d ago

I mean its using motion on the motion website, you could try to gleam the source. But ya I'm sure they have examples to show you have to do it.

Gaming

Programming

How do I replicate this scrolling animation?

Did you find this page helpful?