Jump to content
Search Community

Generic toggle snippet?

ShopAnHour 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 and thanks and congratulation for this amazing tool.

 

Newbies here, i only know few basics about javascript/jquery but managed -thanks to the extensive documentation and active community- to do what i wanted to do: animate a menu. However i surely haven't done it the cleanest way possible that's for sure, because i collected informations from topics to topics and melted all possible junk of codes in an experimental mix of javascript/jquery.(Soon MIT Licensed). 

 

Here is a codepen, there is missing css style so its not particulary pleasant to watch but this is working:

 

 

 

 

So, I ended up using a snippet from a greensock  demo, because that was exactly what i wanted, however i have never managed to make the reverse method to work, and use another tween to make stuff go in or out, with statements. Is there any way to clean that code with solid reverse method?

See the Pen myGyJM by Rofizzle (@Rofizzle) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

First congratulations on a very nice menu animation, very fun!!

 

Second, I'm going to assume that you're talking about reversing the animation of the menu item on mouse over/out, play the animation on mouse over and reverse it on mouse out. That should be fairly simple except for the fact that you're using an Elastic.easeOut easing function for each event handler. Using play/reverse can give you unwanted results, see the following link:

 

See the Pen dPqPOv by anon (@anon) on CodePen

 

Another option could be to tween the progress or time of the tweens, but doing so with an elastic easing function will also create unwanted results:

 

See the Pen MYqYJN by anon (@anon) on CodePen

 

If you intend to keep the elastic easing I believe that the simplest way is how you're doing it right now.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hello Rodrigo , i already know you from here ;) thanks for your fast answer, i got to admit that i don't even know what i wanted to solved in the first time, because everything is so blurry to me speaking code. So i'll focus on one element:

 

".nav-cd-trigger" is linked to 

 

$('.cd-nav-trigger').click(function(){
  TweenMax.set(".stag", {clearProps:"all"})
  TweenMax.staggerFrom('.stag', 2, {alpha:0, yPercent:-100, scale:0.4, force3D:false, ease:Elastic.easeOut},0.2);
})
 
When i first brainstormed my menu animation from scratch from infos gathered in the documentation i tried to use the reverse method, storing the "from" tween as a function "toggleMenu" (ill keep it simple for example) (mytween > stagFrom > opacity 0 (to default opacity)), then i made a statement if "menu-is-open" (class added to the body by the menu snippet), then when i click again on "cd-nav-trigger' the menu animation would reverse animation via "toggleMenu.reverse()".
 
So:
Click menu trigger > mytween From
Reclick menu trigger > mytween To
 
But i never managed to make it work so i just copy pasted a code from your demo...
 
Also i discovered something very problematic by the way, when a link is affected with a class linked to a tween (.stag in my example), well it wont load the page linked...
Link to comment
Share on other sites

Hi,

 

I see what you mean. The simplest way to tackle this would be to create a timeline, set it reversed state to true and then use a ternary operator to play/reverse the animation:

 

See the Pen raZOrR by rhernando (@rhernando) on CodePen

 

As you can see is fairly simple, in your case it should be like this:

var navButton = $('.cd-nav-trigger'),
    navTimeline = new TimelineLite({paused:true}).reversed(true);

navTimeline
  .set(".stag", {clearProps:"all"})
  .staggerFrom('.stag', 2, {alpha:0, yPercent:-100, scale:0.4, force3D:false, ease:Elastic.easeOut},0.2);

navButton.click(function(e){

  e.preventDefault();

  navTimeline.reversed() ? navTimeline.play() : navTimeline.reverse();

});

But as you can see in my codepen there are some issues when reversing animations that have Elastic, Bounce and Back easeOut, set as easing functions, so you should test and be fine with the way it looks before launching your site.

 

Rodrigo.

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