Animation series object rotate issue when second animation start time immediate of one

[rvdabhi]

 

We utilize TweenLite and TimelineMax for multiple object tweens, mostly all producing a "from" animation from outside a specific overflow box (to provide the feel of entrance animation)

We set our total timeline to run anywhere between the duration of 0s-10s, or 0s-20s and each of our tweens is anywhere within the range.  

For example: We play one of the tweens at 1250 MS which has a duration of .4s

The second tween can play anywheres with similar timings, but different animations sometimes as well. Our system has 35+ predefined from -> to animations defined using names like slideInLeft, slideInLeftRotate, swayInLeft, etc....

When we put a second tween at a very close timing, 1260 MS, with a duration of .79s, we see a timeline overlap conflict, which doesn't occur when animations play exactly the same time. 

It occurs when we have an animation that is currently in progress, and one begins during the transition effect (from) and while it still plays.

In the below codepen, it sort of occurs but in our version is stops rotating prematurely.
http://codepen.io/jbevan2007/pen/PpMvEG?editors=0011

We set the element initially to relative "-=360" and then we run the from animation which has rotation "+=360" to bring us back to the starting point.

This helps us in working through our animated objects which begin rotated with transform matrixes.

I have attached some screenshots, before and during our animation.

 

 

See the Pen PpMvEG?editors=0011 by jbevan2007 (@jbevan2007) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo. Unfortunately, I can't dig through 200 lines of code to try to figure it all out.

However this sounds like an overwrite situation where you have 2 tweens fighting for control of the same properties of the same object at the same time.

When this happens, the engine kills the older tween so the newer tween can run without conflict.

You can disable this feature by setting overwrite:"none" on the new tween

TweenLite.to(obj, 1, {x:100, overwrite:"none"});

To debug which tween is overwriting and which one is overwritten you can use TweenLite.onOverwrite: 

 

https://greensock.com/docs/#/HTML5/GSAP/TweenLite/onOverwrite/

 

I implemented the following code in your demo to help you debug further:

TweenLite.onOverwrite = function(overwrittenTween, overwritingTween, target, properties){  console.log("overwrite");
  console.log("overwrittenTween", overwrittenTween)
  console.log("overwrittenTween.target", overwrittenTween.target)
  console.log("overwritingTween startTime", overwritingTween.startTime())
}

http://codepen.io/GreenSock/pen/WjbJoa?editors=0011

[OSUblake]

You're adding a set and from tween at the same timeline position.

if(defaultSet)
{
  // timeline.set(layerElement, defaultSet);
  timeline.set(layerElement, defaultSet, 0);
}

See the Pen OmPEPd?editors=0010 by osublake (@osublake) on CodePen

.

[fastraxpos]

Hello,

 

I've instructed the member to post the above issue in this post.

 

I've confirmed that by using the suggestion in OSUblake's post was the actual fix. Our animation plays now, with no issue. I did keep the overwrite = "none" property in our object however however these tweens always affect different objects.

 

Tween A would update one of our layers to produce entrance effect. And Tween B updates another layer on the screen. (Each layer is a DOM element)

 

I'd be interested in displaying our implementation at some point, I know it's been mentioned in a few of my other posts. However it's a privately accessed piece of software for Digital Signage.

 

There are some quirks I would like to dish out, and the best way to figure these out would be to see the issues occurring naturally in our UI.

 

Again, thank you for your awesome support.