CodePen to AnimateCC

[eGon]

The users of this forum give great examples via CodePen on how people use Geensock.

The workflow in my current situation is though AnimateCC. We have a wide range of skill level when it comes to code on my team and sometimes a simple classic tween will get it done with the AnimateCC timeline.

 

Is there a simple way to make the examples in CodePen easily transferable to AnimateCC? 

 

The current issue is I found this cool falling leaves animation. 

See the Pen KdmwMb by MAW (@MAW) on CodePen

I was able to edit the code so rose petals would fall. But I am not able to implement this to my AnimateCC file. Would someone be able to show me how to or point me in the right direction? Also would the rose petal effect be easily resizable for different size banners? I would also need to stop all animation at 15secs.

I have attached my Animate CC file.

 

See the Pen QqqZqY by gonzo_e (@gonzo_e) on CodePen

 

300x250.fla

[Carl]

Hi and welcome to the GreenSock forums,

 

The demos we provide on CodePen mostly animate the CSS properties of DOM elements, or various SVG attributes.

There is no practical way to convert them to AnimateCC.

AnimateCC deals strictly with HTML5 canvas via creating EaselJS objects.

GSAP can animate dom elements and Easel objects with the exact same syntax

 

DOM

TweenLite.to("#myDiv", 1, {x:100});

 

EaselJS

TweenLite.to(this.myMC, 1, {x:100});

 

The discrepancy is that EaselJS objects are very limited in the properties that can be animated. There is no support for 3D properties like rotationX, rotationY, z (last time I checked) or common CSS things like border-color, border-radius, or even width or height.

 

There is plenty you can do with GSAP and AnimateCC, you just have to be knowledgeable of the limitations.

I don't think you are going to be able to mimic the CodePen demos you found simply because of the lack of 3D support, but you could probably get pretty close by animating the scale.

[davi]

There is a library you can use for 3D with CreateJS in AnimateCC called DepthJS:
http://mbmedia.cc/depthjs/

And EaselJS does have a class called DOMElement where you can control a DOM element within AnimateCC >
http://createjs.com/docs/easeljs/classes/DOMElement.html

Here's an example someone made of that (you can see the difference between the DOM elements and canvas) >
http://www.cs.vu.nl/~eliens/projects/multimedia/research/media/mobile-graphic-easel-examples-HtmlElements.htm

However, that's probably overkill. Your best bet is to recreate it using AnimateCC graphics, movieclips, and JS and GSAP. If you do a search for Animate CC and DepthJS in the forums, I posted on a thread with an example using DepthJS in AnimateCC, works just fine.

Basically, you're going to want to swap out any target that's a DOM-based element in the CodePen example, with a movieclip instance within AnimateCC. Then for any of the 3D-related props, use the DepthJS name instead. I think it's something similar too. You'll also need to set up the other DepthJS stuff too (you'll need to find my post regarding that).