Jump to content
Search Community

Is this the right method?

astanar test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello everyone,

 

I'm new to javascript and gsap and I've been trying to animate a section change.

 

So it has 3 sections: 1, 2, and 3. By default section 1 is visible since it is the first one that shows when you load the page. I made a script that looks for mouse wheel events and switches the class "is_active" depending on where we are. I've then attached a simple animation that looks for the "is_active" class to show the right section. The other ones become hidden.

 

So far it works but I can't find a way to have the "show" animation to wait for the "hiding" one to finish before triggering. Also, if you scroll fast up/down all section will eventually be visible. How would I stop that from happening?

 

Thanks!

 

See the Pen NVJVWL by astanar (@astanar) on CodePen

Link to comment
Share on other sites

oh snap I just saw the ScrollToPlugin. Guess I should use that.  I just that this pen on another forum post:

 

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

 

How would the script "know" where we are to trigger the right animation if we were to bind the section change to a mouse wheel (and not having a scroll behavior)?

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