Jump to content
Search Community

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

emilychews 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

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