CODEWITHSUNDEEP
cssreactjsoverflowjquery-animateframer-motion
Y D
Y D

Reputation: 51

React Framer-Motion Overflow X problem. Unable to animate Translate X without overflowing

What I want to do is animate 2 ships flying in, one from the left, another from the right, and they stop at about 75% of the page each.

The issue is using x / translateX in framer motion, using any kind of units at all, will add horizontal overflow. If you animate from the right, they expand the viewport, and when they fly to the left it will shrink it again. If you animate from the left it won't initially increase the viewport, but when you add any value of any kind, using any type of unit to the animate prop, it will then add horizontal overflow which will increase it by the amount of distance travelled.

I have tried to wrap the component in an extra wrapper and added overflow-x: hidden, however this just brings another issue. I can set the ship flying from the right hand side like so:

    initial={{ x: '100%' }}
    whileInView={{ x: '12vw' }}

and it will initially be hidden, and then remain almost all the way to the left at all times, regardless of screen size or zoom level. It is positioned perfectly. However the issue comes now for the ship coming in from the left, let's say I set

    initial={{ x: '-100%' }}
    whileInView={{ x: '80vw' }}

It would work on 100% zoom on a desktop, but as soon as you zoom in or use responsive layout, it disappears into the overflow. This is because my viewport is secretly twice as wide, with the second half being hidden. So I would need to set a very low whileInView value to see it on a small screen, then on a large screen it is completely in the wrong position.

I also have a custom hook that updates viewport changes, so I tried using this and a multiplier to set the whileInView position, but it doesn't take into account the extra width and as such I again have to use multiplier values such as 0.1-0.2 and am stuck with the same issue.

What I would be content with is one is positioned on the left, the other on the right with initial opacity 0 then have them appear and move across the screen past each other. But any combination of initial X values vs animate X values I have tried will immediately give an overflow X which then causes all of the above issues as it becomes not possible to position the right hand side ship unless I write a lot of media queries, which seems overkill for a simple animation.

I have explained this in the above statement.

Upvotes: 4

Views: 729

Answers (0)

Related Questions