FBOMB

Thank you for the thorough explanation, it's working much better in Safari and Firefox! It is still a bit laggy in Chrome though, is this a known issue with Chrome? Are there any settings that can fix the Chrome lag? Thanks again!

Hi, I am working on some parallax layers for a concert scene as you scroll (crowd, foreground band, background band, stage background) and I am wondering how I can make it more smooth as you scroll? Sometimes it is a bit choppy. Am I not supposed to initially set the top or left margins in css? If not, how would I do it? Where exactly am I going wrong in this example? Thanks!

Thanks Rodrigo. I have changed the margins to xPercent and yPercent in this updated demo. https://codepen.io/tnse/pen/KKevygx It still animates into place but it doesn't do it symmetrically anymore. What is causing this type of behaviour? The div is a full width div that shrinks down to a square as the user scrolls. Since each user's screen will vary, I needed to use set dimensions to animate it down to a square (the square is the company logo). I've tried using percentages but it doesn't work. How do I animate the rectangle full width div (which varies user to user and determined by screen size) down to an exact square without using a fixed width and height? Is there a dynamic calculation I can use for this? When resizing the browser window during the process, the square does reposition into the center, the issue is when it scales back out to the full width div. It seems to remember the initial browser window width but it doesn't recompute after resizing the window. So when scaling back out, the blue div will either extend beyond the browser window or it will stop short of it depending on how the browser was initially loaded. The blue div that is being animated is inside of another container div called #logo-wrapper. I added position:relative and width:100% to this div but it didn't seem to change anything. What am I doing wrong with the container? Besides the width and height of the blue (#community) div, there's no other hard coded values. Confused as to where I am going wrong here. Thanks for any advice you have.

@Rodrigo Thanks again for this solution. One thing I just realized is that if you resize the browser window the animation won't reset its boundaries. Its positioning isn't relative to the browser window after resizing. This behaviour is fixed however if you refresh the browser which we can't rely on. I'm curious how do I go about fixing this behaviour? It seems to remember the initial browser dimensions and if you resize after the fact the animation won't reset. The only fix right now that I have is refreshing the browser when this happens. Hope I explained that well enough. Please let me know if you need more information. Thx.

Thank you Rodrigo! Such a simple fix, much appreciated!

Hi, I am looking for some help with a ScrollTrigger issue, appreciate any advice I can get. I am having an issue where an element isn't maintaining its square dimensions when scrolling up. On the scroll down, there is a colored div that spans the full width and height of a users desktop screen. As the user scrolls, the full screen div will shrink into a square and slowly rotate into a company's logo. After that, it fades to white then fades in some words then fades out to white again then you proceed/scroll to the next section of the site. I had to set a fixed width to scale it to so I could get the square ratio that I needed. I couldn't achieve this using the scale property alone. The animation is fine on the way down but on the way up, the square loses its ratio and becomes a rectangle causing the logo and words to be misaligned. How do I go about fixing this issue? I've been stuck on this issue for several weeks and any advice would be greatly appreciated. Also realizing now that it doesn't shrink down to the center with short heights. If you view it on CodePens site you can see the issue more clearly. Thanks