Jump to content
GreenSock

Daan Ketelaars

Infinite scrollable card stack

Recommended Posts

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? 

Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×