GSAP x and y animations breaks my layout

[FeranD]

I am using GSAP for last 3 weeks and, first i'd like to say, its and outstanding, great tool. Thanks a lot and cheers cheers to developers.

I have a simple animations using .from method with {x: or y:} properties changes.

Problem came out when i started to look at my website in a mobile Firefox layout.

Some elements have {x: 150} with a .from method and a ScrollMagic (triggerHook: "onCenter") appearance. I guess that keeps them 150px to the right from its original position. And that behaviour largen my screen and breaks layout making an ugly vertical line to appear (same as when u try to resize screen to a smaller size with some fixed width elements, you know what i mean :))

 

How do i fix this ?

[FeranD]

So, i need something like autoAlpha but working with display: none, so elemets that has {x: 100} (moved out of screen and breaks mobile layouts) and have not yet been triggered by ScrollMagic to come to their in-width places will be out of flow and not break layout.

Hope you understand my Russian-English, sorry 

[GreenSock]

Welcome to the forums, @FeranD. Unfortunately, ScrollMagic is not a GreenSock product, so we don't really support it here but if you have any GSAP-specific questions we'd be happy to help. It's always best to provide a reduced test case in codepen so that we can see the issue in context. 

 

Happy tweening!

[ZachSaucier]

As Jack mentioned, it is hard to know the issue without seeing a minimal demo. 

 

Your English is good! Welcome.

[FeranD]

Hey, guys. Thx for a good pleasant welcome. 

I've scratched a very very simple example illustrating my problem - 

See the Pen JjPWRQK by antongrekov (@antongrekov) on CodePen

 

Before animation completes you may notice a horizontal scrollbar on the bottom. That overwidtrh breaks my mobile layout and makes my header stretchen full-width and display incorrectly, also it makes a gray vertical line appear right to all website.

 

overflow: hidden on body or html is not a solution for me cuz i need a vertical scroll on page. I may apply overflow: hidden on section with that animation but i also don't like this solution(what is section is big or it suppose vertical scroll on some elements). 
Perfect solution would be something like autoAlpha but with display: none before animation, or applying a position: absolute to animated element

[mikel]

Hey @FeranD,

 

Welcome to the GreenSock Forum.

 

You can not get everything ...

But as you said, you can partially allocate the overflow.
Maybe this example will help you further.
 

See the Pen bGbqBKP by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[ZachSaucier]

In mikel's example he has the child scroll and the body have overflow (x) hidden. You could also do the opposite approach of hiding the overflow of a container/child and having the body's overflow scroll.

 

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

 

Thanks for the demo! Happy tweening.