Share Posted February 16 Hi guys. I have a little issue with priority, I want timeline start every point in another position and don't same priority. for example const headerDiv: string = 'header+div>h3'; const headerDivDesktop = gsap.timeline({ scrollTrigger: { trigger: headerDiv, start: 'top 60%', end: 'top 30%', scrub: true, markers: true } }); headerDivDesktop.to(headerDiv, {scale: 1.25 }); // X headerDivDesktop.to(headerDiv,{x:50}); // Y headerDivDesktop.to(headerDiv,{y:50}); // Z X , Y and Z start from 60% and end from 30% on this space three of animation happened (X Y Z) I want for example X start in 60% to 40% and Y and Z start only 5% each. for now it take 1\3 of amount => mean - X 60% , Y 50% , Z 40% Thanks for helping guys See the Pen OJbpdeX by lichaytiram (@lichaytiram) on CodePen Link to post Share on other sites
Share Posted February 16 Hey @Lichay, As an experienced GSAP forum user, you should know that your case presented in a small CodePen helps everyone. So please do it . Happy tweening ... Mikel 2 Link to post Share on other sites
Author Share Posted February 16 22 minutes ago, mikel said: Hey @Lichay, As an experienced GSAP forum user, you should know that your case presented in a small CodePen helps everyone. So please do it . Happy tweening ... Mikel Done Link to post Share on other sites
Solution Share Posted February 16 Hey @Lichay, Do you expect such a 'timing'? See the Pen mdOWomE?editors=0010 by mikeK (@mikeK) on CodePen Here another example: different durations and positions See the Pen qBqrgLL by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 4 1 Link to post Share on other sites
Author Share Posted February 16 15 minutes ago, mikel said: Hey @Lichay, Do you expect such a 'timing'? Here another example: different durations and positions Happy tweening ... Mikel Thanks it really work. The property duration do the job, I think at first have another property something like priority. Thanks @mikel 1 Link to post Share on other sites
