Jump to content


ScrollTrigger pinned animation

Go to solution Solved by Carl,

Recommended Posts


I'm quite new to GSAP world and trying to learn it. All the examples of the docs and this forum are an incredibly helpful thing !
I'm currently trying a little ScrollTrigger animation but can't manage to make it work on my own.


On the attached Codepen, my goal is to make the blue square grow progressively from scale 1 to scale 4 when scrolling down the 100px between the start and the end of the animation, and reverting from scale 4 to scale 1 progressively when scrolling up  the 100px from the end to the start of the animation.

On the Codepen, as you see, the blue square will grow all at once when the animation starts and won't revert when scrolling up to the beginning of the animation.

Thank's for your help and sorry if the solution is evident.

See the Pen GRyBOxp by MaxOlliv (@MaxOlliv) on CodePen

Link to comment
Share on other sites

  • Solution



Thanks for the demo. It's always good to start with small examples like this. Good job!


I think you are just looking for scrub:true


See the Pen dyJjEwK?editors=0010 by snorkltv (@snorkltv) on CodePen


Hopefully this helps

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Oh yes, that's exactly it !
Thank's a lot for such a fast answer and sorry for this stupid question, I thought the answer would be a lot more difficult.

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.