Scroll Trigger Pin is jumpy

[ragingrahul]

I have this scrollTrigger animation where when pinning the the div that is getting pinned is bouncy, its not much prominent when you pin while entering the animation, but when animation ends and it unpins and exactly at that moment, if its scrolled up and the div is again pinned thats when its more jumpy.
i did use anticipate pin and saw it might be due to margin stacking so, removed margins too for 1 div.

Other than that, i have a set of json animations, which are taking time it initialize(approx 600ms ), as i am calculation where the end of the ScrollTrigger should be based on that json animations width, so i am finding it difficult on how should i call my animation function. Calling it instanteneously when

refreshInit is called it breaking the end width calculation

 

 

StackBlitz link-https://stackblitz.com/edit/nextjs-22dh7p?file=Component%2FCarousel.jsx

Edit:the whole animation breaks when the window is resized and refreshInit is called

 

[Rodrigo]

Hi,

 

I don't have a lot of time to go through all your code right now, but most likely this stems from pinning elements inside another main element and those elements being pinned are not 100vh height.

 

In these cases is better to use pinType: "transform" or pin the outmost parent element common to the elements you want to animate. Like these examples:

See the Pen LYMYYEL by GreenSock (@GreenSock) on CodePen.

 

See the Pen qBLRzVX by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!

[ragingrahul]

Thank you!!
Also what might be the reason for the animation to break after refreshInit event is called even though the animations are called inside gsap.context?

[Rodrigo]

Honestly I couldn't tell you without dissecting your code line by line and following step by step what's happening. Unfortunately we don't have the time resources to do that.

 

In a quick glance what I can see is that you have this two methods initCard and TextSlideUp. In both you are creating ScrollTrigger instances that use the same trigger, both have invalidateOnRefresh: true and maybe the animations attached to those could be targeting the same elements, so that's where I'd look first, maybe try to create all animations in one go and in a single timeline, if possible. Also create those ScrollTrigger instances in the order they appear on the screen.

 

Hopefully  this helps.

Happy Tweening!

[Creadoma.]

I was searching for a solution to this problem also for a long time. But then I found this tipp in the comments of a YouTube Video. And BOOM, it worked:

 

 

"i had a similar issue with pins jumping. i found that if i added a line of CSS for transition, it solved the issue. So if I'm pinning ".hero1", then I just added .hero1{ transition: 0s; }."

 

Much love,
Robert.
 

[Rodrigo]

Hi,

 

Most likely you have CSS transitions somewhere in your styles, be sure to avoid CSS transitions on the same elements that are being animated or transformed by GSAP in any way, as mentioned in our Learning Center:

https://gsap.com/resources/mistakes#using-css-transitions-and-gsap-on-the-same-properties

 

Great to hear that you were able to solve your issues and thanks for sharing the solution with the community! 💚

 

Happy Tweening!

[adRocZ]

Just wanted to say I was looking for a similar solution since I ran into this same issue. If someone finds this and sees that their pinned items are still jumping, double check your trigger elements as well, the same css solution worked for me when I added it to my trigger element.

[DicedMango]

The problem

Three pinned sections jumping on entry and exit. The pin would snap the element to an incorrect position the moment it activated.
 

Root cause

GSAP ScrollTrigger calculates each trigger's start and end positions once at creation time. When triggers are created asynchronously (e.g. after fetching project data or waiting for images to decode), the page layout hasn't fully settled — so those calculated positions are wrong. When you scroll into a pinned section, GSAP snaps it to where it thought it should be, not where it actually is. That snap is the jump.
 

The fix

ScrollTrigger has a refresh() method that recalculates all trigger positions. The trick is calling it at the right moments — not on a dumb timer, but when it actually matters: as you scroll past each major section.
 

We added a function that runs after page load, finds every direct child of the page container, and attaches a ScrollTrigger to each one. On onLeave and onLeaveBack — i.e. whenever you scroll past the bottom or top edge of any section — it calls ScrollTrigger.refresh(). This means by the time you reach any pinned section, all positions have been recalculated based on the true rendered layout.

function setupSectionRefreshTriggers() {
  const { gsap, ScrollTrigger } = window
  if (!gsap || !ScrollTrigger) return

  const container = document.querySelector('#smooth-content')
  if (!container) return

  const SKIP = ['.logo-ticker', 'footer', '.footer']

  Array.from(container.children).forEach(el => {
    if (SKIP.some(sel => el.matches(sel))) return
    const label = '.' + (el.className.split(' ')[0] || el.tagName.toLowerCase())

    ScrollTrigger.create({
      trigger: el,
      start: 'top top',
      end: 'bottom top',
      onLeave: () => ScrollTrigger.refresh(),
      onLeaveBack: () => ScrollTrigger.refresh()
    })
  })
}

setTimeout(setupSectionRefreshTriggers, 3500)

[GreenSock]

I certainly wouldn't recommend handling things that way - calling ScrollTrigger.refresh() every time a particular element scrolls out of view in each direction seems like it's introducing a lot of extra work in the browser DURING scroll which could lead to stutters. It's far better to just call ScrollTrigger.refresh() when you know your DOM has settled (after any changes that'd alter the position of scrolltriggered elements). 

 

ScrollTrigger already automatically calls ScrollTrigger.refresh() when the page fully loads (so all the images would be finished unless you did lazy loading). If you're dynamically loading things after that or doing lazy loading, just make sure you fire ScrollTrigger.refresh() when those things are done (you can easily set up event handlers for that). 

 

@DicedMango do you have a minimal demo that shows the problem as well as another one demonstrating the solution? I suspect there's a much better/cleaner way to handle it.