Jump to content

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

Start timeline for mouseover-element

Recommended Posts



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>

<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);});

Thank you very much,






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) {
  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 not, create one
    this.animation = animateOver(this);
    //or else play it
function out(){
  //reverse animation 4 times normal speed


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.