Apple watch series 8 animation horizontal scroll with 3d effect

[Wolfcoding]

Hi everyone, I am trying to recreate this scroll effect using GSAP: (as seen on https://www.apple.com/am/apple-watch-series-8/)

 

 

Basically I have a number of images that I want to scroll into the view like this using ScrollTrigger, so that when the user scrolls down the images will move from bottom to top in this order. But I haven't got any idea where to start creating an animation like this. Can anyone give me an example of how it can work or some search terms so that I can try to find some examples by myself?

 

Thanks!

[Cassie]

Hi there!

 

We have a collection of scrolltrigger pens here. - https://codepen.io/collection/AEbkkJ

But honestly looking at a lot of complex examples may just make it more confusing.

What I would do is just start super small and then build up as your understanding grows. Start by making a codepen with some images in, then make a timeline that moves a series of images on the Y axis, then once you have that looking right, hook it up to scroll with ScrollTrigger. You will need to pin the container. 

The ScrollTrigger docs have a lot of examples and good links, check them out.

 

https://gsap.com/docs/v3/Plugins/ScrollTrigger/

 

Good luck!

[Cassie]

Actually! It's a pretty simple one so here you go.

See the Pen mdoVVdE?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Have a little play around with the stagger and duration, if you uncomment the scrollTrigger it'll hook it up to scroll, you can see the markers for the start and end points too.

 

The docs have info on all these properties. 💚

[Wolfcoding]

Thanks you for the example @Cassie, I tweaked it a little bit so it looks like this now which is perfect for me

See the Pen WNmrEyK by edwin_rocketcode (@edwin_rocketcode) on CodePen