Play tween on scrollStop

[jpfiorilla 0 Likes (Newbie)]

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);
          })
      }
}

 

 

[jpfiorilla 0 Likes (Newbie)]

see below

[jpfiorilla 0 Likes (Newbie)]

see below

[jpfiorilla 0 Likes (Newbie)]

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 ! 

[Carl 9,720 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

Very hard to read that code (or any) and imagine how you intend it to work and how it is currently breaking. It really helps to see a demo in an environment that we can explore, edit, and fix the code, like jsFiddle or preferably CodePen: 

 

 

However, it really seems this question is related to Scrollmagic and the way it is handling the scroll events. I don't really use ScrollMagic and GreenSock does not support it. Might be best to head over to their github page and file an issue.

 

If you can clearly illustrate an issue you are having with GSAP we will do our best to help.