Jump to content
Search Community

Dynamic Doubleclick: objects revert after "from" tween?

amplitrix test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

The best information you can provide is a reduced test case that clearly illustrates the issue.

I understand your ads have a lot of logic and are data-driven, but it should still be possible to reduce them down to something that replicates the loading of your data. Instead of loading actual data, use a setTimeout or delayedCall() to do whatever happens after your data loads. And we wouldn't need to see a bunch of conditional logic or anything, just use one of the conditions that is prone to show the error. 

 

I'm doubtful this issue is related to something on the DoubleClick servers, so I would suggest creating a CodePen demo for us to look at. 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

I'm not aware of properties reverting to their "pre-tweened" state under any circumstance but I'm curious if you are waiting for all your data to be loaded and DOM-manipulation to complete before creating your tweens. You mentioned 

 

tweened elements revert after tweening back to their pre-tween state

 

but I don't see how you are creating your tweens or tweening them back to their pre-tween state.

  • Like 1
Link to comment
Share on other sites

  • Solution

Make sure you are properly breaking out of your switch. It's easy to overlook, especially if you are doing a fall through.

 

Maybe one of your functions is getting called more than once. Have you tried preventing that or keeping track of how many times something was called? Maybe something like this...

var playing = false;
var playCount = 0;
var initCount = 0;
var graphicsCount = 0;

function init(){
  initCount++;

  graphicsAnimation();

  if (!mainTLready) {
    // build mainTL
  }

  mainTLready = true;
  playBanner();
}

function graphicsAnimation(){
  graphicsCount++;

  if (!animationTLready) {
    // build animationTL
  }

  animationTLready = true;
  playBanner(); // Is this one needed?
}

function playBanner(){
  playCount++;
  console.log("Init: %s Graphics: %s Play: %s", initCount, graphicsCount, playCount);

  if(!playing && mainTLready && animationTLready){
    playing = true;
    document.getElementById('content').style.visibility = "visible";
    mainTL.play();
    animationTL.play();
  }	
}
Link to comment
Share on other sites

I'll echo what OSUBlake has said about having a function called more than once. It could be a combination of your assets not being loaded on time before the animation starts and/or being re-set as you're playing them. You might want to have your timeline paused (if it isn't already) and not instantiated until all data from the feed has finished downloading.

 

One gotcha is always the .set method. It is a zero second tween and if you start a timeline with it, without having a tiny-winny delay on it (0.01, or the like), it might produce undesired behaviour.

 

We are all shooting in the dark here, as GreenSock said, the best way is to have something we can look at that replicates the behaviour.

Link to comment
Share on other sites

Thank you so much for responding! I know I only provided a really vague description, but it's kind of a beast and I'm not sure the issues would even trigger if it was stripped down further. I was mostly wondering if the behavior sounded familiar to anyone.

 

I stuck some console logs in there, and it seems that a function WAS being called twice, but only when the assets happened to load in a peculiar way, I suppose. With dynamic images, that's bound to happen. Simply adding some "if(!animationTLready){}"etc to the places where the timelines are built seems like it will do the trick!

 

Thanks again for the help & insight!

Link to comment
Share on other sites

Have you looked into using promises? That might help sort out some of the unexpected behavior when loading stuff.

 

Yep, that's how I'm handling the image loading. I'm still not sure what's triggering a certain function twice (inconsistently) but at least I can circumvent it.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...