ScrollTrigger Issue - Square element doesn't maintain dimensions on scroll up

[FBOMB]

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

See the Pen eYraEoB by tnse (@tnse) on CodePen

[Rodrigo]

Hi @FBOMB and welcome to the GreenSock forums!

 

Thanks for the simple demo it made it super easy to find the issue 🥳👏

The problem is that you are animating the trigger element, which is something you should avoid at all costs. Just wrap the element you want to animate with another DOM element and use the latter as the trigger.

 

Here is a fork of or your codepen:

See the Pen dyeEJmZ by GreenSock (@GreenSock) on CodePen

 

Let us know if you have any other question.

 

Happy Tweening!

[FBOMB]

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

[FBOMB]

@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.

[Rodrigo]

Hi,

 

The issue is that your animation is not responsive per se. You're animating fixed values of width, height and margins (left/right) in pixels, so those should be recalculated on every screen resize event. I would strongly recommend trying xPercent and yPercent instead of margins and keep using scales for the element.

 

Also try using a container with fixed dimensions that is correctly positioned in the document in order to keep it centered in every screen size.

 

Happy Tweening!

[FBOMB]

Thanks Rodrigo.  I have changed the margins to xPercent and yPercent in this updated demo.

See the Pen KKevygx by tnse (@tnse) on CodePen

 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]

Hi,

 

Honestly I couldn't tell you, unfortunately we don't have the time resources to tackle CSS related questions/issues, we have to focus on GSAP related issues.

 

The advice that I can give you is perhaps go backwards on this. Get the logo in the final position you want it and make sure that is full responsive, then do a .from() animation in order to animate the logo from the state you want to the one you already have, since your problem lies in the final state of the element and not the starting one. I'd focus on that first since, most likely, it'd solve your issue.

 

Sorry I can't be of more assistance about this, hopefully another user can jump in and help you with it.

 

Good luck with your project and Happy Tweening!