greensock / GSAP

GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web
https://gsap.com
19.56k stars 1.72k forks source link

Too many callbacks #76

Closed farhoudz closed 9 years ago

farhoudz commented 9 years ago

Hello,

Is there any better way to write this code?

TweenMax.to("#second-scene .layer-one", 0.5, {delay:0.2, top:0, onComplete: function() {

                TweenMax.to("#second-scene .layer-two", 0.5, {top:0, onComplete: function() {

                    TweenMax.to("#second-scene .layer-three", 0.5, {left:0, onComplete: function() {

                        TweenMax.to("#second-scene .layer-four", 0.5, {left:0, onComplete: function() {

                            TweenMax.to("#second-scene .layer-five", 0.5, {left:0, onComplete: function() {

                                TweenMax.to("#second-scene .layer-six", 0.5, {top:0} );

                            }} );
                        }} );
                    }} );
                }} );
            }} );

Thanks in advance.

yshing commented 9 years ago

Hi ,

have you tried timeline ?

/Shing

farhoudz notifications@github.com ©ó 2014¦~11¤ë3¤é ¤W¤È6:17 ¼g¹D¡G

Hello,

Is there any better way to write this code?

TweenMax.to("#second-scene .layer-one", 0.5, {delay:0.2, top:0, onComplete: function() {

            TweenMax.to("#second-scene .layer-two", 0.5, {top:0, onComplete: function() {

                TweenMax.to("#second-scene .layer-three", 0.5, {left:0, onComplete: function() {

                    TweenMax.to("#second-scene .layer-four", 0.5, {left:0, onComplete: function() {

                        TweenMax.to("#second-scene .layer-five", 0.5, {left:0, onComplete: function() {

                            TweenMax.to("#second-scene .layer-six", 0.5, {top:0} );

                        }} );
                    }} );
                }} );
            }} );
        }} );

Thanks in advance.

¡X Reply to this email directly or view it on GitHub.

farhoudz commented 9 years ago

@yshing Hello, actually I'm new in Tweenmax js and I wanted to perform a series of animations one after another and I don't know about timeline could you describe more plz?

praneybehl commented 9 years ago

Here: http://greensock.com/timelinelite It would be a better idea to use TimelineLite/TimelineMax instead for better code chaining and adding tweens to queue to run.

Hope it helps.

farhoudz commented 9 years ago

@praneybehl Thanks a lot my friend, I will look into that, Could I ask questions about it in case I had any?

praneybehl commented 9 years ago

No worries at all. You can surely ask question and let me point you to the awesome resource/support that the Greensock team provides : http://greensock.com/forums/forum/11-gsap/ You will get better support in less response time.

All the best using GSAP. Cheers!

yshing commented 9 years ago

Please go to http://greensock.com/sequence-video and follow the that, I can't do any better than that...

farhoudz notifications@github.com ©ó 2014¦~11¤ë3¤é ¤W¤È6:37 ¼g¹D¡G

@yshing Hello, actually I'm new in Tweenmax js and I wanted to perform a series of animations one after another and I don't know about timeline could you describe more plz?

¡X Reply to this email directly or view it on GitHub.

farhoudz commented 9 years ago

@praneybehl @yshing Thank you both I am currently studying the resources you provided, Thanks again

farhoudz commented 9 years ago

@praneybehl Sorry if I disturb you but so far I have found this code:

var tl = new TimelineMax({repeat:2, repeatDelay:1}); tl.add( TweenLite.to(element, 1, {left:100}) ); tl.add( TweenLite.to(element, 1, {top:50}) ); tl.add( TweenLite.to(element, 1, {opacity:0}) );

is this right?

praneybehl commented 9 years ago

It would be easier to test if you create something like a codepen sample or something here is how to do that : http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

GSAP TimelineLite/Max is rather vast and allows you to do various cool stuff. Here is the API: http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/add/

farhoudz commented 9 years ago

@praneybehl I have use the above code and it worked instead of too many tweenmax callbacks thank you again for the guide my friend

farhoudz commented 9 years ago

For those who maybe refer to this issue I have to say that TweenMax is the tween engine for performing animations and TimelineMax is a library used to manage TweenMax animations.

Cheers guys.