ScrollTrigger on a page with no overflow

[Justin N]

CodeSandbox Example
 

Hi,

I would like to use ScrollTrigger to scrub through the timeline of an animation. The animation all happens within a div containing an svg.  I can get this to work in the above code sample if I add a div under the svg with height so that there is overflow and scrolling. 

How can I achieve the same without the unnecessary space below the svg ?

 

Additionally, I think you will find a bit of a bug in my code.  I find that when I run the app, the scroll trigger will not work unless I add or remove (depending on if it is there or not)  the line "drawSVG: 0" after the scrollTrigger{ }. If I make any changes, I usually have to repeat the process of either adding or removing that line to get the animation to run again.

Many thanks!

[elegantseagulls]

9 minutes ago, Justin N said:

I can get this to work in the above code sample if I add a div under the svg with height so that there is overflow and scrolling. 

I cannot get your sandbox to work.

If I understand you, you're looking to scrub an animation with the scroll/wheel event rather than the actual scroll action (sounds as though you don't want to actually scroll, but hard to tell without a working demo). You may consider checking out GSAP's somewhat new Observer, which can nicely watch events (the first demo may point you in the right direction). https://greensock.com/docs/v3/Plugins/Observer

[Justin N]

1 minute ago, elegantseagulls said:

I cannot get your sandbox to work.
 

Hi @elegantseagulls, 

Thank you for pointing me to the Observer!  That is exactly the solution that I need, thus removing my need to create space to make the scroller work. 

 

Now, on to the other problem ... the animation not working.   I had added a note while you were replying about this.  If you load the pen and either add or remove the line of code: drawSVG: 0 below the scrollTrigger{ } object, you will notice the app update with correct markers. For clarification, if you see: 
 

scrollTrigger: {
  ...
},
  
drawSVG: 0

then remove the line.  If it's not there, add it. 

What am I doing wrong that I have to do this to make the animation work ?

 

Thanks!

[elegantseagulls]

Ah! You're creating a timeline before those elements are available in the dom (good ol' React). You might consider reading this article to help setup GSAP in react: