soupking

TweenMax vs. TimelineMax in Ads - which is better?

Recommended Posts

Okay, so I've worked in banners, rich media, and now at some length responsive media since Macromedia Flash was purchased by Adobe. For me, Greensock has been here the whole way through providing animators/developers with what used to be called a one-frame animation, and now hand-coded, option for animating stage elements for online media.

 

I work predominantly in online advertising which involves a plethora of smaller and at times potentially robust content for shorter brief life cycles or lengths of time. I've looked and modified a number of other coders work involving online ads and they vary quite a bit.

 

Some use greensock, some don't

Some use spritesheets, some don't

Some use precompiled code, most don't these days (as at 200k it's a little overkill)

 

With regards to GSAP I'm finding most developers use TimelineMax. Now...I don't entirely understand it. In fact when I receive another coders work and find they used nested timelines that for whatever reason don't behave well when the client asks if I can "loop it", it becomes a giant headache of having to re-stitch and refresh multi-layered and negative "-=" values (that are rather nebulous to quantify) dozens of times with elements hiding somewhere within or around a 300x250 pixel window. 

 

If this coder just used TweenMax and coded this same animation in 20 lines of code...Boom! Easy to read, easy to write. 

 

There's typically like 8 elements within any given ad. Why all the nested functions and sophistication guys/gals? 

 

Are there major advantages to Timeline that I'm missing? I keep finding myself learning and forgetting the use of this form of development. Granted, I'm more of a software guy and think coding for the sake of coding redundant and just plain unnecessary. The idea of bundling 20 lines of code just seems like more work. Like, I dig organization too, but...in terms of language and page translation, all TimelineMax has really introduced to me from other developers is more ropes to tie-untie. 

 

Granted, I understand the use of timeline in a way of more-a-less "arraying" elements (for lack of better wording)  into one cohesive timeframe. But when deadlines are riding hot, and this ad that's breathing down my neck is only going to be around for 30 days or so. Why use timeline and not just fire 10-20 lines of plain ol' TweenMax? 

 

Is TweenMax just a primitive way of coding all together? Online media doesn't get much smaller or shorter lived than ads. 

 

I'm wrestling with my own development and trying to determine if I should really embark on embracing this TimelineMax thing once and for all or if it really is just preference. I did all I could to finally learn AS3 and that was a huge unnecessary use of time. Most of the work I come across could just as easily animated without loading timelines into other timelines. Know what I mean?

 

Maybe I'm just a simpleton (a new design pattern, har har), but I just don't fully understand the emphasis for using TimelineMax and was wondering what other people's experiences were.

 

Thanks for reading! :D

 

 

 

 

 

Share this post


Link to post
Share on other sites

Hey SoupKing,

 

I have a background on the ad industry and have worked on it for several years, not anymore, though so, take what I say with a pinch of salt.

 

When I first read your post I took it as if you had confused the GSAP flavours and had them backwards but on re-reading, you seem to be saying that you can create the same animation from a complex timeline with less code than if using a timeline.

 

Call me skeptic but I cannot imagine a situation. Yes, there are cases where a timeline is overkill, I have seen those. But, if we are talking about a 15 or 30 seconds ad, they they to have a few elements that have to wait until others are done with their show to come into place.

 

The only thing that comes to mind when mulling over your comment is that either whoever created the examples you are talking about did a really, and I do mean REALLY, bad job. Or your brain is wired in a very different way (in no way it being wrong, just different).

 

Do you think you can share an example where the timeline was too convoluted and a bunch of delayed tweens was a better option?

 

I personaly was in the complete oposite to you. I would get ads created using only TweenMax and suddenly I would be asked to make one or another item move faster/slower... Boom, there would go my afternoon having to work out all delays for all the following delayed tweens for all of those units.

 

I also can't see why you would have to change all the relative positioning ("-=") of the elements in a timeline because the client asked you to "loop it". If anything, using TimelineMax would be simply adding "repeat:2" to the Timeline's constructor (Or however many times the animation was to repeat).

 

