Hi there, long-time lurker, first-time poster.
I have an obnoxiously complex set of dynamic banners (content pulled in through a feed) where there are dozens of different static elements that can be called depending on one of the variables passed into the feed. I'm using TimelineMax to animate them.
There are 2 timelines running simultaneously: one with foreground content, and a background animation. The elements being tweened on each timeline are mutually exclusive and the timing doesn't relate. They should both start on load and play independently.
The whole thing is MUCH more complex than this but I've simplified it down to the gist of the structure. Everything works perfectly ~8 times out of 10 while hosted on Doubleclick (Chrome, Firefox, Safari tested on Mac all similar results), and every time locally. It's just every once in a while the elements on the "animationTL" will suddenly revert back to opacity:0 after they've tweened in.
The whole "mainTLready" and "animationTLready" thing is also a workaround for a different issue I was encountering. If I just let each timeline play immediately, sometimes, when hooked up to the dynamic feed, it would hang up and nothing would animate at all. So this seems to correct that problem, but I couldn't replicate the issue on my end so I'm not 100% sure.
function init(){
graphicsAnimation();
//build mainTL: uses .to, .from, .staggerFrom, .add
mainTLready=true;
playBanner();
}
function graphicsAnimation(){
//build animationTL (inside switch statement cases): .set, .from only.
//Most of these animate x/y and opacity. ".set"s are declaring scale, top & left values.
animationTLready=true;
playBanner();
}
function playBanner(){
if(mainTLready&&animationTLready){
document.getElementById('content').style.visibility = "visible";
mainTL.play();
animationTL.play();
}
}
TL;DR "from" tweened elements revert after tweening back to their pre-tween state. Works locally, breaks ~20% of the time loaded on Doubleclick with text and images pulled from dynamic feed.
So um, any ideas? Let me know if you need more info.
Thank you!