V5 - Mimic scroll-position = bottom of V4 planned ?

[laurent-d]

Hi, Thanks for the amazzzzingg on all version of Locomotive-scroll.

In V4 when we use data-scroll-position="bottom" we have possibility to create some reverse scroll effect with speed that recover initial position.

Live example in footer on one of my work with V4 : https://www.atelierunearchitecture.com/

https://github.com/locomotivemtl/locomotive-scroll/assets/6553086/5357a3fd-a429-41c8-b776-d9d8b8b80c97

Do you plan, to re-implement this type of behavior by a new a new option or something else ? I've seen this type of effect with v5 on the https://lightshiprv.com/ website but without a max position.

Hope my question is clear.

Big thanks from France, vos prods sont hallucinantes !!!

[devenini]

Hey @laurent-d! You're right, achieving the equivalent of data-scroll-position="bottom" from version 4 with only data-scroll attributes isn't straightforward. However, I've come up with a solution using custom events and JavaScript to achieve what you want. Here's how you can do it:

First, wrap the element you want to transform like this:

<div
  data-scroll
  data-scroll-event-progress="footerEvent"
  data-scroll-offset="0,100%"
>
  <h2 id="children" style="padding: 60px 20px;">
    Thanks!
  </h2>

  <div class="footer" style="padding: 20px; background: pink;">
    copyright
  </div>
</div>

Next, grab the progress of the parent and apply parallax to the children using JavaScript:

/* Locomotive scroll instance */
const locomotiveScroll = new LocomotiveScroll();

const $parallaxTarget = document.getElementById("children");

window.addEventListener("footerEvent", (e) => {
  const { target, progress } = e.detail;

  const parallaxDistance = 150;
  const translate = (1 - progress) * parallaxDistance;

  $parallaxTarget.style.transform = `translate3d(0,${translate}px,0)`;
});

I've created a codesandbox for you to see the implementation in action.

One thing to note is that if you want the element to stop transforming when you scroll exactly to the end of the page, you will need to change your markup structure and include the footer inside the parent scroll element. Otherwise, the parallax element will reach its max position and stop transforming once the parent touches the bottom of the viewport.

Let me know if you have any questions!

[laurent-d]

Hi @devenini , thanks a lot for the tips and the help.. The only caveats of the method is the need of declaring the distance in advance.. but it's little in comparaison of all the value added to the futur V5 !!