Jump to content
Search Community

Is there a way to detect if the animation is going forwards or backwards?

sborrowman 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

I'm running an animation that creates a div with a span in it that clones it and moves it 5 degrees to the right every time it fires while scroll down. Then removes them one at a time while scrolling up. The problem is, right now I'm just detecting which direction you are scrolling on the mouse which causes a few issues. What I want to do is change it so it creates while the animation is moving forward and removes while the animation is moving backwards.

 

I'm hoping that I can some how do an onUpdate check that tells what direction the animation is moving and I would think that is built in since you can check the onreverseComplete.

 

Any help would be appreciated.

 

This is how my code is so far:

$(window).bind('mousewheel', function(event) {
 if (event.originalEvent.wheelDelta >= 0) {
  scrollDirection = 'up'
 }
 else {
  scrollDirection = 'down'
 }
});

 obj.lifecycleDots = function() {
 var addDot = '<div class="lifecycle-dot"><span></span></div>';

 if (scrollDirection == 'up') {
  rotation = rotation + -5;
  $('.lifecycle-dot').last().remove();

 } else if (scrollDirection == 'down') {

  if ( $('.lifecycle-dot').length < 72) {

   rotation = rotation + 5;
   var addedDot = $(addDot).css({
 WebkitTransform: 'rotate(' + rotation + 'deg)'
   });
   $('#content-lifecycle-button').append(addedDot);
  }

 }
}

 

I should also mention that I am using the superscrollorama plugin with this as well..

Link to comment
Share on other sites

Hi,

 

If you are using the mouse directly or a TweenLite to change the totalProgress() value of a TimelineMax the problem is that the TimelineMax isn't play()-ing or reverse()-ing, most likely it's paused(). You are just repeatedly setting a new totalProgress() value.

 

I imagine you could use your onUpdate to repeatedly check to see if the new totalProgress is greater than or less than a previously recorded totalProgress value.

 

something like:

http://jsfiddle.net/geekambassador/YH6q6/

Link to comment
Share on other sites

That seems to do the trick! Thanks a lot! Though, I still have another issue that I need to figure out.

 

Because I'm running the animation through an object instead of actually tweening something, I need someway to make sure that it runs through the object the exact number of times that I need it to instead of it just running through the time amount I have set. Right now I have the code set like this.

tl.to(obj, 1,
  {lifecycleDots: 300, onUpdate: function() {
   var currentProgress = tl.progress();
   if (currentProgress > progress) {
 scrollDirection = 'down'
   } else {
 scrollDirection = 'up'
   }
   progress = tl.progress();

  }})

I'm actually not entirely sure what the 300 number is doing but I need a number there for it to work. What I need though, is this will run a total of 72 times for the whole animation and I need it to always reserve the exact same number of times. Meaning, if you stop scrolling and it only runs 20 times I need it to reverse exactly 20 times before the previous animation runs if you scroll upwards or continue from 20 and got 52 more times until the next animation runs.

Link to comment
Share on other sites

I think I'm getting a little confused. I don't know what you mean by "it running 72 times" are you referring to the function that clones dom elements?

 

If you need to lock a certain number of function calls into your timeline you can use TimelineMax's addCallback() method.

 

I made an example that shows dom elements being added when the timeline is moving forward and removed when it is moving backwards. You might not need separate functions for determining the direction and modifying the dom, check this out:

 

http://jsfiddle.net/geekambassador/dwg9w/

Link to comment
Share on other sites

I think I was over complicating my animation. The reason I needed it to run 72 times is because I was creating a circle of dots. There are 72 dots in the full circle. I was trying to animate the function that was creating the dots but then I realized it is much easier to just create them all at once and put them at 0 opacity. Now I can run a function that counts up the index of my dots and fades the opacity in on a timeline that counts up with the index.. This seems to take care of all the problems I had and makes my code much simpler.

 

Thanks for your help.

I'm sure I will be back on these forums again when I'm stuck on something else!

Link to comment
Share on other sites

For the record, there is a "reversed()" method that returns true if the animation has been reversed (like if you had called reverse() on that instance) and false if it's running forward. Keep in mind, however, that if you reverse a tween's parent timeline, that does NOT alter the tween's orientation (that is intentional). In other words, if the parent timeline is running backwards and you check the tween's reversed(), it would still say false even though it may look like it's running backwards but that's only because its parent timeline's playhead is going the opposite direction.

 

So in summary, you can see if a specific instance is reversed like this:

 

if (myTween.reversed()) {
   //is reversed.
}

Link to comment
Share on other sites

What I ended up doing is changing my function a bit. I was trying to create and remove the divs as your scrolled forwards and backwards, now I'm changing the opacity of them.

lifecycleDots = function() {
  var addDot = '<div class="lifecycle-dot"><span></span></div>';

  for (var i = 0; i < 72; i++) {
   rotation = rotation + 5;
   var addedDot = $(addDot).css({
 WebkitTransform: 'rotate(' + rotation + 'deg)'
   });
   $('#lifecycle-dots-wrapper').append(addedDot);
   t1.to($('.lifecycle-dot:eq('+i+')'), .01, {css:{opacity: 1}})
  }
 }

This way I have all 72 dots on the page but with css I put the opacity at 0. It also adds all 72 dots into a long timeline without having to repeat the code over and over. It works exactly how I need going forwards and backwards.

Of course the next part of the animation I need might be a little more complicated. Hah!

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...