Animation not playing correctly after resizing the window

[Acrylate94]

Hello! 
In this codepen there is one animation that should behave correctly both when in Desktop mode ( the title should slide to the right) and Mobile mode ( the text should slide to the top). Without resizing the animations are ok,  they starts to break when playing with the resizing of the height of the window or for example going from desktop mode to mobile mode. I guess it has to do with initial values of the animation but i'm not sure how to fix it!

Let me know if there is something unclear,
Thank you

See the Pen abpNvWr by robby32 (@robby32) on CodePen

[Cassie]

Hi Roberto,

 

It looks like you may want a different timeline for desktop and mobile

I just ran across this thread - I hope it helps!
 

 

[Acrylate94]

11 hours ago, Cassie said:

Hi Roberto,

 

It looks like you may want a different timeline for desktop and mobile

I just ran across this thread - I hope it helps!
 

 

Sorry if i was unclear, but right now i don't need two different timeline, this works good for both desktop and mobile, the problem is that starting the animation and then resizing the window the animation get sloppy and there are some snaps.

I attached a video hoping to clear things up!

Thank you

 

[Cassie]

Heya Roberto,

 

No, you weren't unclear. I still think creating a timeline for the different viewport sizes is the best way to go.

When you ask GSAP to animate values like auto and vw, the height and width of the browser window is important for the animations to be calculated. If you inspect in devTools you might notice that width and height values get added to your element as inline styles.
 

When you change the viewport size, these values need to be updated or the animation will still be using the old width and height values.

I put together a little codepen demo for you with how I'd approach this and some comments explaining the reasoning behind it.

See the Pen 49428e1bcd153df12d74a4f299eb90ae?editors=0110 by cassie-codes (@cassie-codes) on CodePen

[Cassie]

fyi - If anyone else has any input on this I'd love to hear, maybe there's a simpler approach?

[Acrylate94]

19 hours ago, Cassie said:

Heya Roberto,

 

No, you weren't unclear. I still think creating a timeline for the different viewport sizes is the best way to go.

When you ask GSAP to animate values like auto and vw, the height and width of the browser window is important for the animations to be calculated. If you inspect in devTools you might notice that width and height values get added to your element as inline styles.
 

When you change the viewport size, these values need to be updated or the animation will still be using the old width and height values.

I put together a little codepen demo for you with how I'd approach this and some comments explaining the reasoning behind it.
 

 

Thank you for your solution Cassie but it's not ideal for the usability of the site because in the right section there is text (i've updated the codepen) so would be annoying to restart the animation on resize.
Also I can't resize the viewport of the ".section" because i need to preserve the background video (not present in the codepen, i needed to be as simple as possible) so I would target ".section-content-title"

Is there anothere way to achieve that?
Thank you!

[Cassie]

Hi again!

 

It's a little tricky to explain this but I'm going to give it a bash.

It's important that we clearProps when we resize as you're animating using viewport units and auto, so the values within the animation are calculated using the viewport size. The messiness is coming from tweens using previously calculated values that no longer apply to the new size of the viewport.

However - when we clearProps, the inline styles get yoinked out and the element who's props we've cleared will revert back to it's original state.

In this case it's the full width state - i.e. the beginning of the timeline. 

This is obviously a ok if you resize the window when the section is closed. But you want it to remain open if the browser's resized when it's open.

So. If you want to keep the panel open when you resize you'll need to check whether the panels are open and then move the timeline playhead to the point in the timeline that the panel is open - i.e. the end of the timeline

 

timeline.progress(1).pause();

See the Pen 6550fab59da03279ba1600837f880045?editors=1010 by cassie-codes (@cassie-codes) on CodePen

This will need some tweaking to make it fit perfectly for your project, i.e. targeting the right elements and adding the other tweens to the timeline, but it's certainly a step in the right direction!

[OSUblake]

This is how I recommend updating animations on resize/media queries. Please read the commented code.

 

See the Pen 6e950b150d0c6148034b3f7fbfc6088a by osublake (@osublake) on CodePen

 

 

[Cassie]

Ah, this is a lovely solution. Thanks Blake!