Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Maximilianwte

Play One Step of Timeline on Mouse Scroll

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

Hey,

 

I am desperately searching for a way to play one step of my timeline when the a mouse scroll gets started. All methods that I have found trigger the events multiple times on scroll and gsap gets really confused.

Is there a convient way to build something like that with greensock?

 

What I want to build is a animation triggered webapp like these:

https://theshift.tokyo/

http://www.contiducco.it/index.php?route=common/home

 

My Code at the moment:

 

$(window).bind("mousewheel DOMMouseScroll", function(event) {
      var docTimeline = new TimelineLite({ paused: true });
      docTimeline.add(TweenLite.to(".lightLogo", 1, { y: "200%" }));
      docTimeline.add(TweenLite.to(".text", 1, { x: "0%" }));
      // Events when scrolled down.
      if (
        event.originalEvent.wheelDelta < 0 ||
        event.originalEvent.detail > 0
      ) {
        docTimeline.play();
      } else {
        docTimeline.reverse();
      }
    });

 

Link to post
Share on other sites

Ah! what your code does at the moment, if I'm not mistaken, is create a new timeline for each scroll event – and there can be hundreds or thousands of scroll events per second when the user is scrolling! I assume you don't want thousands of identical timelines :)

 

First of all, you should create your timeline outside of the scroll function. Just create it anywhere and make it paused, like you're doing now.

By the way, instead of what you have, you can use this:

docTimeline.to(".lightLogo", 1, { y: "200%" })
  .to(".text", 1, { x: "0%" });

 It's exactly the same thing, just saves you some typing.

 

Inside your timeline, use addPause() to automatically pause it at certain points.

 

Then, when the user scrolls, use resume() to unpause it :) To change the direction it's playing in (depending on whether the user is scrolling up or down), you can use reversed(). That should be enough.

 

Lastly, have a look online at the concept of throttling and debouncing, to limit the amount of events that do get handled (there's no reason to have so many per second, you can ignore most of them without anyone noticing). Here's a recent post of mine about it:

https://greensock.com/forums/topic/18197-gsap-slider-over-scroll/?tab=comments#comment-83832

  • Like 8
Link to post
Share on other sites

Oh, by the way, .bind() has been deprecated for quite a long time now, as the jQuery documentation states.

 

I don't know if you're following a tutorial but if you are, maybe you wanna look for a more recent one :)

  • Like 3
Link to post
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.

×