CODEWITHSUNDEEP
javascript
Perdixo
Perdixo

Reputation: 1289

Show element when in viewport (Locomotive Scroll)

I'm using Locomotive Scroll on a website. What i try to achieve is the following : when a section with the id #mysection is in the viewport, i'd like an icon to appear, then disappear when the section is out of the viewport.

I've tried searching in the docs and on the web ways to achieve this, but i can't figure out how to make it work. Right now, i've seen that you can launch events in the docs by using the following : 

<!-- Using jQuery events -->
<div data-scroll data-scroll-call="EVENT_NAME">Trigger</div>

then in the javascript file :

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll();

scroll.on('call', func => {
    // Using modularJS
    this.call(...func);
    // Using jQuery events
    $(document).trigger(func);
    // Or do it your own way 😎
});

So what i did is the following :

let serviceWebDigital;
let serviceGraphicDesign;
let serviceMarketing;
let serviceVideoMotion;

smoothScroll.on("call", (value, way, obj) => {
  if (value === "serviceWebDigital") {
    serviceWebDigital = TweenMax.to($(".arrow-service-1"), 1, { opacity: 1 });
  } else {
    serviceWebDigital = TweenMax.to($(".arrow-service-1"), 1, { opacity: 0 });
  }

  if (value === "serviceGraphicDesign") {
    serviceGraphicDesign = TweenMax.to($(".arrow-service-2"), 1, { opacity: 1 });
  } else {
    serviceGraphicDesign = TweenMax.to($(".arrow-service-2"), 1, { opacity: 0 });
  }

  if (value === "serviceMarketing") {
    serviceMarketing = TweenMax.to($(".arrow-service-3"), 1, { opacity: 1 });
  } else {
    serviceMarketing = TweenMax.to($(".arrow-service-3"), 1, { opacity: 0 });
  }

  if (value === "serviceVideoMotion") {
    serviceVideoMotion = TweenMax.to($(".arrow-service-4"), 1, { opacity: 1 });
  } else {
    serviceVideoMotion = TweenMax.to($(".arrow-service-4"), 1, { opacity: 0 });
  }
});

My issue is that when the elements enter in the viewport, the arrows appears fine. But when i scroll down then up, the arrows don't appear no more when the sections enter in the viewport. What am i missing?

Another issue is that i'd like to control when the elements appear. Right now, they appear right when the div elements enter the bottom of the viewport. Is there a way to create some "delay"? So they appear when the element is fully in the viewport for example?

EDIT : When looking at the live code, it appears that the class that is added by locomotive is-inview when elements enter the viewport doesn't disappear when the element is out of view. That might be part of the issue here..

Upvotes: 2

Views: 5631

Answers (1)

Kablooey Monster
Kablooey Monster

Reputation: 170

To quickly answer the questions about the "is-inview" class not being removed, you need to include the "data-scroll-repeat" attribute to the element.

eg: <div data-scroll data-scroll-repeat>content</div>

Regarding controlling when it triggers, I'd look at the data-scroll-offset="?, ?"

In the docs is says the 1st is bottom (when the elements enters) and 2nd is top (when the element exits). Can be a number for pixels or a percentage.

Hope that helps for part of your question at least.

Upvotes: 2

Related Questions