Jump to content
Search Community

Multiple tweens with different properties not working at the same time

osmo test
Moderator Tag

Recommended Posts

Hi All, I got stuck in gsap where Multiple tweens having different properties tweening at the same time.
I can fix if the duration is hardcoded but if there is dynamic duration value what I am passing through variable in real app then it does not follow the timeline smoothly. I also tried positioning but in dynamic case, positioning was also not working. Therefore, I need help.


I also have added codepen where I have given some hint about what I am trying to do. In the codepen, I am trying to animate rows on one side and image on other side should animate at the same time.
image is fading away and row's background and color is changing depending on image but timelinemax has sequence whereas tweenmax is running at the same time. timelinemax waits untill one tween ends but i want one group of animations to start and end at the same time then move to another. So could someone please explain how can I achieve it. Thanks in advance!
 

In Short:
Multiple tweens with different properties animation at same time.
one group of animations start and end at the same time.

See the Pen MWwmVWb by usmanali958 (@usmanali958) on CodePen

Link to comment
Share on other sites

Hi @osmo,

 

There are a few ways we could tackle this. Given your example setup, one thing to do is to use relative position values that set subsequent tweens start positions back to the same time as their "partner" tween.  This is easy if you are manually assigning duration values. Have a look here,

 

See the Pen OJVmEeY?editors=0010 by sgorneau (@sgorneau) on CodePen

 

Another, and probably better, option is define labels and use those labels for the position parameter for each group (in/out). That way you can feel free to change durations or programmatically assign durations and the groups will have the same starting point.

 

See the Pen xxGdJKP?editors=0010 by sgorneau (@sgorneau) on CodePen

 

Also a quick note, you are calling in GSAP 3 (which is perfect), but using GSAP 2 syntax .. small change from 

 

var tl = new TimelineMax( { repeat:'-1' } );

to

var tl = gsap.timeline({repeat:'-1'});

 

Happy tweening!

  • Like 3
Link to comment
Share on other sites

Hi @Shaun Gorneau

 

Thanks a lot man for help! It works exactly what I was looking for. 

I found in my project a lot of old modules even gsap old version. where even this one does not work:

 

var tl = new TimelineMax( { repeat:'-1' } );

so I need to add like repeat:-1 and that works fine. Also, positioning '-=1' runs all the rows at the same time. I imported again new version but new version still not working fine with that project. Now, I guess I need to change some modules and see if it can help. Otherwise, hardcode duration will fix the issue hopefully.

 

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