Jump to content
GreenSock

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

How to have an element that tweens, and then afterwards allows a CSS transition on hover

Recommended Posts

** I seem to have hit the back button when posting this so it has posted twice - feel free to delete the older version**

 

Hi

 

I have a tween where I am scaling a div with a class of .btn, which i'm scaling on its x-axis with scaleX. I also have a hover effect on this button after it has animated in, and on this hover I've put a CSS transition.  The CSS transition changes the behaviour of the tween and I've tried a few things to try and overcome this, but I'm getting nowhere.

 

My question therefore is, is there a way to have an element animated with greensock (in this case on pageload) and also allocate a CSS transition to the element for other interactions (i.e. a hover effect) after the animation has finished?


GSAP
TweenMax.to(".btn-scale", 1, {scaleX:1, delay: 1, ease:Linear.easeNone});

 

CSS

.btn {
  border-radius: 1px;
  padding: 1.2rem 2.2rem;
  letter-spacing: .5px;
  cursor: pointer;
 transition: 0.6s; 
  letter-spacing: 1px;
  background-color: #1D2F42;
  width: 200px;
}

 

/*for greensock*/

.btn-scale {
    transform-origin: left;
    transform: scaleX(0);
}

See the Pen yvRmwZ by emilychews (@emilychews) on CodePen

Link to post
Share on other sites

Hi @emilychews:)

 

I think my question would be why you want to mix GSAP with CSS transitions? It's generally not a good idea as you can create a fight for control of the element. Since you're loading GSAP anyway, couldn't you just use it to animate your hover state?

 

Happy tweening.

:)

 

  • Like 3
Link to post
Share on other sites

OK fair enough.  I assume the best way to do this with a simple mouseenter/ mouseleave tween?

Link to post
Share on other sites

Yep - that'll be fine.

 

I'd recommend creating one timeline with your animation and then play() on enter and reverse() on leave. That way nothing overwrites and gets stuck if you hover on/off too quickly.

 

Happy tweening.

:)

 

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

×