Jump to content
GreenSock

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

disabling pointer-event with timelineLite

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 post
Share on other sites

Don't know. It works correctly outside of the timeline. It even works correctly setting it in a tween using the timeline's onStart callback.  Is it absolutely necessary to be setup like that? 

Link to post
Share on other sites

not really. Is there a neat way of doing an 'onstart' like - 
 
let tl = new TimelineLite({paused: true});
 

tl.onStart( //change css )

 .to( ... )

 .to( ... )

Link to post
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 post
Share on other sites

Specifically I'm working on preventing a hover animation from firing after a click animation has fired. Its for a web app for primary teachers. I'm all for Firebase as well.

  • Like 1
Link to post
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 post
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 post
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 post
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 post
Share on other sites

If that is the case you can just make the mouseout event null in your click handler

 

See the Pen yOjOQJ by jonathan (@jonathan) on CodePen

div.onclick = function() {
  	console.log('click!');
	div.classList.add(`nopointer`);
	div.onmouseout = null;
        div.onmouseleave = null;
};

And to play it safe you can also make mouseleave null as well.

 

:)

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.

×