JulianBroudy

?‍♂️ Wow, I guess my brain went on a vacation! I should really commit suicide or something. Thanks.

I am restarting my timeline every time the window resizes. (Not showing this in the codepen demo) The sentence is always aligned in the middle and in the center. I would like it to move its y coordinate to 20% of the window's current height regardless of where it was - although it's in the center before the animation - (assuming we don't care about the x position). i.e., if the height is 100px, 0 at top and 100 at bottom. I would like the sentence to move to (original_x_coordinate, 20). if the height is 500px, I would like the sentence to move to (original_x_coordinate, 100). P.S.: I updated the code pen.

@ZachSaucier Hi again, It looks like my workaround didn't pan out eventually. I wasn't successful in implementing your suggestion, I guess that's thanks to my lack of knowledge in gsap library as well as in web development. demo codepen. What I would like to achieve is moving the sentence so it is placed in 20% of the current window/viewport height. I tried using the yPercent and a couple more approaches but to no avail. My last approach was: y: height / 5 - height / 2; But this doesn't seem to be optimal. Could you direct me again please?

Oh! Silly me! It does help, thank you very much.

Hello, My button behaves weird after animating it. For comparison, please interact with the button without touching the code then uncomment one of the options in the JS window and see what happens. In my website it acts even crazier than in the codepen. Could not upload a gif because it exceeds the upload limit so here is a link for my GDrive: Illustration of Button's behavior. Thank you.

Hi, Sorry I thought pasting my code was good enough since the editor gives that option. Either way, I found a workaround. I stepped into another problem, but it doesn't have anything to do with this post so I'll make a new one. Thank you.

Hello, I am trying to do the same, I think. It's not working for me, I've tried a couple approaches, maybe you'd be able to help out? Basically I have some text (2 sentences) showing up on a canvas, next I would like to move (both sentences) up to make place for something else. My canvas and the animations already restart on window resize. Currently I want to use the "left" & "top" options because I haven't found another efficient way to move the sentences with proportion to the window's height as to not go off screen. Here's my code: var width, height; function resize() { width = window.innerWidth; height = window.innerHeight; } var timeline; function translate() { resize(); timeline = gsap.timeline(); timeline.from("#fade1", { opacity: 0, y: height / 3, duration: 1.8, ease: "elastic", delay: 0.8 }) .from("#fade2", { opacity: 0, y: -height / 3, duration: 2, ease: "elastic", }, "+=0.5") .to('#fade1', {left: '20%', top: '20%', duration: 2}); } $(window).resize(function() { timeline.kill(); gsap.set("#fade1, #fade2", {clearProps: true}); translate(); }); translate(); Any advice would be greatly appreciated. Julian