Home > front end >  Show same image on scroll and animate based scroll
Show same image on scroll and animate based scroll

Time:11-18

I came across the Apple website where I can see the same image/design on scrolling up to some extent and also animation on scrolling to the bottom and up.

Ref URL: https://www.apple.com/in/macbook-air-m2/

I want to know how to implement those type feature.

CodePudding user response:

I am not sure anyone can provide a full working answer here.

Read through this article https://scrollsequence.com/how-to-make-scroll-image-animation/

It will give you the direction to follow to achieve similar results.

CodePudding user response:

Animation on scroll is one of those problems with a bunch of ways to tackle it. My preferred method is using GSAP.

Here is a forum post with some more information: https://greensock.com/forums/topic/32782-video-scroll-animation/

Essentially you are embedding a video and then having each scroll position trigger the next or previous frame, playing through the video as you scroll. There are a lot of caveats but the link above is very in-depth so I recommend checking it out.

  • Related