Jump to content
Search Community

Complex animation with GSAP

absolutGob 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

Hi everybody,

 

First of all, gratz for the amazing work you've done Jack, Carl and all the community's member who help the development of GreenSock. (and sorry for my bad English).

 

i use TweenMax for 4 years in my projects AS3 in Flash and now i try to convert me to HTML5 with GSAP. I want to be able to convert all the work ive done for these 4 years in HTML5 and so ive decided to work with the more complex animation.

 

The matter with this animation is the number of element animated (i join it to the message). I don't intend to declare all the element one by one, in CSS, this will be a wasted time I think.

So, ive searched on the web but I found nothing that I can use. I work with Adode Design Premium CS5, so i can't use CreateJS as plugin for Flash and I haven't Edge Animate. I tried Swiffy but It doesn't seems to work.

 

I tried to do something like this in Flash:

function createCSS () {
	for (var i:int=0; i<numChildren-1; i++) {
		var mc:MovieClip = getChildAt(i) as MovieClip;
		tabMC[i] = mc;
		trace ('#'+mc.name+'{');
		trace ('position:absolute;');
		trace ('x:'+mc.x+';');
		trace ('y:'+mc.y+';');
		trace ('}');
		trace ('');
	}
}

wich display a "potential" CSS style-sheets of all the elements but if I want it works, i will have to export each element in SVG with Illustrator with the same name used by Flash, and that also seems to be a wasted time.

 

Is there another solution you see to do this ?

 

I hope Ive been clear, my english is so bad.

Thank you in advance for whatever help you can give me.

 

Notice that the animation size is very low (52ko) i want to keep this size as lower as possible, even in HTML5.

 

ps: attached file contains the .fla

ATRT_anim01.zip

Link to comment
Share on other sites

Hi and welcome to the Greensock forums.

 

I'm not very sure if this is what you need, but one possibility would be to add all the SVG paths into one div (ideally add nothing else into that div element) and store all the elements into a variable. Then loop through that, apply the specific styles and add them to a style sheet in the document.

 

HTML

<div id="parent">

	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="path1">
		<path d="M150 0 L75 200 L225 200 Z" />
	</svg>
    
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" id="path2"> 
		<rect x="100" y="50" width="400" height="250" style="fill:blue;"/>
	</svg>

</div>

JS

var parent = document.getElementById('parent'),
    childs = parent.children,
    styles = document.createElement('style');

styles.type = 'text/css';


for(var i = 0; i < childs.length; i++)
{
  var styleNode = document.createTextNode('#' + childs[i].id + '{ position:absolute; }');
  styles.appendChild(styleNode);
}

document.getElementsByTagName('head')[0].appendChild(styles);

The example is quite simple, just a triangle and a square, but with that you can add the specific styles for each path into the stylesheet.

 

Now if I'm not mistaken (perhaps a more experienced user with SVG could clarify this for us) that if you're going the way I propose you might as well just declare the specific styles by hand, at the end it would be the same and your code wouldn't get so bloated with unnecessary stuff like setting the styles, unless you're importing your svg paths through XML or JSON data, in which case such implementation would be necessary.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Hi Rodrigo ! Thx for your help.

 

I think you put me on the right way with the use of svg and the selecting method in JS with parent.children. However, i would like to animate each elements with TweenMax (as you can see at the beginning of the flash animation, elements fall one by one). I try to use the var childs directly in the tweenMax, but it doesn't work of course.

 

Any idea ?

Link to comment
Share on other sites

Hi,

 

I'm still working on flash CS4, it's been unnecessary to do the upgrade so I couldn't look at your file.

 

But since you've been using the engine one of the great things the guys did was to keep the syntax and constructor of the instances in the same way, so the only changes between AS and JS are the particular things of each language.

 

In this case if you need to start an element's animation after the previous one ended, you could set up a timeline in the for loop:

var childs = parent.children,
    tl = new TimelineLite({paused:true});

for(var i = 0; i < childs.length; i++)
{
  tl.to(childs[i], time, {vars});
}

tl.play();

That should work.

 

Keep in mind that for moving things around your element should be positioned (fixed, relative or absolute) and if you're using the same loop to apply the css styles and create the timeline you should be very careful in the order on which the code is executed:

var parent = document.getElementById('parent'),
    childs = parent.children,
    styles = document.createElement('style'),
    tl = new TimelineLite({paused:true});

styles.type = 'text/css';


for(var i = 0; i < childs.length; i++)
{
  //first execute the styling
  var styleNode = document.createTextNode('#' + childs[i].id + '{ position:absolute; }');
  styles.appendChild(styleNode);
  
  //then create the tween instance in the timeline
  tl.to(childs[i], time, {vars});
}

