Jump to content
Search Community

Scale/Movement/Animation issue with horizontal movement on window resize

Audi0031

By Audi0031
in GSAP

 Share

Recommended Posts

Audi0031

Audi0031

Posted
Posted

Hi there!

 

I have tried around with GSAP and ScrollTrigger, and I got it to work essentially. The only issue I am facing now is that when I resize the window the end position of the horizontal animation of the 3 green "rectangles" a bit further down in my shared codepen, their end position does not match the desired position anymore. The end position should be that they are centered in the middle of the window. Without resizing it works. Might be some html/css interference, I am new to all this, I am not sure what the problem is. Does anyone have an idea how to solve this? Also, ignore the messy html and css code :D

 

Thanks in advance!

See the Pen JjgopwE by Audi0031 (@Audi0031) on CodePen.

Rodrigo

Rodrigo

Posted
Posted

Hi @Audi0031 and welcome to the GSAP Forums!

 

The issue is here: 

html {
  --landingpage-color: #cfdbc4;
  --secondary-color: black;
  --tertiary-color: #6a9267;
  scroll-behavior: smooth; /* <- HERE */
  --primary-font-family: "Georama";
}

The reason is that scroll-behavior: smooth to the HTML tag by default which interferes with the way ScrollTrigger works. That will definitely create a problem when you resize the browser window/tab, since ScrollTrigger scrolls everything to the top in order to run it's calculations again, this is completely necessary and not a problem actually, because we need everything to be at it's natural position in order to calculate the start and end points accurately. The problem with scroll-behavior: smooth is that it creates some sort of transition for the scrolling, so when ScrollTrigger sets the scroll position to 0 it takes sometime to get there and when ScrollTrigger does all the calculations again the current position of the scroll is not 0, so all the calculations are off.

 

Removing that should fix the problem.

 

Hopefully this helps

Happy Tweening!

Audi0031

Audi0031

Posted
  • Author
Posted

Thank you very much! That worked! Now the thing is, i need some sort of smooth scroll because of the anchors i have in the navigation bar. Do you know some sort of smooth scroll option/alternative which keeps the "scrolling effect" when clicking on items in the navigation bar or is every kind of it bad for ScrollTrigger. The scrolling effect when clicking on items in the navigation bar is really the only reason why I had the smooth scrolling enabled...

 

Thanks again!

Audi0031

Audi0031

Posted
  • Author
Posted

Wait actually, I don't think it solved the problem 😕 I removed it and it still happens that the position is wrong when i change the window size...

Rodrigo

Rodrigo

Posted
Posted

Hi,

 

Your demo still has that in the CSS also a good idea in this cases is to use function based values since you're using a fluid width value to calculate the final value of your tween.

 

Here is a fork of your demo that also uses GSAP MatchMedia (ScrollTrigger matchMedia was deprecated in favour of GSAP MatchMedia):

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

See the Pen yLmyxgP by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

Audi0031

Audi0031

Posted
  • Author
Posted

Thanks, I copy pasted your version onto the website and now it works. However i need to put the line where you register the scrollTrigger plugin into the addEventListener event funtion (right above the mathMedia line) in order for it to work properly. Else the console would say that gsap is not defined. Can I solve this differently, so that your code completely works? Do I need to change the location of my script tags, or would you recommend to use another way to import gsap and scrolltrigger?

 

Thanks again!

Rodrigo

Rodrigo

Posted
Posted

Yeah doesn't really matter where you put the registerPlugin method and move the <script> tags with GSAP before the closing <body> tag and after those add the custom <script>  tag with your code.

 

For more information check our installation information on our Learning Center:

https://gsap.com/docs/v3/Installation

 

Hopefully this helps

Happy Tweening!

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
 Share
Go to topic listing

  • Recently Browsing   0 members

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