[Animation not playing correctly after resizing the window]

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!

[Animation not playing correctly after resizing the window]

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

 

[Animation not playing correctly after resizing the window]

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

[Smooth animations and clearProps problem]

11 hours ago, GreenSock said:

I read your post a few times and I'm pretty lost - can you please just focus on one part at a time instead of giving a laundry list of all the things you want it to do? That'll really help in being able to isolate issues as much as possible. 

 

Please keep in mind that we really try to keep these forums focused on GSAP-specific questions (like about the API or why a tool is behaving a certain way) - we just don't have the resources to take custom orders like "can you make it do these 4 things?" (and then we build it for you). But we're happy to help with any GSAP/ScrollTrigger questions. It definitely sounds like you have some of those, like maybe related to clearProps behavior.

 

So if you'd like some help, could you please just start with one question and we'll go from there please? 

Since i had multiple questions about pretty much the same code i wasn't sure if it was better to keep it in one post or in multiple ones. If it's better to split them i think it's better to close this topic and I'll open multiple more isolated new ones!
I'm sorry if I caused some troubles!

[Smooth animations and clearProps problem]

I'm sorry! hopefully this version is better. I'm not sure i can do a lot more than this!

 

[Smooth animations and clearProps problem]

    Hello!
    I've tried my best to isolate the parts of the website i'm building, but for some reasons it could be a little bit buggy.
    I have the same animation for  desktop and mobile but it should be a little different
    Desktop: clicking the title starts the animation sliding up the section with the text and the title shrinks to the side.
            1. what i'm trying to achieve is a smooth animation to the side that ends with the title being aligned center( now the align has a snap and no animation)
            2. the divs of all the sections "section-content-title" should shrink all to the same size (I used min-width:20vw but i'm not sure it's correct)
            3. the div "section-content-title" after playing with the animation and resizing, has problems with his height and before going to it's correct position it snaps
            
    Mobile:
         1. the animation should be the same but the div "section-content-title" sould shrink up and the title should be inline (to use less space in mobile)
            not sure if i should copy the same animation and adding only a bit to it. Anyway i have the same problem of the animation with the height
         2. After clicking on the hamburger menu it starts an animation of the overlay menu. After clicking it i need to clear 
            all the inline style of the header because when resizing back to the desktop mode the menu items should be visibile. The problem is that it's not working on the first animation, 
            but only after opening and closing the menu again. I'm using the method clearProps on the end of the animation callback so i'm not sure what i'm doing wrong.
            
            
            I'm sorry if I wasn't clear enough, i'm open to questions.
            Thanks!

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

[Reverse animation not working using one single button]

21 minutes ago, akapowl said:

 

Your .main-container div. The missing closing-bracket causes the first of the two scripts you include (which is GSAP) to not be loaded in debug view - thus there was no GSAP. This exact issue likely only happens with the codepen - but might cause other problems on your page if you missed it.

 

 

 

 

Best would be to not create the timeline on every click but instead beforehand for each element neccessary (like with a .each()-loop for example) and set your timeline to be paused initially - then on click of this element only change the playstate of the timeline.

 

 

 

 

 

i'm sorry, i looked at the wrong codepen code! Thank you very much for the fast reply this works!

[Reverse animation not working using one single button]

9 hours ago, PointC said:

Hi @Acrylate94 

 

Welcome to the forum.

 

Is this what you need?

 

 

 

Happy tweening.

 

 

 

Thank you very much it worked on my js! Even though i cannot compile from typescript because "this.anim"  ("property 'anim' does not exist on type HTMLElement").
I also have another question, how can i prevent to bug the animation triggered by clicking multiple times?

Thank you!

[Reverse animation not working using one single button]

9 hours ago, akapowl said:

 

On a sidenote:

 

You are missing the closing '>' bracket on your last closing tag of the div in your HTML - that broke everything for me in debug view.

 

Don't miss that in your actual page  - took me quite some time to find out what the problem was, throwing errors in console.

Hi! i'm sorry but im not sure what div are you talking about, it seems fine to me!

[Reverse animation not working using one single button]

Hello,

I want that the "click here" link toggles the animation, but after clicking it once, the reverse animation is not working. I'm not sure what I am doing wrong, thank you!

 

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