Acrylate94

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!

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 codepen_jwLUH1iw.mp4

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

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!

I'm sorry! hopefully this version is better. I'm not sure i can do a lot more than this! https://codepen.io/robby32/pen/GRrNJXX

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!

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

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!

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

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!