more priority in timeline

[Lichay]

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

[mikel]

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

[Lichay]

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

[mikel]

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

[Lichay]

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