Jump to content
Search Community

disabling pointer-event with timelineLite

BradLee 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

Hi all,
 
I have a timelineLite that disables pointer-events on a div. When the div is clicked, it fires the timeline.
This works except that it allows 1 final 'mouseout' event after pointer-events should have been disabled.
 

let div = document.querySelector(`div`);
 
div.onclick = function() {
  console.log('click!');
tl.play();
};
 
div.onmouseout = function() {
  console.log('mouseout!');
};
 
let tl = new TimelineLite({paused: true});
tl.set(div, {css: {pointerEvents: `none`}})

 
Any ideas?

See the Pen EKEMeG by BradLee (@BradLee) on CodePen

Link to comment
Share on other sites

You can set the onStart callback to do that...

let tl = new TimelineLite({ paused: true, onStart: () => {
    TweenLite.set(foo, { x: 100 });
    TweenLite.set(bar, { y: 100 });
  }})
  .to(foo, 1, { x: 0 })
  .to(bar, 1, { y: 0 });

But that might cause unexpected behavior, especially if the timeline repeats.

 

So about how I said I could get it the pointer event behavior working correctly outside of the timeline... yeah, it's not working anymore. Don't know what happened. However, I did come up with a way to prevent it. The div doesn't have pointer events when the mouseout event is fired. So weird. 

 

See the Pen VaXNxP?editors=0011 by osublake (@osublake) on CodePen

 

This kind of reminds of this thread. It was a huge debate about how onDragEnd should fire when you disable Draggable while dragging. So it looks like the same thing is happening here. It's registering the mouse as being inside the div, but when you remove the pointer events, it's clearing off the mouseout event.

 

http://greensock.com/forums/topic/11812-draggable-pause/

 

You don't have to answer this, but I'm curious what you're working on. I noticed you had Firebase loaded up, and I'm a huge fan of that.

  • Like 3
Link to comment
Share on other sites

What I did should work. Do you re-enable the pointer events again? You could also do something like checking if an animation is active or getting the tweens for an element. So if the click animation is playing, you would ignore the hover animation.

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/isActive/

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/getTweensOf/

  • Like 1
Link to comment
Share on other sites

ahh those 2 methods will come in handy. Once the click animation is complete, pointer events are re-enabled on the button that was previously clicked. Animations are triggered using subscriptions to events (using reactive programming). 

Link to comment
Share on other sites

I modified the code and it shows that the issue isn't with gsap. When using vanilla js a final 'mouseout' event will still fire after pointer-events have been disabled. I posted on stake overlfow, see if anyone there can shed some light on it.

 

See the Pen grzrOz by BradLee (@BradLee) on CodePen

 

.nopointer{
  pointer-events: none;
}

 

let div = document.querySelector(`div`);
 
div.onclick = function() {
  console.log('click!');
div.classList.add(`nopointer`);
 
};
 
div.onmouseout = function() {
  console.log('mouseout!');
};
Link to comment
Share on other sites

Hello BradLee,

 

Just my two cents.. and to add to Blake's great advice!

Another way to prevent a hover animation from firing after a click animation has fired is to just add a class css rule that has pointer-events:none .. after the first click. Basically having that associating that class with the pseudo class :hover

You can add can just add the class inside your custom event handler.

For example a simple CSS rule like this:

div.nopointer:hover {
    pointer-events: none;
}

So you just add the class nopointer on the first click. And then when you hover over the div the pointer-events will be disabled with the value of none! Bada Bing...

:)

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