2

All I want to do is add a class to a div the first time it scrolls into view, then keep it there. (So, I don't want to toggle it - just fire it once). I have an animation that's based on adding a class to the parent div, and even though I specified a direction, when I check it in inspector, it's still removing the class on the reverse scroll. I don't want the animation to run every time it's scrolled over, but only the FIRST time (and then stay there in the completed-animation state).

var controller = new ScrollMagic.Controller();

var scene = new ScrollMagic.Scene({
triggerElement: '#intro',
offset: 50
})
.on("start", function(e) { 
    if (e.scrollDirection === "FORWARD") {
        $('#welcome').addClass('animated');}
    })
.addTo(controller);

I did try adding a duration but it had no effect. Any suggestions?

NayDreams
  • 55
  • 1
  • 6

1 Answers1

9

Yes, you can add the .reverse(false) in your scene. This will make the animation happen only one time, so if you scroll back up it won't toggle the class off.

Here is an example of how to use it and a link below to a very simple demo using it. Also for even more information here is another link to the documentation.

reverse(false)

$(document).ready(function(){
  var controller = new ScrollMagic.Controller();

  var scene = new ScrollMagic.Scene({
    triggerElement: '.title',
    triggerHook: .6
  })
  .setClassToggle('.title', 'animate')
  .reverse(false)
  .addIndicators()
  .addTo(controller);

});

CodePen Demo

Brian
  • 114
  • 3
  • 1
    Are there any reasons this will not work? I have the same situation, text has `opacity: 0` by default, I add the `visible` class by `setClassToggle` function and set `reverse: false` for the scene, but class removed just the scene ends. – zhrivodkin Oct 14 '19 at 11:11
  • 2
    @zhrivodkin If it helps, I removed the `duration` property which was in the scroll magic example on their website. That was removing the `visible` class even with `reverse: false` – heatherhtml Oct 23 '19 at 15:23
  • @heatherhtml yes removing the `duration` and `reverse: false` works properly! Thank you very much! – zhrivodkin Oct 30 '19 at 12:17
  • if you change width of window it's will be disappeared – wokalek Sep 08 '20 at 13:11