Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Narendra786

Screen goes blank after scrollTrigger ends

Go to solution Solved by mikel,

Recommended Posts

I have created a simple svg animation. The animation I created works perfectly but at the start of the scroll, the entire screen slightly jumps up. Also at the end of scrolling, the screen goes goes completely blank. I am not sure if there is some scrollTrigger method that would help me solve this problem. Any help would be helpful. Also, I would like to enable the about_back timeline's scrolling only after the first timeline i.e. about_anim has completed.

Note: I have used a timeline instead of a simple gsap.to() because after I solve this issue, I hope to add some more complex animations to the timeline

See the Pen NWbqdVY?editors=1010 by Narendra786 (@Narendra786) on CodePen

Link to comment
Share on other sites

You're overwriting animation with CSS. If you want to pin an element, just use `pin: true` don't also try to add `position: fixed`. I've giving your about section a height using the `100vh` instead of 100%

 

See the Pen xxROmoN by mvaneijgen (@mvaneijgen) on CodePen

 

Hope it helps.

  • Like 3
Link to comment
Share on other sites

Thank you, that solved the issue!

Quote
2 hours ago, Narendra786 said:

Also, I would like to enable the about_back timeline's scrolling only after the first timeline i.e. about_anim has completed.

Could you also help me with this

 

  • Like 1
Link to comment
Share on other sites

Hey @Narendra,

 

You could sequence into the ScrollTrigger timeline as much tweens as required.

So put this tween first ...

 

See the Pen poNbYKg by mikeK (@mikeK) on CodePen

 

Happy sequencing ...

Mikel

  • Like 1
Link to comment
Share on other sites

I thought of that but I do not want first timeline to be affected or controlled by scrolling. I want it to start automatically without the user scrolling, and while its happening, the user shouldn’t be able to scroll. The user can scroll only after the first timeline has completed. 

Link to comment
Share on other sites

You want to disable scrolling? I would advice against that, scrolling is a core function of a website and if you take that away you must have a really good reason for it. 

 

If you really want to, you'll have to set something like CSS `overflow: hidden` on the element you want to stop scrolling and `onComplete: ...` of your animation remove that CSS. Again you must have a really good reason for disabling scrolling, because what if someone comes for the second time to your site and just want to get the content on the bottom of your page, they you'll we forcing the visitor to watch your animation every time? 

  • Like 2
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.
×