Jump to content

Codepen Notification

You didn't provide a codepen sample that illustrates the problem. It really helps us quickly identify problems. This isn't mandatory, but it will get you better/faster results. Would you like to add one?

Animation Scene Manager?

Started by Dave Stewart, Jun 20 2014 02:41 PM

6 replies to this topic
Dave Stewart

Post #1 by Dave Stewart , 20 June 2014 - 02:41 PM

Have just got a new client brief to build and animate a story-style site, very similar to this:

It's pretty clear this will need a significant amount of top-down organisation and control aside from the creative / pure animation side, namely:

  • asset management
  • interactivity
  • some kind of abstracted scene setup and animation control

 

I'm perfectly happy building all this myself, using the usual tools such as Flash Pro, GreenSock, EaselJS, jQuery plugins, Backbone/Angular/etc but is there anything out there at the moment that either:

  • solves the problem of managing scenes full of animation, or
  • provides a robust animation scene management platform to build on

I'm well-versed in animation and all kinds of JS frameworks, but before starting thought it prudent to ask how (or if) this particular cat may have been skinned before.

 

I would imagine the ultimate solution will be a mix of both workflow (Flash, JSON, spritesheets, etc) and technical (HTML, JS, JSON, Framework X/Y/Z) to set up and manage each scene in a way that abstracts-away brittle JavaScript coding practices.

 

Any input / experience welcome.

 

Cheers,
Dave


  • Back to top

Dave Stewart

Post #2 by Dave Stewart , 26 July 2014 - 02:28 PM

I thought I would post the results of my foray into a JS scene manager.

 

Here’s the final animation, which is entirely DOM based, which I’m pretty pleased with:

 

http://g4s.davestewa.../animation.html

 

It uses an HTML/JS framework I developed over the course of a few weeks (and I’ll probably work on some more) and the majority of the animation is of course handled by GSAP, along with animated GIFs, animated in Flash, but exported as PNGs then re-exported from PhotoShop (as it does a better job with colors).

I had planned to build a spritesheet plugin for TweenMax to export animations directly from Flash, but in the end I didn't get time to do all the character idling animations.

So, the framework consists of various HTML elements with JS logic, which do a pretty good job of mirroring entities in Flash, with some added optimizations around the "story" concept:

+ story
    + scene / location
        +- layer
        |  +- group
        +- sprite
            +- tween
            +- animation

The interesting files to look at in animation/assets/js/ (you can use the Chrome debugger Source panel to look at them / set breakpoints) are:

  • story.js - manages the adding of all scenes, and handles overall playback, events, etc
  • scene.js - manages / animates elements within an HTML "scene" or "location" (a global type of scene) element
  • main.js - the main file that sets up ALL the animation with setup / animation functions that are injected into the main Story and Scene classes
  • application.js & layout.js - top level logic and layout classes, independent of any story-specific setup or animation

Scenes are the core JS classes that manage assets and animations, with Locations providing a slightly more specialized version, which serve as a base for "scene" animation to be layered over the top. That allows multiple "scene" animations to use a single "location", in the same was that a physical set in a theater can have multiple scenes. The hiding and showing of elements within each scene is managed by the framework as each Scene's animation is reached in the timeline. 

 

 

I created various helper functions such as sprite() and tween() to do the leg-work of building HTML and setting attributes, with some more specialized functions such as van() to set up complex sprites with animation, like this van example.

function van()
{
    var van         = sprite('van', '/animation/assets/images/objects/van.png', 330, 129);
    var wheel1      = $(sprite('vanWheel1', '/animation/assets/images/objects/van-wheel.png', 46, 46)).css({left:37, top:83}).appendTo(van);
    var wheel2      = $(sprite('vanWheel2', '/animation/assets/images/objects/van-wheel.png', 46, 46)).css({left:252, top:83}).appendTo(van);
    return van;
}

 

That meant a van could easily be added to the scene with a line of code like this:

this.add('fg', van(), 200, 300); // scene.add(layer, element, x, y)

All setup and animation is dependency-injected from the main.js file, with all elements being referenced inside an elements hash from their HTML name attribute, as they are injected:

hPGzvbV.png


 

As the functions above are injected into an owning Scene instance, the this above refers to the actual Scene, and not the window object:

this          // the Scene instance
this.parent   // the Scene's location
this.elements // a hash of named HTML elements within the scene
this.tl       // the TimelineMax instance
this.name     // the name of the scene

The hierarchical nature of the framework also means you can reference any element and its animation from anywhere in the app:

CahAJN3.png

For example:

App.story.locations.office.elements.background
App.story.scenes[4].parent.elements.background
App.story.scenes[4].elements.person
App.story.scenes[4].tl

You can also see the injected setup() and animate() functions, and back-references to story and parent (usually a Location, though Scenes can also be nested inside other Scenes).

 

TimelineMax manages all the animation at a global level, so the entire animation can be scrubbed or navigated around in the browser using a GSAP Controller widget I developed for this purpose:

uSTMtYy.png

Animating this way felt very similar to code-only development in something like FlashDevelop, using both Photshop and Flash to wrangle assets.

I’m interested to know if anyone has any input on this so far, or how I could have done this differently, perhaps by animating in Flash, and exporting using some of the new HTML5 capability (I've posted this in the Flash CC Prerelease forum as well, so I hope to get some feedback there too)

If this turns out to be a good way to work, I’ll likely do some more work on the framework, for example allowing elements to be declared directly in the HTML, and will open source it.

Cheers,
Dave 


  • Back to top

Carl
  • Carl
  • 5,490 Likes (Superhero)
  • 7,796 posts

Post #3 by Carl , 29 July 2014 - 03:23 AM

Hey Dave,

 

Just wanted to thank you for posting this overview of your process here.

I haven't had time to get into it in detail, but I'm sure this is the type of thing folks will be interested in as they attempt more robust and scalable animations. 

 

It sounds like you are really onto something here.

 

Hoping all goes well with your project.

 

Best,

 

Carl


  • Back to top

Dave Stewart

Post #4 by Dave Stewart , 29 July 2014 - 09:44 AM

Hi Carl,

 

Thanks!

 

But thanks even more for your's and Jack's (and everyone else's) help over the last month or so in getting me up to speed with GSAP, and the various peculiarities I seem to be so adept at finding!

 

Could seriously not have got this completed without all the fine input received.

 

:D


  • Back to top

Nick

Post #5 by Nick , 29 July 2014 - 11:57 AM

This is good stuff, Dave.

 

I'm going to be digging into it later for sure!


  • Back to top

Toppy

Post #6 by Toppy , 28 February 2016 - 11:07 AM



Hi Carl,

 

Thanks!

 

But thanks even more for your's and Jack's (and everyone else's) help over the members section of the wealthy affiliate last month or so in getting me up to speed with GSAP, and the various peculiarities I seem to be so adept at finding!

 

Could seriously not have got this completed without all the fine input received.

 

:D

 

Excellent stuff, Dave. Maybe you could post and update of your project. One thing I've wondered about these sites is the page speed is obviously a lot slower than normal sites.

 

Is there a way to speed these sites up with so many animations and stuff going on?


  • Back to top

Dave Stewart

Post #7 by Dave Stewart , 28 February 2016 - 01:14 PM

Hey Toppy,

 

I haven't looked at this since the last post in 2014! But thanks, I'm glad you found it interesting, I would like to release the code at some point, I should do that.

 

I don't have any hard and fast advice on how to speed things up actually. Hopefully someone else will be able to help you there, or start a new thread if this one doesn't garner any more interest.


  • Back to top




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

3rd Party Advertisement