Jump to content
Search Community

Stagger Timeline and reverse on event

Lasercode test
Moderator Tag

Go to solution Solved by Carl,

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,

I thought this is gonna be easy, but I dont get it working.

I got several <li> elements in a row that I put into an array called dots. And I got two hover areas (first and last list item). Those dots are initially being animated like this:
 

var dots = $('.lights li').not(':first').not(':last');
var dotsTL = new TimelineMax({ repeat:-1 });
dotsTL.add( TweenMax.staggerTo( dots, 0.3, {scale:0.1}, 0.05));
dotsTL.add( TweenMax.staggerTo( dots, 0.2, {scale:1}, 0.1));

Now on 'mouseenter' over a hover area, I'd like to reverse the timeline - but I want to let it run infinitely until the user rolls over the other hover area and then again reverse it (to normal so to say). But if I use 'reverse()' then I only get as many animation run-throughs as there are being played 'forwards' and then it stops.

It's kind of a Knight Rider K.I.T.T. animation that can be reversed on hovering over one of its head lights ;)

How can I achieve this?

Thanks a lot!

Link to comment
Share on other sites

It appears that you are creating conflicting tweens.

Your first staggerTo tells the dots to scale to 0.1 and then before those tweens are finished you are scheduling tweens to scale to 1.

When this conflict occurs the first tweens will be killed (thus never played again)

 

To prevent overwriting you can set overwrite:"none" on the second staggerTo, but depending on how the tweens overlap, the first tweens may continue playing after the second tweens finish.

 

For more detailed assistance please create a CodePen demo that we can see running.

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

  • Like 1
Link to comment
Share on other sites

Hi,

 

I agree with Carl with the fact that some of the instances created in the stagger methods could collide between them.

 

As for the infinite reverse issue, you could use reverse(-0) in an onReverseComplete callback, to reverse the instance from the end once the reverse has completed.

 

I created a very simple codepen:

 

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

 

Feel free to fork and adapt it to your scenario.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Hello Lazercode,

 

Is this what you wanted?

 

See the Pen rbxEk by jonathan (@jonathan) on CodePen


 

// reverse DOM collection
jQuery.fn.reverse = [].reverse;	

$('.two').on('mouseenter', function(e){
  // WHAT TO DO HERE?
  dotsTL = new TimelineMax({ repeat:-1 });
  dotsTL.add( TweenMax.staggerTo( dots.reverse(), 0.5, {scale:0.1}, 0.05));
  dotsTL.add( TweenMax.staggerTo( dots.reverse(), 0.2, {scale:1}, 0.05));  
});

:

I used the worlds smallest jQuery plugin called reverse() .. to reverse the DOM collection for staggerTo

 

Resource link: http://www.wrapcode.com/jquery/iterate-each-element-in-reverse-order-using-jquery/

 

This probably could have been done with one timeline and then using GSAP reverse(), but maybe some of the other Great GreenSockers here, have better solutions.

 

Does that help? :)

Link to comment
Share on other sites

Cool idea. Nice plugin. 

You just had one mistake in your script, because when you set dots.reverse() a second time in the same timeline, it naturally RE-flips the array. So with only one it did the trick, nearly! But then I need to flip it again. So: no flip on original animation, then flip at every animation..hmm...

Updated codepen here:

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

 

The mistake happens, when you roll out of a button and over the same button again. Brain -> knot.

Link to comment
Share on other sites

Hi,

 

The issue is that the reverse plugin changes the structure of the jQuery collection therefore you should check if the collections has been reversed or not and then apply reverse again.

 

An easier solution would be to create two different collections and clear the timeline on the mouseleave event(no need to kill and create the timeline over and over), like this:

jQuery.fn.reverse = [].reverse;	

var dots = $('.lights li'),
    dotsBack = $('.lights li').reverse(),
    dotsTL = new TimelineMax({ repeat:-1 });

$('.one').on('mouseenter', function(e){
  dotsTL.add( TweenMax.staggerTo( dots, 0.5, {scale:0.1}, 0.05));
  dotsTL.add( TweenMax.staggerTo( dots, 0.2, {scale:1}, 0.05));
});

$('.two').on('mouseenter', function(e){
  dotsTL.add( TweenMax.staggerTo( dotsBack, 0.5, {scale:0.1}, 0.05));
  dotsTL.add( TweenMax.staggerTo( dotsBack, 0.2, {scale:1}, 0.05));  
});


$('.one').on('mouseleave', function(e){
  dotsTL.seek(0).clear();
});
$('.two').on('mouseleave', function(e){
  dotsTL.seek(0).clear();
});
Link to comment
Share on other sites

Mhh... I got lost in translation in this one. This show was known as "El Auto Fantástico" here in Chile, translate that to "The Fantastic Car" or "The Awesome Car", never knew what the original title was. When you mentioned this:

 

It's kind of a Knight Rider K.I.T.T. animation that can be reversed on hovering over one of its head lights

 

I thought you were talking about one of the kazillion Batman-related stuff that's been popping out the last few years... :P

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