Jump to content


Timeline using mouse events to fire play() and reverse()

Moderator Tag

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

So I have a timeline that animates when I mouse over an image.  When I leave the image with a mouseleave event I fire off the reverse() and it works beautifully...  for 1 image...  but if i have multiple images on the page it still fires off the first image i hover over.  Here is my code.  I am building my app in backbone.js this all works if i just stick with tweenlite or max but I really wanted to move beyond just simple image opacity changes and take advantage of timeline lite.

app.newsroomPageElementView = Backbone.View.extend({

	tl: new TimelineLite({paused:true}),
	events: {
		'mouseenter .featured-image': 'imageHover',
		'mouseleave .featured-image': 'imageHover'


	initialize: function () {
		var that = this;
			el: this.$el.find('img')

	imageHover: function (e) {
		var target = e.currentTarget;
		if (e.type == 'mouseenter') {
			this.tl.add( TweenLite.to(target, 1, {scale:.8}) );
			this.tl.add( TweenLite.to(target, 1, {opacity:0}) );
			// app.utils.TweenMaxTo(target,.5, {opacity:.7});
		if (e.type == 'mouseleave') {
			// app.utils.TweenMaxTo(target,.5, {opacity:1});
	exit: function () {



I think I understand "why" its not working, but i just don't know if there is a way to have a timeline that uses a dynamic object as the animated object.  maybe I am too close to it and i can't see it :)

Edited by Zuriel
Link to comment
Share on other sites



I'm not familiar with backbone but from what I understand of your file you have 1 timeline that is handling the animation for multiple image elements. Each time you mouseenter an element you are adding a new tween to the end of same timeline. So if you mouseenter 5 different elements real quick, you are going to be adding 5 tweens to the timeline that will play 1 right after the next.


in the process of mouseleaving each element that timeline is also going to reverse and then play forward as you mouseenter another imgage. 


The bottom line is that if you mouseenter 5 images or even the same image 5 times, your timeline is going to be 10 seconds long (2 1-second tweens for each mouseenter). When you mouse leave the last item, that whole timeline is going to reverse back to the beginning. 


as a simple test edit your code to be like this:




if (e.type == 'mouseenter') {
            this.tl.add( TweenLite.to(target, 1, {scale:.8}) );
            this.tl.add( TweenLite.to(target, 1, {opacity:0}) );
            // app.utils.TweenMaxTo(target,.5, {opacity:.7});

You'll notice that the duration() of the timeline keeps getting bigger and bigger.


The reason using TweenMax worked is because you were creating new tweens for each mouse event.


Since you want each mouseenter to trigger a multi-step animation AND you want to be able to reverse that animation from exactly where it is on mouseleave, I suggest that each img has its own timeline that it controls.


Here is a basic jQuery implementation applied to <li>:




$("li").each(function(index, element){
  var tl = new TimelineLite({paused:true});
  tl.to(element, 0.2, {width:120, padding:20})
    .to(element, 0.2, {backgroundColor:"#004", color:"orange"}, "-=0.1")
  element.animation = tl;
$("li").hover(over, out);

function over(){

function out(){

Let me know if this helps clear things up.

Thanks for trying GSAP, have fun with it. 

codepen here: 

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

  • Like 1
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.