Jump to content
Search Community

Is this possible with ScrollTrigger pin?

fogseller test
Moderator Tag

Recommended Posts

@fogseller I think you mean ScrollTrigger plugin as "scrollmagic" is not a GreenSock plugin its another js lib entirely.


What you want to achieve is totally doable though with GSAP.ScrollTrigger! here is an example you could use to get started! If you have a specific question about gsap or scrolltrigger make a minimal codepen of the issue then explain it well, and you are bound to get lots of help! Enjoy!


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

  • Like 2
Link to comment
Share on other sites

Thank you  @b1Mind yeah, ScrollTrigger, of course 😃 i got it right in the title 😂😂

i saw the example you send, and it is a good start, but katiforner.com example is little complicated version of that.  The screen is split in half, images have paralax effect or even two, and at the same time on the left side we have other things going on. It’s too complicated for me to understand by myself since i’m not professional like you guys 😎

thank you 👍

Link to comment
Share on other sites

Most anything is possible. However, things like this are not easily compatible. Notice that the snapping sections pen makes use of GSAP's ScrollToPlugin to intercept the normal scroll behavior. You'd have to replace this with a Locomotive Scroll's .scrollTo() method to animate the scroll position but it doesn't seem to like to be called during a scroll with a touchpad or magic mouse. Either way, it's not really a GSAP question so we might not be able to help you much more with getting it to work :) 

  • Like 1
Link to comment
Share on other sites

  • 2 years later...
1 hour ago, MaryMax said:

When I change the height of the section to 50vh everything gets messed up going downward, although it seems to be Ok in upward direction. How can I solve this?

It's just a logic thing. If you set the section height to 50vh, that means you'll have TWO on the screen at any given time but you set up you start value for the ScrollTriggers such that they'll get tripped when the sibling's ScrollTrigger does its scroll. It may help for you to turn on markers just to visualize it a bit. 


I assume you wanted something more like this (which simply adjusts the start values to accommodate what you're trying to do): 

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

  • Like 1
  • Thanks 1
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...