Destrovi Posted August 8, 2020 Share Posted August 8, 2020 Hello all! New to the scene of Green. What I am trying to do, is prohibit the user/visitor from scrolling until the opening animation is completed. The black section with "TITLE" is the opening animation that happens before disappearing and revealing the Main section that is Blue that underneath. What is happening now, is that during the opening, I can scroll down to the next few sections while the timeline continues, which I'm hoping to stop. Really what I want to do is force the animation to play before the user continues with the rest of the site. Extra: Also is there a way where the animation only happens once, if It has already been played? .. Something something local storage or something similiar. See the Pen VwaYRgv by Destrovi (@Destrovi) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted August 8, 2020 Share Posted August 8, 2020 Hey @Destrovi, Welcome to the GreenSock Forum. Please take a look at the new GSAP scrollTrigger. With the help of this tool I would pin the entire page (#pageWrap) and scrub the animation So the user sees an activity when he scrolls. See the Pen xxVbNLP by mikeK (@mikeK) on CodePen An alternative: no scrubbing, but only once See the Pen mdPyYYZ by mikeK (@mikeK) on CodePen Happy scrolling ... Mikel 2 Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted August 8, 2020 Share Posted August 8, 2020 Hi Destrovi, if I understand correctly you want to prevent the user from scrolling while the initial animation is happening? You can give the body or another wrapper element a class .is-loading and then use GSAPs onComplete callback to remove the class when the animation is done. onComplete: () => document.querySelector('.content').classList.remove('is-loading') See the Pen bGpNPPY by ihatetomatoes (@ihatetomatoes) on CodePen Hope that helps. Cheers Petr 5 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 8, 2020 Share Posted August 8, 2020 Petr is spot on. 7 hours ago, Destrovi said: is there a way where the animation only happens once, if It has already been played? .. Something something local storage or something similiar. Yes you could use localstorage, sessionstorage, or cookies to do this depending on your needs. 2 Link to comment Share on other sites More sharing options...
Destrovi Posted August 8, 2020 Author Share Posted August 8, 2020 Perfect, I had a chance to play with both suggestions, and it worked out, and was able to play with the idea of the animation running once. Thanks Folks! Link to comment Share on other sites More sharing options...
Brodiero Posted September 3, 2020 Share Posted September 3, 2020 I have a similar predicament. My opening animation uses elements that are then used in a scrollTrigger tl. I have a fixed position 100vh splash animation, at the end of which I add my 'scrolling spacer' 800vh div below and get a scrollbar for the ST tl. Does that sound like a sensible approach? Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 3, 2020 Share Posted September 3, 2020 8 minutes ago, Brodiero said: Does that sound like a sensible approach? It does. 1 Link to comment Share on other sites More sharing options...
Koyash Posted April 6, 2021 Share Posted April 6, 2021 Sorry if I'm not completely understanding the question but what you could also do is give your <body> a class and use gsap.timeline() as such: gsap.timeline() .to(".body", { overflow: "hidden" }) .to(".someSelector", 1, { rotate: 360, delay: 0.5 } .to(".body", { overflow: "" }); Again I'm not sure if this is "best practice" but this does work for me at least. 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