[Play tween on scrollStop]

componentDidMount(){
    this.controller = new ScrollMagic.Controller();

    this.circleTween = TweenMax.to('.yellowHollowCircle', 2, { transform: `+=translateY(400px)`, ease: Power3.easeOut, paused: true });
    this.circleTimeline = new TimelineMax().add(this.circleTween, 0);

    // tells state if scrolling up/down
    this.circleScene = new ScrollMagic.Scene({ offset: 0, duration: 1 })
                                      .triggerHook(1)
                                      .on('update', e => {
                                          let { scrollPos } = e, { lastScrollPos } = this.state;
                                          let scrolling = lastScrollPos > scrollPos ? 'up' : 'down';
                                          this.setState({ lastScrollPos: scrollPos, scrolling });
                                      .addTo(this.controller);

    // on stopScroll event, execute arrow function callback
    scrollStop(() => {
        console.log('stopped scrolling ' + this.state.scrolling, this.circleTimeline.progress());
        this.circleTimeline.progress(0).play();
    })
}

 

 

I narrowed the code down to only what's going on to make it easier to read. On pageload, the `.yellowHollowCircle` moves 400px instantly, and scrolling up and down yields the logs below. Appreciate any help on this ! 

[Play tween on scrollStop]

see below

[Play tween on scrollStop]

see below

[Play tween on scrollStop]

Edit: See below for the most legible version of the code!

 

Hello,

 

I'm trying to play a tween whenever the user stops scrolling. Eventually I'll play from 0-1 on scrolling down, and from 1-0 on scrolling up. Currently I'm experiencing some unexpected behavior however. See the code below.

 

The `ScrollMagic.Scene` tells the component whether the user is scrolling up or down, and `scrollStop()` is calling the arrow callback whenever the user stops scrolling.

 

Contrary to my tween config, the scene ignores `paused: true` and moves `.yellowHollowCircle` 400px immediately on pageload (much faster than the 2 seconds it should be taking).

 

Scrolling up and down yields the console.logs seen in the attached screenshot, and no further movement. Do you understand why `.play(0)` is not playing the tween from the beginning like I expect?

 

const reverb = function(object, amount = 10, time = randomBetween(2, 3), timeMax){
    let tweenName = object + 'ReverbTween' + this._reactInternalInstance._debugID,
        sceneName = object + 'ReverbScene' + this._reactInternalInstance._debugID;

    if (!this.controller) this.controller = new ScrollMagic.Controller();

    if (timeMax) time = randomBetween(time, timeMax);

    this[tweenName] = TweenMax.to(object, time, { transform: `+=translateY(${amount}px)`, ease: Power3.easeOut, paused: true });
    this[sceneName] = new ScrollMagic.Scene({ offset: 0, duration: 1 })
                                      .triggerHook(1)
                                      .on('update', e => {
                                          let { scrollPos } = e, { lastScrollPos } = this.state;
                                          let scrolling = lastScrollPos > scrollPos ? 'up' : 'down';
                                          this.setState({ lastScrollPos: scrollPos, scrolling });
    					})
                                      .setTween(this[tweenName])
                                      .addTo(this.controller);
}

// just calls callback once user stops scrolling
const scrollStop = function ( callback ) {
    if ( !callback || Object.prototype.toString.call( callback ) !== '[object Function]' ) return;
    var isScrolling;
    window.addEventListener('scroll', function ( event ) {
        window.clearTimeout( isScrolling );
        isScrolling = setTimeout(function() {
            callback();
        }, 66);
    }, false);
};

class SuperFunTime extends React.Component {
    constructor(props) {
        super(props);
        this.reverb = globals.reverb.bind(this);
    }
    componentDidMount(){
          this.reverb('.yellowHollowCircle', 400, 2);
          globals.scrollStop(() => {
              console.log('stopped scrolling ' + this.state.scrolling, this['.yellowHollowCircle' + 'ReverbTween' + this._reactInternalInstance._debugID].progress());
              this['.yellowHollowCircle' + 'ReverbTween' + this._reactInternalInstance._debugID].play(0);
          })
      }
}