Jump to content
Search Community

Animation Strategies

ptd test
Moderator Tag

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

I know this is a pretty broad topic, but I'm trying to understand what options there are to sequence animations using GSAP.

 

I'm a coder, not an animator. And the animators that I know aren't coders. Historically, our process has been animators create something in Adobe AfterEffects as a "sample" which I then try to reproduce using JavaScript (that uses GSAP). Is there a better way?

 

Does everyone just sequence animations by piecing them together using animation-specific custom JavaScript? Or are there animator tools or plugins for tools that output something that ultimately uses GSAP?

 

I have recently been investigating Adobe Animate which can save out JavaScript that uses the EaselJS library. Is there anything similar for GSAP?

 

I have seen forum posts of people using Adobe Animate to create the "sprites" which are then used by custom JavaScript and GSAP. But that can still be a lot of work if the animation sequencing is complex. I just feel like I must be missing something.

 

So many of the GSAP samples look so amazing and I'm always impressed at how great they look and perform. I just haven't seen any good description of the whole process done to create them. I'd love to get some advice from you experts. Even if it is just to confirm that what we're doing is the best way.

 

 

 

  • Like 1
Link to comment
Share on other sites

Yes indeed, I think that most of the top web animators out there tend to code their animations rather than using a GUI (though not always, of course). I've heard from quite a few who tried various GUIs and they just feel hampered by them. They tell me that once they grasped GSAP and its API, they were much faster at cranking out animations than if they tried to do it all in a GUI. 

 

That being said, there are clearly sometimes when a GUI is better, like cartoons or something that requires character rigging or something. 

 

There are several tools that leverage GSAP under the hood, but none that I'd say rival the controls and refinement of After Effects or even Animate CC. 

 

One of the key things that'll help a lot (if/when you decide to go all-in with GSAP) is timelines and nesting them. You can modularize your code pretty easily into functions that spit back a TimelineLite or TimelineMax instance that you place into a master timeline. It makes tweaking and maintaining your complex animations much easier. 

 

I'm pretty biased, so I'll let others weigh in on their process. And again, I don't want this to come across like I'm against GUI tools - I think they're awesome and actually superior in several cases. But for a lot of what top-end web animators do on a day-to-day basis, hand-coding GSAP animations may be a better/faster route. I'd love to hear about your experience as you go. If there's anything we can do to make your life easier, we want to hear about it. 

  • Like 5
Link to comment
Share on other sites

Jack, thank you so much for responding. I'm honored. Understand that I'm a *huge* fan of GSAP and have been for many years. So, I'm pretty familiar with the API (and things like nesting timelines as you mentioned).

 

I just see so many animations where the sequencing is just so nicely done and feel like they would take a long time to "get right". I've just always wondered if there was a better way than what I've been doing. In my world, a designer comes up with the idea of how something should animate, but they don't have programming skills, so it's up to me to convert their ideas into code. And I've always been curious if that is what most people do - just code the animation by hand until they get it looking like the designer wants. Or whether there were "designer focused tools" (like Adobe Animate) that would generate GSAP code. I've looked on occasion, but just haven't found much.

 

Thanks again for the insight and if anyone else is reading this thread and would contribute their experience or describe their "best practice process", I'd certainly love to hear about it.

  • Like 1
Link to comment
Share on other sites

Ad agencies send me only a storyboard and a source .psd. My responsibility to close my eyes and see the animation and code it with GSAP.  They occassionally append text to storyboard frames to describe their vision more pecisely. 

There is no better and more flexible solution than scripting an anim with GSAP. If You get through the painful asset exporting/optimization and css positioning, You have the clear field to play with movements, alphas, masks, rotations, spawn particles... The timeline approach is not the way. It is seems easy at first glance, but You are doomed if You want to make size mutations, or the client coming out with a brand new modification idea. Ergo there is no reason to convert a timeline to GSAP. That is a rocky road, don't go that way.

The question is: How do You make all the pixel, vector, box, ( text ) assest from that .psd, and how do You make a raw HTML from them, ready to TweenMax it?

My answer was ( after trying out all the commercial tools ) to write my own IDE which is resides in Photoshop. It exports assets, writes and formats HTML and offers me a convenient tweenScript editor, and tons of more. It's a pre alpha and not released yet, but I have to say: I can concentrate on animation now, not on the dirty HTML business.

adFury.jpg
 

Opps, someone reserved adFury.io and the name as a trademark a few months ago. I have been pushing out ads with this signature since more than a year. I was slow :o anyway, I am sending this pic for him. :D

http://www.fractalartcontests.com/1999/entries-organic.htm

Edited by Oliver16Years
  • Like 3
Link to comment
Share on other sites

i know your pain...

some ways banner devs use are to export the all text as pngs cut around the word and put them on a sprite sheet.

another way is to export all text as pngs the same size as the banner, which may seem wasteful, but its easy to position everything at 0,0

make sure to run all pngs through tiny.png afterwards.

photoshop cc has an option to generate assets automatically, once you name the layer with a png or jpg. something like that does take the tediousness out of the job. and it makes it faster.. some places ive seen use live text with css but rarely as the web font is not as good looking as the original font.

 

