Jump to content
Search Community

GSAP ScrollTrigger Pinning Question

Matthew Meaklim test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts



I've implemented a variation of the above CodePen on a website, and although it functions well for the most part, there's two things I'd like to change, but am unsure how best to do so.


1. I'd like the first panel to be visible from the get go - I don't wish to scroll to the pinned section and then have it animate in.

2. I'd like the last panel to remain visible as I scroll away - I don't wish for the last panel to disappear as I scroll away.






See the Pen ZEpKqoz by nour-darani (@nour-darani) on CodePen

Link to comment
Share on other sites

  • Solution



You can solve it with a different style for the first heading, using the Toggle Actions config properly and triggering the first header animation at the same time with the second header.


Toggle Actions (from the Docs):

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".


Here is a live example (thanks for the simple codepen! 🙌)

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


Finally your original example was using very old versions of GSAP and ScrollTrigger (3.5.x), always use the latest versions.


Happy Tweening!

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...