Element is out of place after the window resize

[enut 0 Likes (Newbie)]

Hello Forum,

 

I try to create animation only for larger screen. I animate the y position of the box. However, after the window resize the box seems to be out of position. I am creating a website that use similar animation. In my case, the image either wont show up or out of place.

Thanks in advance people!

See the Pen qBMXeaO by enutt (@enutt) on CodePen

[mvaneijgen 1,729 Likes (Superhero)]

Hi @enut welcome to the forum!

 

You should not be animating your trigger element! ScrollTrigger uses the trigger element to do all its calculations, but you are translating that element, so then all the calculations will be off by that amount, so it will never look like you expect. 

 

Also using a .from() is much easier in this case, saves you having to setup your animation on page load. I've also move you .set() outside of the media query and set the elements to visibility: hidden; Read more about FOUC below. Hope it helps and happy tweening! 

 

 

See the Pen mdGBbLv?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[enut 0 Likes (Newbie)]

Hi mvaneijgen,

Thank you for fast reply and perfect solution! I've seen many videos about your tips, yet i keep forget it. It works perfect too in my website.

Another question, i've made the navigation for mobile using hamburger menu on the side of the website. I made it only with CSS. Then the FOUC problem occurs whenever i resize my window. If i implement the solution to the FOUC for GSAP, the nav is getting out of control. Any suggestion how to fix it?

Double Thanks,

[Rodrigo 5,421 Likes (Superhero)]

Hi @enut,

 

Do you have a minimal demo that shows what's going on here:

3 hours ago, enut said:

Another question, i've made the navigation for mobile using hamburger menu on the side of the website. I made it only with CSS. Then the FOUC problem occurs whenever i resize my window. If i implement the solution to the FOUC for GSAP, the nav is getting out of control.

Unfortunately the codepen you already provided and the solution by Mitchel, don't include a menu of any type so we can't tell what's going on based solely on this description 🤷‍♂️

 

Happy Tweening!