Infinite scrollable card stack

[Daan Ketelaars 2 Likes (Newbie)]

https://theunknownface.com/en/stories/

 

I'm looking at recreating a similar effect as shown above. I see they used GSAP, and I think ScrollTrigger might be the solution for this. But I was curious if this is the right way to do it or is there maybe a different solution to recreate this effect? 

[OSUblake 18,331 Likes (Superhero)]

If they were using ScrollTrigger, you'd see some scroll bars. My guess is that they are controlling the animation with wheel and touch events.

 

[Daan Ketelaars 2 Likes (Newbie)]

@OSUblake Ah yeah that's true. Will have a look at animations on wheel and touch events. Thanks for the help! 

[Daan Ketelaars 2 Likes (Newbie)]

@OSUblake Tried to find something with wheel and touch events. Couldn’t find much, do you maybe have any examples? 

[OSUblake 18,331 Likes (Superhero)]

How to use touch and wheel events is a bit beyond the scope of this forum as that just normal JavaScript and there plenty of resources on the subject, but the basic idea is to use changes from the even to control the play head of an animation.

 

Really simple example using wheel events. 

 

See the Pen eYGaEBz by GreenSock (@GreenSock) on CodePen

 

Touch is much more complicated, but the concept is still the same. Detect if the user is swiping up or down, and then animate the progress of your animation based on the information.

 

This demo doesn't animate the progress, but it does show wheel and touch event listeners being used.

 

See the Pen PoWapLP by BrianCross (@BrianCross) on CodePen

 

[Daan Ketelaars 2 Likes (Newbie)]

@OSUblake Thanks, this really helps! It's more clear now