CODEWITHSUNDEEP
reactjstypescriptframer-motion
Filip Kania
Filip Kania

Reputation: 55

Progress bar with changing images in framer-motion (React with TypeScript)

I have an application in React using TypeScript and Framer-Motion. Does anyone know how I can achieve an effect like the section below on framer.com? I've tried with a progress bar, unfortunately I can't create such a section. I am specifically looking to map these elements with three images and three progress bars.

Link to section: https://www.framer.com/#design-1

Thanks!

Upvotes: 0

Views: 665

Answers (2)

thelittlemaster
thelittlemaster

Reputation: 403

You need to use the scroll references and animations, as well give different heights other than the visible:

https://www.framer.com/motion/scroll-animations/

as @Soheildev, easier with three.js

Upvotes: 1

Soheildev
Soheildev

Reputation: 1

you can use frameworks like three.js chart.js anime.js If you use it, you can implement it to some extent like that link

Upvotes: -1

Related Questions