//apply the styles to the elemenets
document.getElementsByTagName('head')[0].appendChild(styles);

//finally play the timeline
tl.play();

Also if you're familiar with the engine you could use a staggerTo() method directly on the var containing all the elements, you just have to play with the stagger time value in order to get the desired separation between each animation:

var parent = document.getElementById('parent'),
    childs = parent.children,
    styles = document.createElement('style');

styles.type = 'text/css';


for(var i = 0; i < childs.length; i++)
{
  var styleNode = document.createTextNode('#' + childs[i].id + '{ position:absolute; }');
  styles.appendChild(styleNode);
}

document.getElementsByTagName('head')[0].appendChild(styles);

//create the tween instance after the loop
TweenMax.staggerTo(childs, time, {vars}, staggerTime);

Best,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hi Rodrigo !

 

So, thanks to you, showing me the way to select children in svg document, i could do what i want.

 

So, here is the result :

See the Pen thaDH by absolutGob (@absolutGob) on CodePen

.

 

It doesn't seems to work with Chrome, and i don't know why (it just display elements one by one, without translation).

 

Anyway, a great thanks to you Rodrigo and to all the GSAP community. You just open a door to infinity and beyond, for me ;)

 

Best,

AbsolutGob ;)

Link to comment
Share on other sites

Hi,

 

You're welcome.

 

It's always great to receive this type of feedback from users, it's a good recognition of the hard work every one in the community does.

 

In terms of the issue you're having in chrome I believe that it has to do with the amount of nodes being passed to the engine and being animated, thus creating quite a handful to chrome. Is what Carl and Jack always call "a rendering bottleneck" or the three stooges syndrome, too many things trying to pass through a single door and blocking each other.

 

I noticed that every single element you're trying to stagger is contained in a master <g> tag, what you could do is assign a common class to those tags and you could use either JQuery, sizzle, zepto or another library with selecting capacities, so select all of them and then create the staggerFrom() instance.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

I noticed that every single element you're trying to stagger is contained in a master <g> tag

 

 

Yes, indeed, that's the work I do in illustrator before exporting in svg. I group each element I want to animate. It's also possible to have one element by layer and to name this layer to select him with JS. In this way, Illustrator may almost be used like the Flash interface.

 

SVG code is very rich. It's just a first try but I think there's a lot of potential.

 

And thanks for your tip about library with selecting capacities, i'll turn to that to avoid the "rendering bottleneck".

Link to comment
Share on other sites

Hi

 

I'm having trouble forking your pen or saving a new one with that massive svg data.

I can however monkey with yours and I found a few things.

 

First please remove all the script tags from the JS script panel and use the JS settings panel to load jQuery and TweenMax only as shown in the image below

 

Screen Shot 2013-12-03 at 1.22.54 PM.png

 

To add TweenMax, just start typing "tweenmax" in the external js field and auto-complete will show the url to the cdn (very cool!)

 

 

-----

 

 

1: You are selecting a bunch of elements that aren't animating at all, thus the really long delay before you see anything happen. It seems there are a number of <symbol> elements that got selected with parent.children and they weren't animating. if you use just this js you will see the animation happen immediately and all the y transforms will work

 

var childs = $("#parent > g");

TweenMax.staggerFrom(childs, 2, {y:-600}, 0.25);

Also, I found that autoAlpha would work to. Try just this js code

 

var childs = $("#parent > g");


TweenMax.staggerFrom(childs, 2, {autoAlpha:0}, 0.25);

The trouble comes in when animating autoAlpha AND y. It seems things do just snap into view. 

As rodrigo suggested, this could be three stogges syndrome;) but I'm really not 100% sure.

 

I would try experimenting with a MUCH less complex svg and see if it works any better.

 

 

 

  • Like 3
Link to comment
Share on other sites

Hi Carl !

 

First of all, thanks for your very helpful answer.

 

I never spent time to read codepen documentation and I should start there... Thanks for the tip.

 

You're right about lots of symbol that come from nowhere. I didn't draw it and I think it's some kind of buttons uses for PDF or something like that. Anyway, your selecting method fix it and seems absolutely perfect for what I have to do, and I'm very grateful.

 

So, I updated

See the Pen yalro by absolutGob (@absolutGob) on CodePen

 following your advice, and working with only few elements.

 

As you already say, the result is much more reactive. It's amazing ! However, there still have a trouble when animating autoAlpha and y with Chrome but it's not a big deal for me.

 

Thank you again and sorry for my english, I hope that the poor French as I am does not make you bleed eyes.

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...