[Sliding text - on resize]

Awesome thanks, the fromTo did the trick. I didn't take into account the set X value.

 

Also thanks for the interval tip, time to go back and see where else I've done that 😅

[Sliding text - on resize]

Hello,

 

I'm trying to have the text slide from side to side filling up the width of the screen. On initial load it seems to work just fine.

I am having trouble on resize. The animation seems to slow down a lot or pause completely.

 

I've tried to use the .clear and .remove methods with no luck.

 

Currently I have a window listener that runs the function again on resize.

See the Pen bGdVQeP by homedepot (@homedepot) on CodePen

[Animation synced]

fantastic, really appreciate the technique. I like the idea of splitting the line into 3 separate segments--200 iq move. Much easier to handle especially with the variance in height measurements. very awesome Mikel ?, thanks!

[Animation synced]

Hello, I'm trying to sync the line (as you will see in the demo) with the rest of the animation--more specifically with the bullet points. I want the bullet points to fill in once the line reaches them. You can see an example of a working demo here Ritual.com Product Page. Scroll down a bit and you will see what I was using as inspiration.

 

I was playing around with the duration and delay on the timeline but can't get it to sync up with the rest of the animation. The line either goes down too fast or skips over the bullet point before being filled in.

 

Cheers,

Ex-HomeDepot-Cashier

See the Pen WNbpGxG by homedepot (@homedepot) on CodePen

[Page size increases after animation completes]

Thanks, and there's no way to create a "pinning" (freeze the frame and animate within) effect out of the box with GSAP correct?

[Page size increases after animation completes]

What's causing the page height to increase drastically after the animation completes?

 

I'm trying to get the text "Grow" to scale and encompass the screen.

After the animation completes the page size suddenly increases by a lot and causes some odd behavior.

 

How can I stop this from happening?

See the Pen mddgegX by homedepot (@homedepot) on CodePen