Jump to content


Scroll Animation, move object.

Recommended Posts

Hi Champs,

I'm new to GSAP, so I have a case related to scroll trigger, so in my case I need to do something similar to the above example but what I required actually is like I have an object like box in the example and I move it when scroll starts and what I need it like when the box reached to a specific position then it will rotate to left and then when I scroll more.. then it will back to its original state and then again at the end of animation it will rotate to some angle or degrees left or right.

The object will not rotate every time I scroll but at a specific point.


See the Pen ZEQGmge by richardcool (@richardcool) on CodePen

Link to comment
Share on other sites

Sure, you'd just need to set the start/end positions accordingly. And if you want it to rotate one way, then another (or whatever), you can just put those animations into a timeline, and the ScrollTrigger goes on that timeline and set scrub: true so that as you scroll, it simply scrubs through that timeline (when it's between the start/end scroll positions). 


My advice: set up your timeline by itself and get the square animating in the sequence you like (standalone). THEN hook it up to the scroll position using ScrollTrigger. 


If you get stuck, just post your minimal demo here and we'd be happy to answer any GSAP/ScrollTrigger-specific questions. Please read the forum guidelines, though - these forums aren't intended to be a place where you list your project requirements and then have us build it for you for free :)

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.