Jump to content
Search Community

ScrollTrigger backwards scrub (space above section on kill)

Maga Pascansky test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

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 😕

 

 

Link to comment
Share on other sites

  • Solution
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.

 

 

Link to comment
Share on other sites

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 :)

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...