Greensock vs Timeline animations

[Presuming Ed]

Hi all

 

I'm a newby to Animate CC using HTML Canvas, although I used to use Greensock tweens about 7 years ago using AS2 back in the days of Flash, and reluctantly abandoned ship when all the 'anti flash' propaganda started appearing.

 

Anyway, I'm back on the saddle with animation once again.

 

Previously, I used to use Greensock to create interactive graphs/flash websites and that type of thing. Now I'm concentrating on longer animations/infographics and originally my plan was to focus on timeline based stuff.

 

However, I was always really pleased with results previously using Tweenlite etc and wanted to ask people if it is feasable to use something like TimelineMax/TweenMax for longer (3-4 minute) animations, or are these products not really suited to this type of project?

 

From what I recall, previously, all movieclips used to have to be placed on the stage at the beginning of the animation before I could Tween anything. So how would this work for longer animations? If, say I wanted graphics to appear later on in the animation? Is it a case of stringing many TimelineMax delays targeting individual movie clips or does this sound like a bad idea?

 

Any answers would be greatly appreciated, thanks in advance

[Carl]

Hi and welcome to the GreenSock forums,

 

Yup, I'm familiar with the Flash workflow of just slapping a bunch of symbols on frame 1 and writing elaborate code to move them all around... or dynamically pulling them from the library when needed.

 

I haven't done enough work with Animate CC to really know why, when, or where you would see any performance impact of using really long animations. I'm doubtful it would be a problem. For animations that run a few minutes I think doing them via code will ultimately give you more flexibility and speed during development then setting up classic tweens in Animate. For tips on good coding practices for long animations check out:  https://css-tricks.com/writing-smarter-animation-code/ Although the examples don't use canvas, the same techniques for creating functions that return timelines still apply.

[Presuming Ed]

Hey Carl

 

Many thanks for your response it kind of all make sense!

 

Because I'm a designer, it's always easier for me to do things visually, hence why I previously use timelines in animate CC. I'm not a coder whatsoever!

 

When I used Tweenlite previously on AS2 it was mainly a case of copying code and changing values, I understood some of it, but not so much. To do complete animations using code looks incredibly intimidating!!

 

Anyway, I think it's the terminology I struggle with when you talk about 'calling functions' for example etc. Do you think I need more of a basic knowledge of javascript before I can use greensock more productively? I kind of understand the idea on the example, where the coder created all the tweens at first and then put them together in timelineMax at the end to create a final timeline.

 

I suppose it's the syntax I struggle with; what things are available, that type of thing.

 

How would you recommend learning? Playing with various greensock lines of code and seeing what happens, or do you think I need to start reading up on the basics of Javascript first?