Smooth animations and clearProps problem

[Acrylate94]

    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

[ZachSaucier]

2 hours ago, Acrylate94 said:

I've tried my best to isolate the parts of the website i'm building

You've got 120 lines of HTML, 310 lines of CSS, and 201 lines of JS. That's really as minimal as you can get? I bet you could strip out 500+ lines of code and still get the same core logical issue that you're having. Perhaps it's best to recreate the issue from the ground up. You're much more likely to get a speedy and helpful reply if you make a bare-bones demo  

[Acrylate94]

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

 

[GreenSock]

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? 

[Acrylate94]

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!

[GreenSock]

11 hours ago, Acrylate94 said:

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!

Sounds good.

 

11 hours ago, Acrylate94 said:

I'm sorry if I caused some troubles!

No problem at all.