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

[Zuriel]

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;
		app.utils.imgpreload({
			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});
			this.tl.play();
		}
		if (e.type == 'mouseleave') {
			this.tl.reverse();
			// app.utils.TweenMaxTo(target,.5, {opacity:1});
		}
	},
	exit: function () {
		app.utils.standardExit(this);
	}

});

 

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 February 7, 2013 by Zuriel

[Carl]

Hi,

 

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});
            this.tl.play();
            
//new
console.log(this.tl.duration());
        }
 

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(){
  this.animation.play();
}


function out(){
  this.animation.reverse();
}
 

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