title: Show element when in viewport (Locomotive Scroll)
body: <p>I'm using <a href="https://github.com/locomotivemtl/locomotive-scroll" rel="nofollow noreferrer">Locomotive Scroll</a> on a website. What i try to achieve is the following : when a section with the id <code>#mysection</code> is in the viewport, i'd like an icon to appear, then disappear when the section is out of the viewport. </p>
  
  <p>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 : </p>
  
  <pre><code>&lt;!-- Using jQuery events --&gt;
  &lt;div data-scroll data-scroll-call="EVENT_NAME"&gt;Trigger&lt;/div&gt;
  </code></pre>
  
  <p>then in the javascript file :</p>
  
  <pre><code>import LocomotiveScroll from 'locomotive-scroll';
  
  const scroll = new LocomotiveScroll();
  
  scroll.on('call', func =&gt; {
      // Using modularJS
      this.call(...func);
      // Using jQuery events
      $(document).trigger(func);
      // Or do it your own way 
  });
  </code></pre>
  
  <p>So what i did is the following :</p>
  
  <pre><code>let serviceWebDigital;
  let serviceGraphicDesign;
  let serviceMarketing;
  let serviceVideoMotion;
  
  smoothScroll.on("call", (value, way, obj) =&gt; {
    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 });
    }
  });
  </code></pre>
  
  <p>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?</p>
  
  <p>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? </p>
  
  <p>EDIT :
  When looking at the live code, it appears that the class that is added by locomotive <code>is-inview</code> when elements enter the viewport doesn't disappear when the element is out of view. That might be part of the issue here..</p>