Jump to content
Search Community

Clear or "reset" all values in "toggled" timelines

niklasinla test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hi!
I'm using GSAP to animate a responsive menu.
The codepen ain't pretty (it was a fast setup) but it does show my problem.
At small mobile size the menu is a hamburger menu.
My problem is when you resize the browser.


To replicate:
- Downsize browser so the hamburger become visible
- Click on the the hamburger and leave it open - don't close it
- Resize the browser to larger screen so that the desktop menu comes back

- Resize once again the browser to a smaller size so the hamburger becomes visible

- When you click the hamburger this time the animation play backwards

 

It seems like the toggling av the menu isn't "reset" in my resize event in js.
I don't know how to achieve that. Anyone that have a good idea how to accomplish this?

P.S 
You will have to open the pen a new browser window or tab for "responsive events" to happen...

Best, Niklas

 

 

See the Pen OJpVYed by WideCircle (@WideCircle) on CodePen

Link to comment
Share on other sites

11 minutes ago, niklasinla said:

One question:
I don't quite get this one anim && anim.play(); - why the "anim" twice...?

That's the same as:

if (anim) {
  anim.play();
}

Basically, it's checking to make sure that value exists before it attempts to call .play() on it (otherwise it'd throw an error). 

  • 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.
×
×
  • Create New...