Jump to content


Help to tighten up ScrollTrigger behaviour

Moderator Tag

Recommended Posts

Hello all. Total beginner GreenSock user here, please bear with me. I've set up a demo to switch out images on the left while the user scrolls text on the right. It's heavily based on the official "Pinned content based on section - ScrollTrigger" demo. It works ok but I'm looking for advice on how to tweak the functionality slightly. Below is my wish list, but if anyone who cares to help could also explain what I'm missing or doing wrong as well it would be greatly appreciated, as I wish to learn more about GSAP and use it in different applications.


  1. The first image needs to be immediately visible i.e. on page load, as soon as the user starts to scroll past the header.

  2. When scrolling through, Image Number Two needs to become visible when the horizontal line between Text Number One and Text Number Two is vertically aligned with the Image Number One placeholder text.

  3. Currently, Image Number Five is never displayed. Per the above, it should come into view when the top of Text Number Five is vertically centred with Image Number Four. When scrolling ends, the bottom border of Text Number Five should be vertically aligned with the bottom of Image Number Five. In my current demo, scrolling ends when the text pane is only half way up the image pane. I feel like this is related to problem #2 above, but not sure how to tweak it.


Thanks in advance for any help or suggestions.



See the Pen GRBVzad by matt-j-m (@matt-j-m) on CodePen

Link to comment
Share on other sites

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...


Keep it simple. Don't list a bunch of requirements ("it should animate over each section, and gradient colors over those children, force animation on hero load and then have ScrollTrigger take over dynamically...and I think my code is a mess so please help clean it up" - that's too hard to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 


Baby steps 😉


Before you know it, things will fall into place one at a time.


Again, try not to list out all the problems. Break them apart. You'll get a lot more people willing to help you if you keep things simple and clear. A well-crafted minimal demo is GOLD around here - you'll get people falling over themselves to help you if you make a CodePen that's super clear and isolates the issue. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.


Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

Link to comment
Share on other sites

By the way, here are some CodePens that might help to analyze (not sure if they are similar to what you're looking for):


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

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

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


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.