Jump to content
Search Community

Staggered Menu Animation

Anand Makhija 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

  • 2 years later...

Simple conversion (fork) of @mikel 's demo above to GSAP 3:

 

This may be somewhat of a trivial post to add. But since I'm new here, I thought I would try to adopt a practice of sharing as I learn. That way I'm not all take, take, take. Maybe this will make it that much easier for some other newb like me, though the Migration Guide is plenty helpful already.

 

Only changes are naming/syntax edits in the javascript and replacing the TweenMax resource with GSAP 3. Please feel free to inform me of corrections. Thank you! Seems to still work though. 🙂

 

See the Pen gOWbrer by jcparris (@jcparris) on CodePen

  • Like 4
Link to comment
Share on other sites

Good job, Parris!

 

Just some notes about things that are not neccessary for it to work properly - but might be helpful for the future:

 

  • There's no need for the 'new' anymore when creating a timeline - gsap.timeline() is enough -  var myVariable = gsap.timeline()
  • for GSAP3 the old form for eases still works, but the string form is preferred - easeSine.easeOut  --> ease: "sine.out"
  • same would go for the power1.out ease in the last tween - but you wouldn't even have to set that one, as GSAP3 sets a power1.out ease to tweens by default - this is worth mentioning in particular, because when you don't want any ease to be applied, you would actually have to set ease: 'none' (either via defaults or on the tween directly)

 

and lastly you could also get rid of jQuery and do things all vanilla JS if you wanted.

 

Happy learning :) 

 

  • Like 3
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...