ScrollTrigger backwards scrub (space above section on kill)

[Maga Pascansky 1 Likes (Newbie)]

Hello everyone!

 

I started using scrolltrigger to make a nice scrolling website for a client. 

In the header section, I want the animation tu run on scrub but not on backwards scrub, so I killed it onLeave. The problem is that when the animation is killed a large black space is left above my header section.

 

I tried making it the same as I have it on CodePen but I failed.. hope it's understandable this way.

 

Thank you in advance!

See the Pen oNEXojL by magapascansky (@magapascansky) on CodePen

[OSUblake 18,471 Likes (Superhero)]

Welcome to the forums @Maga Pascansky

 

Check out the solutions posted in this thread.

 

 

Also, I would recommend switching over the newer GSAP syntax.

 

// var headerAnim = new TimelineMax();
var headerAnim = gsap.timeline();

 

You can check out the syntax changes in the Migration Guide.

 

 

[Maga Pascansky 1 Likes (Newbie)]

3 hours ago, OSUblake said:

Welcome to the forums @Maga Pascansky

 

Check out the solutions posted in this thread.

 

 

Also, I would recommend switching over the newer GSAP syntax.

 

// var headerAnim = new TimelineMax();
var headerAnim = gsap.timeline();

 

You can check out the syntax changes in the Migration Guide.

 

 

Hello and thanks for your quick response!!
 

The solution to this post worked for me but I encountered 2 new problems.

First, I had to disable "scroll-behavior: smooth", which makes my nav work kind of awfully.

Also, killing the scrolltrigger made all of the following sections (which also work with scrolltrigger) break 😕

 

 

[OSUblake 18,471 Likes (Superhero)]

20 minutes ago, Maga Pascansky said:

First, I had to disable "scroll-behavior: smooth", which makes my nav work kind of awfully.

 

I'm not sure what you mean, but you really shouldn't have that set if you're doing anything remotely related to scrolling with JavaScript.

 

20 minutes ago, Maga Pascansky said:

Also, killing the scrolltrigger made all of the following sections (which also work with scrolltrigger) break 😕

 

Also, I'm not sure what mean here. What breaks? 

 

I was nudging you towards the first solution in that thread because I know more people have had success with that solution, but I don't know what issues you are experiencing.

 

 

[Maga Pascansky 1 Likes (Newbie)]

47 minutes ago, OSUblake said:

 

I was nudging you towards the first solution in that thread because I know more people have had success with that solution, but I don't know what issues you are experiencing.

 

 

That was it! Disabling the scroll-behavior + this code. 

 

Thank you very much