CODEWITHSUNDEEP
javascriptjquerycssanimationscrollmagic
andersts
andersts

Reputation: 61

Scroll-Magic - Stop animation from replaying?

I've been learning how to implement more animations on my sites. I was trying to figure out this code because it is similar to the animation I want to implement but I can't seem to wrap my head around it. Ideally, I want the animation to play just once so the elements don't disappear when I scroll back up. But, I can't figure out what's making the animation "reverse" when you scroll back up.

How can I change up the code to do this?

thanks

// init
var controller = new ScrollMagic.Controller();

// loop 
$('.reveal_main').each(function() {
      var loaderInit = new TimelineMax();

      // tween variables
      if ($(this).hasClass('left')) {
        var imgSet = 20,
          imgBlockFrom = -101,
          imgBlockTo = 101,
          contTextSet = -30,
          textBlockStaggerFrom = 101,
          textBlockStaggerTo = -101;
      } else {
        var imgSet = -20,
          imgBlockFrom = 101,
          imgBlockTo = -101,
          contTextSet = 30,
          textBlockStaggerFrom = -101,
          textBlockStaggerTo = 101;
      }

// build a tween
  loaderInit
    .set($(this).find('.reveal_cont-img'), {autoAlpha:1,xPercent:imgSet},0)
    .from($(this).find('.reveal_block-img'), 0.325,{xPercent:imgBlockFrom, ease:Power1.easeOut})
    .set($(this).find('.reveal_img'), {autoAlpha:1})
    .to($(this).find('.reveal_block-img'), 0.225,{xPercent:imgBlockTo, ease:Sine.easeOut})
    .set($(this).find('.reveal_cont-text'), {autoAlpha:1,xPercent:contTextSet},0.3)

    // stagger text blocks and text
    .staggerFromTo($(this).find('.reveal_block'), 0.7, {xPercent:textBlockStaggerFrom, ease:Power1.easeOut}, {xPercent:textBlockStaggerTo, ease:Power1.easeOut},0.25)
    .add('blocksEnd')
    .staggerTo($(this).find('.reveal_text'), 0.1, {autoAlpha:1},0.25,'blocksEnd-=0.75')

//  build a scene
  var scene = new ScrollMagic.Scene({
    triggerElement: this,
    triggerHook:'onEnter',
    offset:700

  })
  .setTween(loaderInit)
  .addTo(controller)  
});

Here's the codepen: https://codepen.io/tayanderson/pen/POVEVJ

Upvotes: 2

Views: 1719

Answers (1)

andersts
andersts

Reputation: 61

I figured it out. All I had to do was add reverse: false when building the scene.

  var scene = new ScrollMagic.Scene({
    triggerElement: this,
    triggerHook:'onEnter',
    offset:700,
    reverse: false   
})

Upvotes: 3

Related Questions