Jump to content
Search Community

How to control the start and speed of a scroll based animation

Onadras test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hello, it's my first time with gsap and scroll trigger so please forgive me if I did dumb mistakes or missed anything obvious.
I'm trying to build an animation where a container (.container1) rotates by 90° based on scroll. After the rotation ends, the elements inside the container (two adjacent to each other and one positioned in absolute under them) must move horizontally, still based on scroll. The container and its content must be pinned to the viewport for the whole duration of the animation.

Unfortunately I'm facing three issues. 

The first one is that the horizontal animation of the content is triggered before the container rotation ends. I only managed to delay it but it's not ideal.

The second one is that the animation is too fast, especially the horizontal movement, and I can't find a way to slow it down. I tried to keep track of the mouse wheel scroll but it doesn't seem to work.

The third one is about the pinning. I managed to keep the container pinned, but once its rotation ends, all the elements resume scrolling out of the viewport. If I try to add a pin to the content elements, the animation breaks.

Attached there's a codepen demo with the simplified version of what I've managed to do so far.
Thanks for any help!

See the Pen oNPpjMQ by Onadras (@Onadras) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @Onadras and welcome to the GreenSock forums!


I think the best course of action in this case is to remove ScrollTrigger and focus just on the animations. ScrollTrigger is just a way to control the progress of a GSAP instance based on the scroll position, nothing more. Is best to get the animation working in the way you expect and then add ScrollTrigger to the mix.


Also be careful with this numbers you're using on the duration and delay configuration:

imgTopTimeline.to(".imgtop", {y: "-800px", ease: "power1.inOut", delay: 800, duration: 200});

imgBottomTimeline.to(".imgbottom", {y: "800px", ease: "slow", delay: 1000, duration: 200});

imgContent1Timeline.to(".imgcontent1", {y: "-200px", ease: "slow", delay: 1000, duration: 50});

GSAP works in seconds not milliseconds, so a 200 seconds duration is over 3 minutes (3 minutes and 20 seconds to be specific). While a 1000 seconds delay is more than 16 minutes of delay, that's a looong wait:



Another thing is that you're using a bunch of timelines for a single sequence where the same element should be pinned during the entire animation, so why not use a single timeline for the entire thing. I forked your codepen and created a single timeline with all the animations:

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


Now that we have a timeline that animates everything the way we intend, we add ScrollTrigger to the mix now:

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


Finally I recommend you to review this video in order to understand the process I did in order to arrive to the final codepen:


Hopefully this clear things up.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Thank you, your suggestion of prepping up the basic animations first is really helpful.
Also whoops, I really thought they were ms!

The end result you provided is closer to my idea than what I could do in days.
I'll try to tweak the animation from here and delve further into the powerful tool that's gsap.
Making sure to come back if I have more questions.

Thanks again!

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.
  • Create New...