Change tween to one element

[saracen]

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?

[Rodrigo]

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.

[saracen]

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?

[saracen]

Sorry ignore that.

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

[Rodrigo]

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.

[saracen]

Thank you again for the help. Invaluable!