ScrollTigger not working

[TELLO]

Hi all,

 

I use ScrollTrigger in lot of projects. Now I use it in a new one with GSAP PixiPlugin and the ScrollTrigger will not work.

The ScrollTrigger Script somehow not working. I get the Markers on the right position... but I don't get a pin of my DIV or start the animation of the Timeline or - If I do it to test, logs in my console.

 

I also get NO error in webpack.

My TestDIV will not pin. Also without calling the timeline. I have no idea....

 

const tl_referenz_filter = gsap.timeline({paused: true});

tl_referenz_filter
    .to('#content-referenzen-test', {
        autoAlpha: 0,
        duration: 1.2,
        ease: "power4.in"
    }, 0)

ScrollTrigger.create({
    trigger: '#content-referenzen-test',
    start: "top center",
    markers:true,
    pin: true,
    onEnter: () => tl_referenz_filter.play(),
    onLeaveBack: () => tl_referenz_filter.reverse(),
})

[OSUblake]

Hi TELLO, 

 

It's impossible to tell what's going on from a code snippet as there is HTML, CSS, and a bunch of other factors involved. Can you put together a minimal demo that shows the issue you are having? Thanks!

[Cassie]

+1 to making a minimal demo like Blake suggested. 

A little  additional note though, you could handle the play and reverse using toggleActions like so...

 

const tl_referenz_filter = gsap.timeline({paused: true});

gsap.to('#content-referenzen-test', {
  autoAlpha: 0,
  duration: 1.2,
  ease: "power4.in",
  scrollTrigger: {
    trigger: '#content-referenzen-test',
    start: "top center",
    markers:true,
    pin: true,
    toggleActions: 'play none none reverse'
 }
})

from the scrolltrigger docs -

 

toggleActions

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

[TELLO]

I was writing not clear. Code sample is not possible with all the stuff I use. And as I was writing, simple projects working. 

Its not the code. I can make them total simple, just for the DIV to pin. I get only the marker. No pinning, no logs (if I try). 

 

ScrollTrigger.create({
    trigger: '#content-referenzen-test',
    start: "top center",
    markers:true,
    pin: true
})

 

I suggest the mix of plugins. My question was more if there is anything known. With PIXI, MotionPathPlugin, Random, Bootstrap or Swup in combination? 

I also used now the 3.8.0 - but still the problem. Otherwise I must start with a dummy side and add stepp by step my plugins to the time its not working anymore.

 

 

[Cassie]

No, I'm afraid there's no known issue. CodeSandbox is sometimes more useful for more complex set-ups, maybe that will be an option?

The only thing I can think of is that maybe some high specificity bootstrap styles are interfering with the pinning? Impossible for us to tell though unless you can recreate the issue for us.

[akapowl]

If I am not totally mistaken, bootstrap will apply scroll-behaviour: smooth by default.

 

That might (and for sure will) be causing problems here.

But it also might not be the root of all evil - so still +1 for the minimal demo.

 

https://greensock.com/search/?&q=scroll-behavior%3A smooth&quick=1&search_and_or=or&sortby=relevancy

 

Here is a thread where the demo also uses bootstrap and @GreenSock mentions the scroll-behavior.