Jump to content
Search Community

Menu annimation with GSAP

hafsa 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

Hi,

 

This is a very common issue when working with any type of from() instance.

 

The point is that when you click the button, all the elements are staggered from a specific set of values that you're passing in the config object. Then you close the menu and you call the same staggerFrom instance on the elements again, like you are opening the menu again and so forth with every single click of the button.

 

For repetitive toggling such menus and buttons, is always a good idea to store a reference in a variabla and play/reverse or manipulate that instance with a lot more ease.

 

Also, you don't have to set the default transform perspective on the click event, like that you're also setting that value on every click.

CSSPlugin.defaultTransformPerspective = 600;

var tl = new TimelineLite({paused:true, reversed:true});

tl
  .staggerFromTo('ul#menu li', 1.5,
    {rotationX:-90, transformOrigin:"50% 0%"},
    {rotationX:0, ease:Elastic.easeOut}, 0.4)

$(".menu-toggle").on('click', function() {
    
  $(this).toggleClass("on");
  $('.menu-section').toggleClass("on");
  $("nav ul").toggleClass('hidden');

  var logo = document.getElementById("logo");
  var logotitle = document.getElementById("logotitle");
  TweenLite.to([logo,logotitle], 0.5, {top:-50});

  if (logo.style.top == '-50px') {
    TweenLite.to([logo,logotitle], 0.5, {top:300});    
  }
  
  tl.reversed() ? tl.play() : tl.pause(0).reversed(true);
  
});

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

 

Finally you don't need to add TweenLite, TimelineLite and the CSS Plugin if you're already including TweenMax.js, that file contains all those tools as well as a lot of plugins:

 

Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin

  • Like 4
Link to comment
Share on other sites

Hi,

 

This is Javascript Ternary operator:

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

 

Basically takes an expression and evaluates it. If true the first part of the code is executed, that is before the colon, if false the second part is executed.

 

Normally to toggle a GSAP instance I use it like this:

var t = TweenLite.to(element, 1, {x:300, paused:true, reversed:true});

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

In this case I'm using a GSAP setter/getter called reversed(). Reversed either gets the reversed status of the instance and returns a boolean. So if the instance is reversed means that is going backwards or is static but after playing backwards. If the instance is going forward or is completed then reversed returns true.

 

Now considering that you're playing the animation forward but then you hide the elements immediately, there's no need to reverse the timeline, just pause it at the beginning and then since the animation wasn't actually reversed we use the method as a setter reversed(true), therefore:

tl.reversed() ? tl.play() : tl.pause(0).reversed(true);

Hopefully this makes things clearer.

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Question for you Rodrigo, I'm having trouble with the

meaning of reverse in the example

for

Tl.pause(0).reversed(true)

 

The pause here means moved playhead to 0 and pause it. Then set reversed equal to true which is the original state

It started...

 

Does reversed() mean that it should play In Reverse?

If so then if the Ani is paused and has reversed set to true, if it's asked to play while at it's starting point then that means it stays still, correct? It shouldn't play forward right?

 

 

Despite the command to play I guess I'm not seeing how the playhead moves the very first time... if reverse is set to true

I'm definitely missing something about the reverse property.

 

I found this thread with an explanation but It's a little confusing

https://greensock.com/forums/topic/9468-toggle-reverse-and-play/?hl=reversed#entry69838

Hi,

 

This is Javascript Ternary operator:

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

 

Basically takes an expression and evaluates it. If true the first part of the code is executed, that is before the colon, if false the second part is executed.

 

Normally to toggle a GSAP instance I use it like this:

 

var t = TweenLite.to(element, 1, {x:300, paused:true, reversed:true});t.reversed() ? t.play() : t.reverse();
In this case I'm using a GSAP setter/getter called reversed(). Reversed either gets the reversed status of the instance and returns a boolean. So if the instance is reversed means that is going backwards or is static but after playing backwards. If the instance is going forward or is completed then reversed returns true.

 

Now considering that you're playing the animation forward but then you hide the elements immediately, there's no need to reverse the timeline, just pause it at the beginning and then since the animation wasn't actually reversed we use the method as a setter reversed(true), therefore:

tl.reversed() ? tl.play() : tl.pause(0).reversed(true);
Hopefully this makes things clearer.
Link to comment
Share on other sites

I got it now

 

See the Pen RpNEYr?editors=0011 by dwayneaneckles (@dwayneaneckles) on CodePen

 

I think my confusion was because without reading the docs expected tl.reverse() to be like tl.play() but just play reverse.

I understand now, from reading the docs and experimenting

that it doesn't "play" the timeline, it just sets the mode or state of timeline, unless you add a number as a param

ugh

 

bold request gsap team, is it possible to change 

 

reverse() to setModeToReverse()

 

reversed() to IsModeReversed()

 

jk :-D I think I got it now.

 

Thanks everyone for having the answers in the threads....

Carl said it what it does in a separate thread and I used Blakes Codepen

for reference
https://greensock.com/forums/topic/15617-hover-animation-which-reverses-back-to-original-state-when-mouse-moves-away/

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