Use of data-scroll-offset

[GodwinEbikwo]

Hi. I am having issues understanding how to properly use the data-scroll-offset instance. Is it used to trigger an animation per se ?

[codeplaygoa]

facing same issue. i want to trigger parallax scroll after element reached top of the screen and not when it enters the viewport.

[joniEAHH]

@GodwinEbikwo data-scroll-offset is used to control when the animation triggers. Check this answer, it might be helpful https://stackoverflow.com/a/61143466/5622969

[cjjkeesq]

@codeplaygoa

facing same issue. i want to trigger parallax scroll after element reached top of the screen and not when it enters the viewport.

Have you ever found a solution for this? I'm trying to achieve this as well.

[codeplaygoa]

@cjjkeesq I am not sure what exactly you requirement is, but in our case we had 2 columns. when container reaches top left column remains sticky and right column then has parallax effect. also there's some animation on left column too. so we did like this <div class='sticky-container-1'> <div class="row"> <div class="col-md-6"> <article data-scroll-id=".sticky-container-1" data-scroll data-scroll-target=".sticky-container-1> then we used scroller.on('scroll',(args)=>{ to fire animations on scroll. you can access elements scroll value like this args.currentElements['.sticky-container-1'].progress;

[cjjkeesq]

@codeplaygoa

@cjjkeesq I am not sure what exactly you requirement is, but in our case we had 2 columns. when container reaches top left column remains sticky and right column then has parallax effect. also there's some animation on left column too. so we did like this <div class='sticky-container-1'> <div class="row"> <div class="col-md-6"> <article data-scroll-id=".sticky-container-1" data-scroll data-scroll-target=".sticky-container-1> then we used scroller.on('scroll',(args)=>{ to fire animations on scroll. you can access elements scroll value like this args.currentElements['.sticky-container-1'].progress;

Thanks for the quick response! I would like to change the color of my header content when it collides/overlaps with a certain section (with a white or black background, see GIF attached).

I'm not that big of a star with JS but if your example will get me there, I'll try and make it work!

[codeplaygoa]

I think you can achieve that using scroller.on('scroll',(args)=>{ check the progress value of the element when it reaches trigger point and fire accordingly

[cjjkeesq]

Thanks, I'll check that out!

[cjjkeesq]

Thanks again for the help! I've got it working by tracking the progress value of the following (absolute) elements:

<div class="section-detect" data-scroll-repeat="true" data-scroll data-scroll-id="white-bg" data-scroll-offset="-72"></div>
<div class="section-detect" data-scroll-repeat="true" data-scroll data-scroll-id="white-bg-2" data-scroll-offset="-72"></div>
<div class="section-detect" data-scroll-repeat="true" data-scroll data-scroll-id="dark-bg" data-scroll-offset="-72"></div>
<div class="section-detect" data-scroll-repeat="true" data-scroll data-scroll-id="dark-bg-2" data-scroll-offset="-72"></div>

I'm using the following JS:

$(document).ready(function() { var pageQ = document.body scroll.on('scroll', (args) => { if(typeof args.currentElements['white-bg'] === 'object') { let progress = args.currentElements['white-bg'].progress; if (progress >= 0.95){ $(pageQ).removeClass('white-content'); $(pageQ).addClass('dark-content'); } else { $(pageQ).removeClass('dark-content'); $(pageQ).addClass('white-content'); } } });

Is it possible to target the sections by class instead of using different ID's? I've tried using data-scroll-class, but that doesn't seem to work.

[mathieupreaud]

@cjjkeesq

Do you have any online demonstration (like a codepen) of your working code? I'm facing the same issue but I don't success to reproduce your code to see it working.

Thank you.

[cjjkeesq]

@mathieupreaud

The website is still in development, but maybe I can provide you with a URL to a temporary environment. I'd need your IP-address to put you on a whitelist.

[bhishekprajapati]

Hii! I recently got to know to about locomotive. I'm working on demo website to learn more about animations.

I need a little help!

I've added a few animations which I want to trigger when the element reaches the middle of the viewport. I thought data-scroll-offset will be helpful but I don't why it's not working. I've no idea how to make it work.

I'm using locomotive v5. Here's the site link: https://loop-fashion-store.abhishekprajapati.com

Thank you!