Jump to content
Search Community

Scrolltrigger pins snapping in to place harshly

MeltonP test
Moderator Tag

Recommended Posts

Hello! 
I am having an issue when using scrolltrigger and pins, I have the scrolltrigger start to be when the bottom of the container hits the bottom of the screen, but I think due to this it creates a harsh "snapping" to its pinned spot when moving in to the next section of the scrolltrigger. 

The reason I have the scrolltrigger set to "bottom bottom" is because when I have the scrolltrigger start to be "top top" depending on screen size it doesn't show all of the content in the previous section before moving to the next scrolltrigger section (however when I was using "top top" the harsh snapping wasn't an issue). 

Is there a way to either 1) Fix the harsh snapping in to the pinned spot when the scrolltrigger is set to "bottom bottom" OR 2) Fix the cutting off of content when the scrolltrigger is set to "top top" ?

See the Pen YzONJYw by Melton-Paul (@Melton-Paul) on CodePen

Link to comment
Share on other sites

Hi @MeltonP welcome to the forum!

 

Your pen didn't have snapping, so I was really confused, but if I enable snapping it seems to be really mellow. 

 

In the ScrollTrigger docs there are a lot of settings for snap: which could affect the speed duration and ease, is that something you've already looked at? 

 

  • delay [Number] - the delay (in seconds) between the last scroll event and the start of the snapping animation. Default is half the scrub amount (or 0.1 if scrub isn't a number) 
  • directional [Boolean] - by default (as of version 3.8.0), snapping is directional by default meaning it'll go in the direction the user last scrolled, but you can disable this by setting directional: false.
  • duration [Number | Object] - the duration of the snapping animation (in seconds). duration: 0.3 would always take 0.3 seconds, but you can also define a range as an object like duration: {min: 0.2, max: 3} to clamp it within the provided range, based on the velocity. That way, if the user stops scrolling close to a snapping point, it'd take less time to snap than if the natural stopping point is far from a snapping point.
  • ease [String | Function] - the ease that the snapping animation should use. The default is "power3".
  • inertia [Boolean] - to tell ScrollTrigger not to factor in the inertia, set inertia: false
  • Like 2
Link to comment
Share on other sites

Hello!
Apologies, I wasn't referring to the actual 'snapping' implementation provided by GSAP, I was just using that as a descriptor. I am referring to the motion that is occurring when the next section of scrollTrigger starts, (in the code pen this is most noticeable when going from the white to red section), in which the section goes up and then has an extra sort of bounce downward that causes an unwanted blink.

Link to comment
Share on other sites

Hi,

 

This seems more related to the fact that the html and body elements have their default 8px margin applied (at least in the case of your codepen example) and given the height of the elements (100vh) it creates that jump you're seeing regardless of the start point of the ScrollTrigger instance:

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

 

Finally you had a syntax issue in your ScrollTrigger configuration:

// Bad
start: "bottom bottom -=90",
// Good
start: "bottom bottom-=90",

Hopefully this helps. Let us know if you have more questions.

Happy Tweening!

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