You got me curious to figure out how you would set your ads. Can you build a simple example? Then, I'd make recreate it myself and we could discuss the merits of each approach. Not in the sense of "let's see who does it better" but in a sense of "here's how I do it, let's get the best of both approaches".

 

Ps: To me, the timeline is a way to group and sequence related tweens.

  • Like 3

Share this post


Link to post
Share on other sites

My absolute takeaway from this was that TweenMax and TimelineMax are swapped in @soupking post 😕

 

I can’t for the life me see how tweening separate elements with relative timings is easier with Tweens than Timelines. I mean, that’s exactly the use case for Timelines ... sequencing.

 

 

  • Like 1

Share this post


Link to post
Share on other sites
35 minutes ago, Dipscom said:

I also can't see why you would have to change all the relative positioning ("-=") of the elements in a timeline because the client asked you to "loop it". If anything, using TimelineMax would be simply adding "repeat:2" to the Timeline's constructor (Or however many times the animation was to repeat).

 

You got me curious to figure out how you would set your ads. Can you build a simple example? Then, I'd make recreate it myself and we could discuss the merits of each approach. Not in the sense of "let's see who does it better" but in a sense of "here's how I do it, let's get the best of both approaches".

 

Ps: To me, the timeline is a way to group and sequence related tweens.

 

Hi Dipscom,

 

Sorry, I kind of lumped two separate instances in one situation. Didn't intend to do that. The coding I was working on had (from what I gather online) syntax that wasn't the best.

 

You should in essence be able to just add repeat inline at the initiating command, but alas it didn't work. Soooo I had to tinker. As it turns out just out of pure luck I landed on a greensock thread where Jack was explaining that in nesting timelines you shouldn't put function() when nesting a timeline:

 

t1.add( function(){ timeline(); }, "-=0.25"); 

 

That you should instead do:

 

t1.add( timeline(), "-=0.25"); 

 

I removed the function() part and added return t1 to all the functions. THAT fixed it but now the whole timeline went really slow sequentially and I had to re-stitch the whole thing to sync back up again. Furthermore the nested timelines (for whatever reason) has all these -= pre-zero timeline starting points against other delays in the actual main timeline. So 50-60 refreshes later guessing where the heck everything is  starting and stopping I'm finally back to where I needed to be...with a loop.

 

So I'm just like...Seriously, guy? If I used TweenMax I could see all the delays on the right-hand side and have no question of delay.

 

Granted, one can get themselves into more trouble with timeline vs. tweenmax and editing somebody else's work, no matter the syntax etiquette, would suggest that TimelineMax is simply more powerful and thusly one can naturally get into more trouble. 

 

Even if it's a bit Kerouac scroll using TweenMax with maybe some dividing comment lines this would have been a lot easier to edit.

 

I don't mean to single this person's coding out. It's just that I run into this sort of thing in varying degree when having to edit 3rd party coders last minute. If it weren't for Jack's response in that blog I'm not sure I could've fixed it. I was lucky, otherwise I would've had to re-animate the whole thing cuz I'm just not that timeline savvy.

 

I don't actually have a way of setting ads yet as I mostly work in Animate these days. The company I'm working for is interested in templating their inventory as they've taken on a lot more ads. So naturally with templating I'm headed to a hand-coded approach. When hand coding I've mostly worked from previous campaign pages and just re-edit them to suit. My first was using SCSS and vector data which was NUTS, but have since then simplified things. 

 

Since I'm having to adhere to a 'way' or main approach of coding now because of that company change, I guess that's why I'm asking about advantages vs. shortcomings. 

 

 

 

 

Share this post


Link to post
Share on other sites
Quote

So I'm just like...Seriously, guy? If I used TweenMax I could see all the delays on the right-hand side and have no question of delay.

 

This sounds good on the surface, but with Tweens all of those delays are absolute (relative to zero). Depending on the number of tweens, that could spell trouble if an early Tween's timing or positioning (i.e. delay) needs to change. For example, let's say every Tween in this series needs to begin .25s before the previous Tween ends.

 

