Jump to content
Search Community

refresh gsap cached values on mouseenter

ynamite test
Moderator Tag

Recommended Posts

Hi

 

I've got a question in regards to refreshing gsap's cashed values on mouseenter. I can provide a codepen if it helps, but it's quite simple to explain I think.

 

In a responsive Website I have an image and a DIV with a white background that appears when you mouse over the image, simply covering it.

The DIV slides in from left to right using xPercent and on mouseleave, the element animates back to xPercent 0. I'm using CSS to set the initial state of the DIV using transformX(-100%).

 

$element.parent().on('mouseenter', function(){
  gsap.fromTo($element, { xPercent: -100 }, { xPercent: 0, duration: 1 });
});

$element.parent().on('mouseleave', function(){
  gsap.fromTo($element, { xPercent: 0 }, { xPercent: -100, duration: 1 });
});

The problem arises when the width of the viewport changes, as the inline style values are not refreshed.

I'd like for gsap to either recalculate all necessary properties before the mouseenter event or to recalculate on resize; although I'd prefer the former, as window.resize is quite expensive in my experience. I could debounce the event but still, I'd like to avoid meddling with that if possible. Unless it isn't of course.

 

Any ideas? I've tried clearProps "all" but that doesn't refresh gsap's cached values, I've tried using kill, killTweensOf and a few other things, but I feel like I'm missing something simple. Thanks!

Link to comment
Share on other sites

Hey ynamite. 

 

55 minutes ago, ynamite said:

I can provide a codepen if it helps, but it's quite simple to explain I think.

It might be easy to understand but a minimal demo is always helpful because then we can show how to fix it more easily :) 

 

As said in the most common GSAP mistakes post, when it comes to animations fired by user interactions it's almost always best to create your animations beforehand and use control methods inside of the event callbacks. In your situation not only would that be more performant regardless of whether or not someone resizes (though you'd likely never notice in practice) and make your animation more smooth if people hover and unhover quickly, but it will also help your resize issue. It helps with resize because you can recreate the tweens as necessary on resize, use the same variable reference, and your event listeners don't have to change.

 

With that being said, xPercent/yPercent should automatically adjust to resizing so I am curious if the code you provided is actually representative of your situation.

 

Here's a basic demo (notice that the resize listener is commented out because it's not necessary in this case):

See the Pen NWxZMmd?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

@ZachSaucier

 

I think I've figured out what the problem is. When the initial state of the element is set with CSS the xPercent/yPercent values get screwed up after resizing the viewport. When I set the initial state with gsap, everything works as it should. See your modified pen for an example of this:

See the Pen WNrqyZM by ynamite (@ynamite) on CodePen

 

Concerning your pen and the "most common mistakes" post, I did try to do it with a paused timeline but had two issues, the first being the same as the problem mentioned above with the translate values getting screwed up and secondly I didn't want my animation to simply reverse on mouseleave, I wanted the easing to be the same as on mouseenter and not have it be reversed also.

I realize I could probably manage to do this by defining a timeline with two different transition with different labels, one for mouseover and one for mouseout, and calling the respective label on mouseenter/mouseleave. Yes?

Link to comment
Share on other sites

5 minutes ago, ynamite said:

When the initial state of the element is set with CSS the xPercent/yPercent values get screwed up after resizing the viewport.

Not setting all of the transforms with GSAP is another of the most common mistakes :) See, that shows why a demo is useful! 

 

6 minutes ago, ynamite said:

I didn't want my animation to simply reverse on mouseleave, I wanted the easing to be the same as on mouseenter and not have it be reversed also.

I realize I could probably manage to do this by defining a timeline with two different transition with different labels, one for mouseover and one for mouseout, and calling the respective label on mouseenter/mouseleave. Yes?

Correct, you can do it if you want a different outro animation but there are less benefits (though I'd argue that it's still better to use a single timeline).

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