Inside timeline, set two tweens to run simultaneously when reverse() is called?

[georgeuser077]

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,

[Carl]

Hi and welcome to the GreenSock forums.

 

You can change the startTime() of the second tween like so

 

var tween2 = TweenLite.to("#blueBox", 1, {x:550});

 

tl.to("#redBox", 1, {x:550})
  .add(tween2)

$("#btn").on("click", function() {
  tween2.startTime(0)
  tl.reverse();
})

 

http://codepen.io/GreenSock/pen/ZGeNvz

 

I don't know all the requirements of your project but in most cases I would instead call a function that creates a new timeline with the tweens where they should be for each direction when needed. In the example I provided if you want to play forward again, you have to re-shift the second tween. Also things can get messy if you try to reverse while the timeline is still playing (which is why I hid the reverse button until the timeline is complete).

[georgeuser077]

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,

[Carl]

Ok. Please produce a CodePen demo of the behavior you want using CSS (feel free to fork the one I created). I'm not really familiar with CSS animations or how that delay would work on hover. I'm sure seeing the end result will help us come up with a solution.

[georgeuser077]

Thanks for the info, sure, I've uploaded

See the Pen aOWvxG by georgec (@georgec) on CodePen

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,

[Carl]

Thanks for the demos. The issue here is that you want one set of animation behavior playing forward and another playing in reverse. It just isn't the way timelines were designed.

 

In your CSS example you are technically creating 2 different animations that are being generated on the fly. I really think the best bet here is to take the same approach with JavaScript.

 

For something simple (2-3 elements animating) you can just create a few tweens on the fly for each hover state. For something more elaborate, there is nothing wrong with building new timelines on over / out.

 

here is a very simple example with tweens:

 

http://codepen.io/GreenSock/pen/JdNXvR

 

If you want to play and reverse the same timeline, another option may be to set timeScale(4) on the reverse so that it just plays faster.

 

 $figure.on('mouseenter', function(e){
                timeline.play().timeScale(1);
            })
        
            $figure.on('mouseleave', function(){
                timeline.reverse().timeScale(4)
            })