Jump to content
Search Community

MUltiple animations in tweenmax.from()

iconofsyn 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 want to have multiple animations in a tweenmax.from() command.

This is for an intro animation. I have used CSS to place objects in their permanent position and am trying to use tweenmax.from() to make them animate from outside of the screen into their proper positions.

 

I cannot simply have multiple tweenmax.from() commands because if i do this then the objects animated by the second or later tweenmax.from() start by appearing in their final position and when their animation starts they jump to their animation start position and then animate back to where they should be.

Also i need to have different easing on each command

my current code looks like this

 

-----------------------------------------------------------

    introTimeLine.add(
        TweenMax.from($('#cube'),1.5,{
            ease: Bounce.easeOut, 
            top:-10000,transform:"rotatateX(90)"}
        )   
    );
    
    introTimeLine.add(
        TweenMax.to($('#cube'),0.5,{
            ease: CustomEase.create("custom", "M0,0 C0.126,0.382 0.658,0.852 0.816,1 1.008,1.18 0.818,1 1,1"),
            transform:"translateZ(100px)"}
        )
    );

--------------------------------------------------------------

 

is there any way i can move the two animations into the saem from command AND have a different speed and ease on each one and delay the second on until the first one has completed.

NOTE
IN my code the second animation is a .To() command, currently i am using this as a work around and it requires me to set the objects translateZ in my CSS style as the point where it should be at the start of the animation. I do not want to do this because this relies on greensock to add its perminant CSS rule and this is interfering with things i wish to do after the intro animation completes

to summarise my questions are
Can i have multiple animations in the same .from() command which each have their own speed and easing type, and can i delay the start of the second one until the first ends.

 

Link to comment
Share on other sites

You won't be able to have multiple animations in the same from() tween with different durations and eases. If you don't want the target to move to its starting position, you can set immediateRender to false. From the docs:

 

NOTE: By default, immediateRender is true in from() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing immediateRender:false in the vars parameter so that it will wait to render until the tween actually begins.

 

More info: https://greensock.com/docs/TimelineMax/from()

 

Hopefully that helps. Happy tweening.

:)

Link to comment
Share on other sites

12 minutes ago, PointC said:

You won't be able to have multiple animations in the same from() tween with different durations and eases. If you don't want the target to move to its starting position, you can set immediateRender to false. From the docs:

 

NOTE: By default, immediateRender is true in from() tweens, meaning that they immediately render their starting state regardless of any delay that is specified. You can override this behavior by passing immediateRender:false in the vars parameter so that it will wait to render until the tween actually begins.

 

More info: https://greensock.com/docs/TimelineMax/from()

 

Hopefully that helps. Happy tweening.

:)


if i do that
And i have the objects final position declared in my CSS sheet
will it continue to display in its final position after the tween ends

Link to comment
Share on other sites

I tried that immediateRender option and it did not work

 

Quote

    introTimeLine.add(
        TweenMax.from($('#cube'),1.5,{
            ease: Bounce.easeOut, 
            immediateRender:false,
            top:-10000,transform:"rotatateX(90)"}
        )   
    );
    
    introTimeLine.add(
        TweenMax.from($('#cube'),0.5,{
            ease: CustomEase.create("custom", "M0,0 C0.126,0.382 0.658,0.852 0.816,1 1.008,1.18 0.818,1 1,1"),
            immediateRender:false,
            transform:"translateZ(-5000px)"}
        )
    );


The problem is that my CSS code contains this style

 

Quote

transform :rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(-5000px);


And after the .from() commands have run the object has this CSS style attatched to it

Quote

transform: translate3d(0px, 0px, 100px);


Chrome DEV tools shows that the first style is not applied
Theifore i cannot change the X Y and Z values (from chrome dev tools or JS) and observe a animation

If i disable the second style (the one which .from() adds) using chrome dev tools then changeing the X Y Z values in the second style does produce an animation.

This proves that the problem is caused by the final style which the .from() function applies during its animation still remaining on the element after the animation has finished.

Is there any way to make greensock remove this
or will i have to do it myself (say using jQuery)

Link to comment
Share on other sites

Please, provide a very simple demo. My assumptions and misunderstandings are the same as PointC's right now. I'm sure a reduced test case (the simpler the better) will help us better understand what might be the problem.

 

Thanks.

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