Overlapping tweens and repeat animation

[dev-kp]

Been struggling with this for a while now and can't seem to solve the issue.

 

My animation has a box comes in from right (outside the 'banner' container) then the next tween needs to overlap and slow down the animation.

.from(div1, {duration: 0.3, x: 300}, 'f1+=0.5')

.to(div1, {duration: 6, x: '-=40'}, '>-=0.5')

2 sec later the next tween pushed the box out to the left. The problem is that on repeat the slow tween doesn't play.

.to(div1, {duration: 0.3, x: -410, overwrite: 'auto'}, 'out1')

If I remove the overwrite: 'auto' then the slow tween keeps playing after the box goes off to the left.

 

Any suggestions?

 

 

 

The only way I found a way around this to add a .call function

See the Pen MWYJGEG by dev-pk (@dev-pk) on CodePen

See the Pen YzPNLKb?editors=1010 by dev-pk (@dev-pk) on CodePen

[ZachSaucier]

Hey dev-kp and welcome.

 

35 minutes ago, dev-kp said:

My animation has a box comes in from right (outside the 'banner' container) then the next tween needs to overlap and slow down the animation.

Why not use a single tween with a custom ease instead? Mixing two tweens affecting the same object and properties is quite messy.

 

If you are set on using two separate tweens, you should affect a container element for the box in one of them so that the properties aren't in conflict.

[GreenSock]

@dev-kp you created conflicting tweens where you're telling it to go to 3 different x positions at the same time. Plus you're using an incorrect syntax in the position parameter (">" and "-=" in the same one). 

 

If you want to get the effect of it coming in fast, then slowing down, then speeding up off the screen, that's the PERFECT case for the SlowMo ease. 

See the Pen 059d354e37c798ae48f500f98df0a546 by GreenSock (@GreenSock) on CodePen

 

Does that help?

[dev-kp]

Hey Jack!

 

 

Yes thats very helpful! I did think of using SlowMo at first but couldn't get the effect just how I wanted it. So split it up into 3 tweens.

 

Thanks for the help!