Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rob83

Start timeline for mouseover-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

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

 

 

 

 

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Works great.

 

Thank you very much, Carl!

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