Timeline control

[Desque]

Hello Everyone! Is there any way where I can control the animation of the timeline based on the % or keyframes? Let's say that I want the first animation to take 50% of the entire timeline and the 2nd one 30% and the 3rd one 20%. Instead of having to make multiple animations?

 

See the Pen OJBmpJP by kevinfphan (@kevinfphan) on CodePen

[Desque]

I found the solution I'm looking for but I ran into a problem where I scroll back up and the logo disappear. I guess the animation starts again from the top (0%)??? How could I fix this?

See the Pen ZEqKeLv by kevinfphan (@kevinfphan) on CodePen

[GSAP Helper]

Hi there!

Apologies for the lack of response so far, but it looks like people are struggling to help with this question. I don't see it disappear when scrolling back up, but perhaps I'm misunderstanding. Here are some tips that will increase your chance of getting a solid answer:
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo (you got one...great!).

 

[Desque]

5 hours ago, GSAP Helper said:

Hi there!

Apologies for the lack of response so far, but it looks like people are struggling to help with this question. I don't see it disappear when scrolling back up, but perhaps I'm misunderstanding. Here are some tips that will increase your chance of getting a solid answer:
 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue -  "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo (you got one...great!).

 

Hey! So for the 2nd demo. After I scroll all the way till the end and get passed the end marker. When I scroll back up, once it gets passed that end marker. My logo disappears. I expect the logo to naturally animate in reverse like the 1st demo. Thank you

[Cassie]

Heya!

 

You're using the element you're animating as a trigger. that's where the issue's coming from.

Use static elements as triggers and you'll be a ok. Moving the trigger around messes up measurements and calculations.

here you go - (using the body to demonstrate)

 

See the Pen MWPoePe?editors=0010 by GreenSock (@GreenSock) on CodePen

[Desque]

On 4/27/2023 at 7:37 AM, Cassie said:

Heya!

 

You're using the element you're animating as a trigger. that's where the issue's coming from.

Use static elements as triggers and you'll be a ok. Moving the trigger around messes up measurements and calculations.

here you go - (using the body to demonstrate)

 

 

 

Fantastic. Thank you so much!