osmo Posted February 28, 2020 Share Posted February 28, 2020 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 More sharing options...
Shaun Gorneau Posted February 28, 2020 Share Posted February 28, 2020 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! 3 Link to comment Share on other sites More sharing options...
Shaun Gorneau Posted February 28, 2020 Share Posted February 28, 2020 I've just noticed what you said about assigned dynamic position values ... and that should also work no issue with labels, offsets, and absolute values. Here I have a loop creating the timeline tweens and generating the label value (for the position). See the Pen OJVmwQV?editors=0010 by sgorneau (@sgorneau) on CodePen 4 Link to comment Share on other sites More sharing options...
osmo Posted February 28, 2020 Author Share Posted February 28, 2020 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 More sharing options...
ZachSaucier Posted February 28, 2020 Share Posted February 28, 2020 2 hours ago, osmo said: I imported again new version but new version still not working fine with that project. If you can reproduce the error in a minimal form we're happy to try and help you get any issues fixed Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now