Jump to content
Search Community

Element is out of place after the window resize

enut test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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,

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...