Start timeline for mouseover-element

[rob83]

Hello,

 

I would like to start and reverse a timeline animation for the element that I'm hovering with the mouse. Then on mouseleave I would like to reverse this animation.

I know I could create a timeline for each possible element. However is it also possible to tell the timeline which element should be effected with the animation by passing the element ID to the timeline?

 

Something like this:

<div id="navipoint-board">
    <div class="navipoints"><a href="/control/category/~category_id=MANGO"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_mango.png" id="mango"></a></div>
    <div class="navipoints"><a href="/control/category/~category_id=ROTEFRUECHTE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_rotefruechte.png" id="rotefruechte"></a></div>
    <div class="navipoints"><a href="/control/category/~category_id=ERDBEERE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_erdbeere.png" id="erdbeere"></a></div>
    <div class="navipoints"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/active_vanille.png" id="vanille"></div>
    <div class="navipoints"><a href="/control/category/~category_id=HAFER"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_hafer.png" id="hafer"></a></div>
    <div class="navipoints"><a href="/control/category/~category_id=OLIVE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_olive.png" id="olive"></a></div>
    <div class="navipoints"><a href="/control/category/~category_id=PFIRSICH"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_pfirsich.png" id="pfirsich"></a></div>
    <div class="navipoints"><a href="/control/category/~category_id=KOKOS"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_kokos.png" id="kokos"></a></div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    TweenMax.to($('.navipoints a img'), 0, {rotation:"20"});
    var tlRotation = new TimelineMax({paused:true});
    tlRotation.to("Mouseover-Element", 0.5, {rotation:"0"});
    
    $('.navipoints a img').mouseenter(function() {tlRotation.play(this);});
    $('.navipoints a img').mouseleave(function() {tlRotation.reverse(this);});
});
</script>

Thank you very much,

Robert

 

 

 

 

[Carl]

Hi and welcome to the GreenSock forums.

 

Yes, you could create a function that generates a timeline "on the fly" on the initial mouseover of the element like this:

 

 

//this function returns an animation using the element that you pass in
function animateOver(element) {
  console.log(element);
  var tl = new TimelineLite();
  tl.to(element, 0.5, {width:200})
  return tl;
}
 
 
$("li").hover(over, out);
 
function over(){
  //check if this item has an animation
  if(!this.animation){
    //if not, create one
    this.animation = animateOver(this);
  }else{
    //or else play it
   this.animation.play().timeScale(1);
  }
}
 
function out(){
  //reverse animation 4 times normal speed
 this.animation.reverse().timeScale(4);
}

 

 

live demo:

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

[rob83]

Works great.

 

Thank you very much, Carl!