TweenMax.to( '#something-1' , 1 , {x: 100} , 0);
TweenMax.to( '#something-2' , 1 , {x: 100} , .75);   // prev delay + prev duration -.25
TweenMax.to( '#something-3' , 1 , {x: 100} , 1.5);   // prev delay + prev duration -.25
TweenMax.to( '#something-4' , 2 , {x: 100} , 2.25);  // prev delay + prev duration -.25
TweenMax.to( '#something-5' , 3 , {x: 100} , 4);     // prev delay + prev duration -.25

 

Now change the timing of the second Tween to 2.3 seconds (ugh ... yes simple math, but not fun)

 

Instead take

 

var tl = new TimelineMax();

tl.to( '#something-1' , 1 , {x: 100} , 0)
  .to( '#something-2' , 1 , {x: 100} , "-=.25")
  .to( '#something-3' , 1 , {x: 100} , "-=.25"
  .to( '#something-4' , 2 , {x: 100} , "-=.25")
  .to( '#something-5' , 3 , {x: 100} , "-=.25");

 

Now change the timing of the second Tween to 2.3 seconds

 

var tl = new TimelineMax();

tl.to( '#something-1' , 1 , {x: 100} , 0)
  .to( '#something-2' , 2.3 , {x: 100} , "-=.25")
  .to( '#something-3' , 1 , {x: 100} , "-=.25"
  .to( '#something-4' , 2 , {x: 100} , "-=.25")
  .to( '#something-5' , 3 , {x: 100} , "-=.25");

 

That's it, nothing else changes.

  • Like 1

Share this post


Link to post
Share on other sites

Good question, @soupking. I'm actually quite shocked to hear about your experience. Timelines should absolutely make banner workflow WAY easier. I wonder if maybe you're just not quite understanding how they work or something. Like @Dipscom said, timelines are simply containers for your tweens. 

 

I chatted years back with a guy who was making CRAZY amounts of banners for an equally insane amount of money. And he didn't even know there was such a thing as TimelineLite or TimelineMax. He was doing everything with straight-up tweens which is okay, but once you grasp how timelines work it becomes quite clear that they'll solve quite a few challenges and smooth out workflow. Once I introduced him, he was hooked. He just never realized what they could do or how they could benefit his workflow. Perhaps you're in a similar boat. 

 

Have you read this article? https://css-tricks.com/writing-smarter-animation-code/

 

That one article could change your whole outlook. Seriously. Give it a very focused read and hopefully it'll all make sense. Let us know if that resolves things or if you still have some challenges where you think plain tweens are better. I literally can't imagine a scenario that'd be better with plain tweens if there is any amount of sequencing that you're trying to do. Zero. The article explains it all. I'm curious to hear back from you.

Share this post


Link to post
Share on other sites
4 hours ago, Shaun Gorneau said:

 

This sounds good on the surface, but with Tweens all of those delays are absolute (relative to zero). Depending on the number of tweens, that could spell trouble if an early Tween's timing or positioning (i.e. delay) needs to change. For example, let's say every Tween in this series needs to begin .25s before the previous Tween ends.

 


TweenMax.to( '#something-1' , 1 , {x: 100} , 0);
TweenMax.to( '#something-2' , 1 , {x: 100} , .75);   // prev delay + prev duration -.25
TweenMax.to( '#something-3' , 1 , {x: 100} , 1.5);   // prev delay + prev duration -.25
TweenMax.to( '#something-4' , 2 , {x: 100} , 2.25);  // prev delay + prev duration -.25
TweenMax.to( '#something-5' , 3 , {x: 100} , 4);     // prev delay + prev duration -.25

 

Now change the timing of the second Tween to 2.3 seconds (ugh ... yes simple math, but not fun)

 

Instead take

 


var tl = new TimelineMax();

tl.to( '#something-1' , 1 , {x: 100} , 0)
  .to( '#something-2' , 1 , {x: 100} , "-=.25")
  .to( '#something-3' , 1 , {x: 100} , "-=.25"
  .to( '#something-4' , 2 , {x: 100} , "-=.25")
  .to( '#something-5' , 3 , {x: 100} , "-=.25");

 

Now change the timing of the second Tween to 2.3 seconds

 


var tl = new TimelineMax();

tl.to( '#something-1' , 1 , {x: 100} , 0)
  .to( '#something-2' , 2.3 , {x: 100} , "-=.25")
  .to( '#something-3' , 1 , {x: 100} , "-=.25"
  .to( '#something-4' , 2 , {x: 100} , "-=.25")
  .to( '#something-5' , 3 , {x: 100} , "-=.25");

 

That's it, nothing else changes.

 

Now THAT makes a ton of sense. I see your point. I'm glad I asked as I wasn't familiar with Timeline and that it was capable of eliminating arbitrary 'magic' values. That definitely makes me want to use Timeline if I'm templating. I'd then take things a step further if possible and then make var quick =  "-=.25"; if possible somehow then make a few for slower times for header declare options.

 

My conflict with Timeline remaining still is understanding other people's nested timelines. That always makes me stumble but I'm guessing reading that sort of thing becomes more legible with time.

 

Thanks for clarifying the reasoning. I didn't know that's what I was looking for but that's one aspect that sure explains the methodology as to why one would 'structure up' for standard banners and not just keep coding raw. 

 

 

 

 

 

  • Like 1

Share this post


Link to post
Share on other sites
3 hours ago, GreenSock said:

Good question, @soupking. I'm actually quite shocked to hear about your experience. Timelines should absolutely make banner workflow WAY easier. I wonder if maybe you're just not quite understanding how they work or something. Like @Dipscom said, timelines are simply containers for your tweens. 

 

I chatted years back with a guy who was making CRAZY amounts of banners for an equally insane amount of money. And he didn't even know there was such a thing as TimelineLite or TimelineMax. He was doing everything with straight-up tweens which is okay, but once you grasp how timelines work it becomes quite clear that they'll solve quite a few challenges and smooth out workflow. Once I introduced him, he was hooked. He just never realized what they could do or how they could benefit his workflow. Perhaps you're in a similar boat. 

 

Have you read this article? https://css-tricks.com/writing-smarter-animation-code/

 

That one article could change your whole outlook. Seriously. Give it a very focused read and hopefully it'll all make sense. Let us know if that resolves things or if you still have some challenges where you think plain tweens are better. I literally can't imagine a scenario that'd be better with plain tweens if there is any amount of sequencing that you're trying to do. Zero. The article explains it all. I'm curious to hear back from you.

 

I think a large part of my misunderstanding is just naive ignorance. I just figured there has to be some significant reason why people are putting themselves through this operational syntax of animating. I'm not getting it so I figured I'd just ask as with banners keeping things simple and stupid is kind of it's own form of methodology and survival. 

 

I fixed something with the same banner set later that night and I'm not sure what was wrong or what I did to fix it. But I'm glad it just worked and could pass QA. I think running into those late night scenarios keeps people like me primitive and liking it that way. Kind of the same way the dishwasher repairmen like the older models of dishwashers because there's less to mess with. That doesn't necessarily mean we should dodge electronics.

 

I have to work the remainder of the night but I will MOS DEF check out that article tomorrow sometime as it sounds like I need to upgrade my skills but still do it in a not an on-the-clock by-the-seat-of-my-pants fashion (which isn't always fun :). Thanks Jack!

 

 

 

 

Share this post


Link to post
Share on other sites
4 hours ago, soupking said:

I fixed something with the same banner set later that night and I'm not sure what was wrong or what I did to fix it.

 

Feel free to post in these forums when you run into stuff like that. We're here to help. I suspect that once you start understanding the mechanics of timelines, you'll see how much sense they make and it won't feel like "magic". ;)

 

And yeah, that article should make a pretty big difference. Let us know how it goes. Happy tweening!

Share this post


Link to post
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.