Jump to content
Search Community

How to animate tween while other tween animation is applied

Roman Kovalev test
Moderator Tag

Go to solution Solved by PointC,

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

Making an animation, and the question appeared : 
I need to animate one tween while other tweens are animating. Sorry the code is too big, so will cut it:

TimelineMain.to(the.Second_frame_bg_1, .75, {scale: 1.3, autoAlpha: 1, ease: Sine.EaseOutIn}, 'second_frame_step_1');
TimelineMain.to(the.Second_frame_bg_1, 4, {scale: 1.2, x: '-40px', ease: Sine.EaseOutIn}, 'move_right'); //I want this tween to be animated while next one tweens are animating
TimelineMain.staggerFrom([Destination_city_1, Destination_price_1], 0.7, {scale: .3, opacity: 0, ease: Sine.EaseOutIn}, .15, 'second_frame_step_1');
TimelineMain.from(Destination_cta, 1, {y: '50%', opacity: 0, ease: Back.easeOut.config(1.7)});
TimelineMain.from('.destination_info', 1, {opacity: 0});

 

Link to comment
Share on other sites

  • Solution

Hi NeedHate :)

 

If I understand your question correctly, I think you need to look at the position parameter. It will allow you to start tweens at an absolute time or label as well as relative to the end of a timeline or label. Please see this blog post for a deeper understanding

 

http://greensock.com/position-parameter

 

If you have lengthy timelines that need to start at the same time, you can also build them separately and add them to a parent timeline. Here's a pen I made as an answer to another forum question but it shows the basic mechanics of nesting timelines.

 

See the Pen obyJEM by PointC (@PointC) on CodePen

 

Hopefully that helps. 

 

Happy tweening.

 

:)

  • Like 5
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...