Jump to content
Search Community

Disable Scrolling During Opening Animation

Destrovi test
Moderator Tag

Recommended Posts

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

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

  • Like 2
Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

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. 

 

  • Like 2
Link to comment
Share on other sites

  • 4 weeks later...

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

  • 7 months later...

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

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