Share Posted February 9, 2021 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 More sharing options...
Share Posted February 9, 2021 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. 3 Link to comment Share on other sites More sharing options...
Author Share Posted February 9, 2021 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 1 Link to comment Share on other sites More sharing options...
Share Posted February 9, 2021 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 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 9, 2021 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 More sharing options...
Share Posted February 9, 2021 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? 2 Link to comment Share on other sites More sharing options...
Author Share Posted February 9, 2021 Ok, that will do! Link to comment Share on other sites More sharing options...
Solution Solution Share Posted February 9, 2021 Hey @Narendra, Do you want this sequence? See the Pen oNYLryq?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
Author Share Posted February 10, 2021 Yes, thats exactly what I wanted! Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now