Updating to 3.12 / 3.12.1 breaks pinning

[mattpilott]

Hello,

 

In a project im working on which is using gsap 3.11.5, updating to 3.12 or 3.12.1 breaks pinning. This behaviour is similar to what happens when you dont use a context. Im in SvelteKit and the break happens when changing pages. Essentially the dom isn't cleared up properly. Here's the code:

let trigger

onMount(() => {
    const ctx = gsap.context(() => {
        let tl = gsap.timeline({
            ease: 'none',
            scrollTrigger: {
                trigger,
                scrub: true,
                start: 'top 25%',
                end: '+=100%',
                pin: true
            }
        })

        tl.from('.body', {
            y: 50,
            autoAlpha: 0.25,
            duration: 2
        })
        tl.fromTo(
            '.body',
            { backgroundPosition: '50% 0%' },
            { y: -50, backgroundPosition: '50% 100%', duration: 4 }
        )
        tl.to('.body', {
            y: -100,
            autoAlpha: 0.25,
            duration: 2
        })
    }, trigger)

    return () => ctx.revert()
})

Is there something i need to do or is there a bug?

[Cassie]

Hi there!

 

Sorry to hear you've run into something problematic.

Have you got a demo showing the issue and how it's breaking, I've just run some quick tests and revert's cleaning up all the DOM stuff I'd expect it too. Could you give us any more information to help us find the issue?

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

 

Thanks so much
 

[GreenSock]

@mattpilott I'm super curious to see a demo. We want to fix any bugs, but I can't imagine what might be causing that for you. Nobody else has reported something similar. Once we see a minimal demo that isolates the issue, I'm sure we'll have more insight to offer. 

[GreenSock]

Aha! I think I found the issue and it would only happen if you applied a ScrollTrigger to a timeline inside a context and then reverted the context. It should be resolved in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js (you may need to clear your cache). Better? 

 

And here's where I recreated the problem based on your code (just for reference): 

See the Pen dyQYjWw?editors=0010 by GreenSock (@GreenSock) on CodePen

[mattpilott]

Hi Jack, Cassie,

 

Thanks for investigating despite me not providing a repo!

It looks like the beta does indeed resolve that issue for me.

 

Will double confirm once 3.12.2 is released

 

Thank you so much!