ScrollMagic - Add class permanently, not remove when scrolling back up

Question

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?

Answer 1

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