Jump to content
Search Community

Play tween on scrollStop

jpfiorilla test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

 

 

Screen Shot 2017-06-16 at 11.03.05 AM.png

Link to comment
Share on other sites

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 ! :?

Screen Shot 2017-06-16 at 11.22.50 AM.png

Link to comment
Share on other sites

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.

 

 

 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...