Jump to content
Search Community

Turning tweens on and off

Amanda test
Moderator Tag

Go to solution Solved by PointC,

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 have a bit of a unique issue that I'm having trouble solving. 


The site I am working on is kind of like a big page, where the user mouses around and it explores the page. I got that working (the codepen example is severely simplified). 


There is also a second functionality - a traditional navigation menu that when the user uses it, they tween directly to the section of the site. I have this working as hoped as well, and the user can mix up using the menu and mousing around. 


It comes apart in the following situation. If the user chooses to navigate with the menu and then choose a menu item, and they activate their mouse while it's still tweening, it gets very confused and jumps around. 


I came up with what I thought was a clever idea (turns out it doesn't work :| ), which was have the tweens be of #sliding .row and on opening the menu, remove that outer div. Even though it does remove the div, the timeline still moves to the next label on the mouse events. 


Hhhm. I'm wondering if there's any way to disable a timeline temporarily. I tried.killTweensOf, but that doesn't really work, because what I want to do is temporarily disable the timeline so it doesn't respond to the mouse event. 


Thank you!

See the Pen oxRGKE by ald603 (@ald603) on CodePen

Link to comment
Share on other sites

Hello ald603,


One thing you could do is have a variable that keeps track of the state - animating or not - and toggle between the two. You'd set it to true on the event that causes the navigation go to a certain section, then set it false again once that animation has been completed using the callback. Then inside of the other listeners you'd have it check that state variable to see if it should animate or not. If the variable is true, do nothing. If it's false, let it animate normally.


Sorry I don't have time right now to show it on your code example

  • Like 1
Link to comment
Share on other sites

Hi ald603 :)


I didn't dig too far into your pen, but I think isActive() would take care of this for you. You can check if the timeline is currently active and prevent the mouse from doing anything if that is true.




See the Pen Pwzomo by GreenSock (@GreenSock) on CodePen


Hopefully that helps.


Happy tweening.


  • Like 3
Link to comment
Share on other sites

Hi, thanks for your responses. I'm a little confused about how to use :isActive. It seems like it could be really useful in many situations. 


If I make a tween a variable, for example:

var tween =  TweenLite.to($row, 2, {
      y: '-300%',
      x: '-0%',

How do I then call it on click?

  call the tween//


  • Like 1
Link to comment
Share on other sites

Sorry, I wasn't clear. Once I've made the tween a variable, how to do I make it actually tween? 

Something like this?


And on a side note, does :isActive also work for timelines?? 

Link to comment
Share on other sites

Thank you for all the info. I'm certain I'll be using :isActive for a lot of things. 


I ended up solving this issue by temporarily disabling the mouse wheel and then enabling it again onComplete. Like this: 

function disable() {
document.removeEventListener('mousewheel', Go);
document.removeEventListener('DOMMouseScroll', Go);

function enable() {
document.addEventListener('mousewheel', Go);
document.addEventListener('DOMMouseScroll', Go);
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...