georgeuser077

Thanks for the info, sure, I've uploaded a pen of one of the CSS transition effects I'm trying to duplicate using Greensock. When you move the mouse over the image, notice that the panels slide in first, then the caption, while when you move the mouse out, all 3 components withdraw at the same time. Here is a snippet of my Greensock code that reproduces the above effect. It works just fine, except as mentioned I can't get the panels and the caption to animate/withdraw at the same time when the mouse moves out, instead of seqentually when the mouse rolls over it. In CSS3 this is easy to do, since transition-delay can be independantly added to either the :hover: or default state of an element to apply the delay only to that particular state, not both. Here is the snippet of relevant code I have that reproduces (almost) the CSS effect: var $veilA = $veils.eq(0) var $veilB = $veils.eq(1) TweenLite.set($veilA, {y:'-100%', visibility:'visible'}) TweenLite.set($veilB, {y:'100%', visibility:'visible'}) TweenLite.set($figcaption, {x:'-100%', y:'-50%', top:'50%', height:'auto', opacity:1}) // center caption vertically and set height to auto timeline.add( TweenLite.to($veilA, 1, {y:'-50%'}) ) timeline.add( TweenLite.to($veilB, 1, {y:'50%'}), "-=1" ) // animate 2nd veil at the same time as 1st veil above timeline.add( TweenLite.to($figcaption, 1, {x:'0%', zIndex:101})) $figure.on('mouseenter', function(e){ timeline.play() }) $figure.on('mouseleave', function(){ timeline.reverse() }) I think the bottom line is, I need a way to easily modify the default timeline play sequence of tweens when reverse() is called. Thanks,

Hi: Thanks for the response! The posted solution I guess wouldn't work as is for me then, since the animation may very well be interrupted midway while playing or reversing to go in the opposite direction by the user. Basically I'm trying to recreate a CSS3 transition based :hover effect using Greensock due to the wider browser support and flexibility. In CSS3, I can utilize transition-delay that's only applied to the mouseover state (selector:hover) or mouseout (default selector) to insert a conditional delay. In Greensock, is there any way to do the same by dynamically modifying the "position" parameter before playing() or reversing() a timeline? I know I could just define two separate tweens, one for the mouseover state, and the other, mouseout, but it's much more verbose and complicated to maintain, especially when it's just a single :hover effect I'm trying to recreate here. I very much prefer the current elegant set up of defining a single timeline animation that could be played and reversed easily by the user, if only I could also easily duplicate CSS3's transition-delay property. Thanks,

Hi: I currently have two tweens defined inside a timeline that plays one after the next sequentially as they should: var timeline = new TimelineLite({paused: true}) timeline.add( TweenLite.to($veil, 1, {y:'0%'}) ) timeline.add( TweenLite.to($figcaption, 1, {x:'0%', zIndex:101}) ) timeline.play() // plays two tweens one after the next My question is, when calling timeline.reverse(), is it possible to modify the behavior so the two tweens run simultaneously instead, similar to as if having set the "position" parameter inside the second tween to 0 dynamically? Thanks,