Greensock animations going funky when more than one on a page

[barrowman 5 Likes (Newbie)]

Hi

 

I have a very strange thing occurring that is happening in a live environment. I have created a couple of banners with greensock that play fine by themselves, but when there are more than a couple on a page and you scroll to them, it seems to mess them up, they get all funky in the way they load or run the animations.

 

Like I said, run individually they seem fine, but it's just when you scroll on an page to them, that for some reason they seem to start acting erratically.

 

In this instance it seems they have used the same ad three times, but you can see what happens by the time you scroll to the third, the animation speeds up etc. https://dl.dropboxusercontent.com/u/12920477/ck_205.mov

 

Anyone have any ideas or how to deal with this?

[Oliver16Years 207 Likes (Specialist)]

Is it contains one timeline or separate tweens started by setInterval?

[GreenSock 12,873 Likes (Superhero)]

That's super difficult to troubleshoot blind (well, with only a video). We'd have to see what's going on in the code. Obviously there's something else they're using outside of GSAP to trigger the animation, and I also wonder if perhaps the same IDs are being used on elements, or maybe the timelines are in the global scope and interfering with each other, etc. I cannot imagine a GSAP-related reason for the issue you described. If you still need help, please provide a reduced test case, ideally in a codepen or something. We'd love to help, but our hands are kinda tied at this point. 

[barrowman 5 Likes (Newbie)]

Thanks.

 

Here is the Adobe Animate files as well as the ZIP

 

It would seem that some calls are being made and it's causing all sorts of confusion somewhere,

 

 

970x250.fla

205 Brand_970x250_A_ENG_SHOP.zip

[GreenSock 12,873 Likes (Superhero)]

Sorry, I didn't mean the source files for just one ad. I should have been more clear. I meant that we need to see the issue happening in context. You said it runs fine on its own, right? So the source file won't help much. Can you recreated this somewhere with the absolute minimal amount of 3rd party code? We're happy to answer GSAP-specific questions, but it's tough to troubleshoot a live site with thousands of lines of code and 3rd party JS interfering, etc. - see what I mean? 

[barrowman 5 Likes (Newbie)]

Hi

 

Thanks.

 

It's not just when it's the same ad though, it kinda happens when there are multiple files as well. This isn't quite the same, but it does that funky weird animation on the banners if you scroll too fast or scroll back etc, whereas if you stop and reload on the relevant banner it will work as intended.

 

It's very weird, it's like when there are multiple requests to the code that it get's mixed up. I suppose if there's anyway to confine it somehow? I'm not sure at all.

 

http://ckj2017.businesscatalyst.com/index.html

[Oliver16Years 207 Likes (Specialist)]

I have peaked into Your code.

As I saw, there are a few TweenMax.to with delays but I am not sure what causing the problem. The best way if You make a timeline first and add the tweens to it with .dot chaining. 

Check out these tutorials:
https://greensock.com/get-started-js

https://greensock.com/sequence-video

https://greensock.com/GSAP-Animate-CC-2017
 

[Dipscom 3,140 Likes (Superhero)]

I haven't touched Adobe Animate CC in like, years... So, take all that I say with a shovelful of salt. All of this is based on my days with Flash.

 

You have code referring to elements whose keyframes do not exist at the same point in time as the code itself. Eg. Image01 is being told to move in frame 3.

 

I, personally, would have all the assets and the relevant code in the same frame and, as @Oliver16Years suggested, have a timeline controlling the timing and delays of it.

[barrowman 5 Likes (Newbie)]

Hi, there are numerous reasons for this. It's just a lot easier when you're dealing with multiple people working on it, to have a timeline that you can scrub through as not everyone can see things in the "matrix" of code.

It might be clunky and I agree that it would be better to create it all on one frame but it has actually been fine for quite some time, (but that might be because they haven't displayed multiple ads before, or no one noticed!)

[Dipscom 3,140 Likes (Superhero)]

Then, try to make sure there's a keyframe when you have code referencing the element - Again, this is from 'The Flash Days' and see if that helps.

 

To be honest, I don't see how it would be relevant as the end result is a HTML page with CSS and JS so, 'instance names' don't really exist but... Who knows.

[davi 119 Likes (Specialist)]

Now I haven't delved into this too deeply but it looks like the ads, which are out of view, are being throttled by the browser -- which is throwing everything off. I did check out your Animate CC file and looks like you're using a delay timer based on a createjs ticker event.

Rather than use that code for your delay, replace it with this instead  and let us know how it works out.

 

// "exportRoot" is the main timeline. This variable is 
// set in your HTML. Same as your "tl" variable. I just 
// added it so you don't need to worry about scope. I 
// added an anonymous function for playing the timeline, 
// but feel free to add to the callback if you want.
// Add this code to the first frame in your Actions layer.

exportRoot.pause = function(dur, mc){
	mc.stop();
	setTimeout(function(){ mc.play(); }, dur * 1000);
};

// Then, whenever you need to pause the timeline, 
// add this code to those other keyframes, replacing 
// all of that ticker-based code >
exportRoot.pause(3, this);

I just wanted to add in, your problem is likely occurring because you're using mostly code for animation, which is great, but then you're using the Animate CC timeline to advance frames and content within the FLA (not code-based). You're mixing code-based and Animate CC animation timeline-based animation. If it's getting throttled, your code versus the Animate CC timeline syncing will be off -- reason why some of those animations aren't doing what they're supposed to be doing. So if the code above doesn't work, trying getting rid of all of those other frames in the Animate CC timeline and have everything in one frame and then adjust your code accodingly.

Edited July 28, 2017 by davi
Added another possible solution