I completely hear you about the lack of a gui. 

I've found that to be a bit of a gift... i can do resizes faster than in Flash.

But i see a sweet anim here and agree it would be hard to create with code. 

 

hope i answered your question

 

Ad agencies send me only a storyboard and a source .psd. My responsibility to close my eyes and see the animation and code it with GSAP.  They occassionally append text to storyboard frames to describe their vision more pecisely. 

There is no better and more flexible solution than scripting an anim with GSAP. If You get through the painful asset exporting/optimization and css positioning, You have the clear field to play with movements, alphas, masks, rotations, spawn particles... The timeline approach is not the way. It is seems easy at first glance, but You are doomed if You want to make size mutations, or the client coming out with a brand new modification idea. Ergo there is no reason to convert a timeline to GSAP. That is a rocky road, don't go that way.

The question is: How do You make all the pixel, vector, box, ( text ) assest from that .psd, and how do You make a raw HTML from them, ready to TweenMax it?

My answer was ( after trying out all the commercial tools ) to write my own IDE which is resides in Photoshop. It exports assets, writes and formats HTML and offers me a convenient tweenScript editor, and tons of more. It's a pre alpha and not released yet, but I have to say: I can concentrate on animation now, not on the dirty HTML business.

adFury.jpg


www.bannerhost.hu/test/adFury.jpg

Link to comment
Share on other sites

Hi ptd  :)

 

Welcome to the GreenSock forums.

 

You mentioned you weren’t an animator and I was curious if that was by choice or necessity? If you truly don’t have any animation experience, I’d recommend trying some basics just for fun. It can really help visualize things when you’re coding.

 

By your workflow description, I’m assuming you are working with a larger team. I think an After Effects preview from the animators would be a pretty good way to work. I spend half my time with After Effects so I definitely understand the desire to work with a GUI. In all honesty though, I think working that way with GSAP would be slower for me. That probably sounds strange, but if you can visualize what you’re shooting for with the animation (or have a preview), coding can quite often be faster than working visually. At least for me. YMMV 

 

I know I’ve had AE projects where I literally spent hours fussing with the graph editor for some animations to get them just right. I find I’m more decisive while coding and less inclined to fiddle with things as much.

 

I’d also wholeheartedly agree with Jack about nesting with GSAP. In addition to all the amazing Club plugins, that’s one if the strongest features in my opinion.

 

I don’t know if I’d declare any way of working as the ‘best’. I think your current workflow sounds pretty good and it seems like it's working for you. I guess changing any part of your process depends on whether or not you have specific goals.  Are you trying to get faster or is there something about the way you work that you don’t like? 

 

Others will probably jump in, but that’s my little 2 cents worth.

 

Happy tweening.

:)

  • Like 6
Link to comment
Share on other sites

@alwayzambitious, that "sweet animation" you referenced would probably be a LOT easier with one of the new easing tools just released: https://greensock.com/wiggle-bounce

 

:)

 

And yeah, @PointC is a great example of someone who is extremely familiar with After Effects workflows as well as GSAP. He did the promo videos on the home page and Club GreenSock page, and of course he does a lot of GSAP work. He's no hack ;)

 

Great input, folks. Keep it coming. 

  • Like 4
Link to comment
Share on other sites

@PointC I say I'm "not an animator" in the sense that is not what my degree is in nor is what I focus on as a hobby. I'm a software engineer with a focus on multimedia. Animation is just one small part of what my job calls for. So, I wanted to be certain that I was using GSAP in the best way possible. Again, I'm always amazed at what you and others have done and I wanted to make sure our overall strategy to use GSAP was in line with what experts like yourself are doing.

 

I hope others will continue to share, either confirming what others have said or describing new workflows. Thanks again for all your insight!

  • Like 3
Link to comment
Share on other sites

I do pretty much what Jack said. I only use a gui for really complicated stuff, like character rigging. 

http://esotericsoftware.com/spine-demos

 

For everything else, I code by hand. I almost always try to create my animations programmatically, and avoid hard coding values into them. This will make it much easier to tweak your animations. To quickly test out a bunch of different settings, I like to use a library like QuickSettings or Dat.GUI.

 

To give you an idea of how that works, check out this demo. Notice how changing a setting can dramatically change the animation behavior.

See the Pen vXZPxN?editors=0010 by osublake (@osublake) on CodePen

 

For ideas on sequencing, you should check out some of Chris Gannon's work on CodePen. If you look at his code, he creates most of his animations programmatically via some function call.

See the Pen public by chrisgannon (@chrisgannon) on CodePen

 

 

 

.

  • Like 7
Link to comment
Share on other sites

  • 9 months later...

I found myself asking the same thing as @ptd in recent months. Finally I found an Adobe After Effects script that converts an AE ease to Greensock custom ease, such as:

M0,86.4187C32.9957,86.4187,0,-1297.5813,91,-1297.5813C93,-1297.5813,96,-1297.5813,97,-1297.5813

 

https://github.com/SupportClass/ae-ease-to-gsap-customease

 

Hopefully this helps developers who work in tandem with interactive designers, where there's a handoff of interactive requirements/mockups.

 

 

 

  • Like 3
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...