Moving element left and right on scroll

[amit95]

I have a simple section which contains extra large text. Two of these sections exist, one which is right aligned, and one which is left aligned.

 

On scroll, I want the right aligned header to move left (which works in my demo, so all good here).

 

The left aligned text however, I want moving right on scroll. This in my demo however doesn't work.

 

The xPercent is negative for the right aligned header, which allows it to move left. By that logic, I've got a positive xPercent value for the left header, however, it doesn't make any movements?

 

See the Pen XWqyYNr by amit_rai95 (@amit_rai95) on CodePen

[Rodrigo]

Hi,

 

I think this is related to the positioning of the element sine you're using a span without a position property.

 

This seems to solve it:

<span class="xlHeader__header d-inline-block">Goes right</span>

 

Let us know if you need anything else.

 

Happy Tweening!

[amit95]

@Rodrigo - I was going crazy looking at the JS and alternative approaches for days 🥲

 

Always good to get another pair of eyes on blockers. Much appreciated. Can confirm, adding the display property resolved the issue.