Jump to content
GreenSock

saracen

Change tween to one element

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 wonder if anyone can help me on this or if its even possible.
I have a bunch of images being loaded dynamically and I am applying a simple repeating and yoyo(ing) rotation animation on all of them with a simple

portText5.to($('.logos li'),2,{rotationY:"-30deg"})
                .to($('.logos li'),2,{rotationY:"30deg"});

What I cannot figure out is how to, or if its possible to stop this animation on just one of the list items if I hover over it. Is it possible?

Link to comment
Share on other sites

HI and welcome to the forums.

 

Instead if creating a timeline for all the elements create a timeline for each. There's an excellent example in this codepen of the Greensock collection:

 

See the Pen af138af51e5decd43c3c57e8d60d39a7 by GreenSock (@GreenSock) on CodePen

 

In your case you'll have to create your timeline active, ie, not paused and the over and out events would have to pause and resume the particular timeline, like this:

$(".logos li").each(function(index, element){
  var tl = new TimelineMax({repeat:-1, yoyo:true});//the timeline is active

  tl.to(element, 2, {rotationY:'-30deg'})
    .to(element, 2, {rotationY:'30deg'});

  element.animation = tl;
})
  
  
$("li").hover(over, out);

function over(){
  this.animation.pause();
}

function out(){
  this.animation.resume();
}

Like this when you hover an element just that timeline will pause and the others will keep going.

 

Hope this helps,

Cheers,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Thanks very much Rodrigo for the reply.

And that is exactly what I was looking for :)

 

However, when I implement this it pauses all the animations (i presume because they all have the same var name?)

 

I tried adding the index of the li to each var so they would each be seperate but Im not sure how to reference that in over state?

Link to comment
Share on other sites

Sorry ignore that.

Seems the problem was the code was using TimelineLite. I changed it to TimelineMax and its fine. Must be the yoyo :)

Link to comment
Share on other sites

Gald you figued it out and sorry I posted the wrong code, is corrected now.

 

Yoyo is one of the features included in TimelineMax but not on TimelineLite. Check the API reference in order to see what other goodies TimelineMax has:

 

http://api.greensock.com/js/com/greensock/TimelineMax.html

 

Cheers,

Rodrigo.

Link to comment
Share on other sites

Thank you again for the help. Invaluable!

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