Jump to content
Search Community

hover effect at css with gsap

Lichay test
Moderator Tag

Recommended Posts

I have a problem when i use gsap on element that i have a hover , The hover effect isn't influence anymore . like gsap block my hover effect 

how can I deal with it ?

I want both on my element scrollTrigger as gsap and regular hover animation effect.

 

Thank for support!

 

See the Pen QWyQrEm by lichaytiram (@lichaytiram) on CodePen

Link to comment
Share on other sites

2 hours ago, GreenSock said:

Welcome to the forums, @Lichay. We'd love to help, but unfortunately we can't troubleshoot blind. We have no idea what's going on in your project - can you please provide a reduced test case with only the necessary code to replicate the problem? A CodePen is best. 

ok, I update it 

Link to comment
Share on other sites

<div class="moveMe">

  <h1> Hi world </h1>

</div>

// then 

gsap.from('.moveMe',{
  opacity:0,y:200,duration:5
});

@Lichay

Your issue is in specificity. GSAP does not break your css, it is applying a inline transform to your element (cause that's what it does). So you need to split up your transform, maybe have gsap animate a parent element. Then have your hover on the h1.

 

  • Like 4
Link to comment
Share on other sites

Yep, @b1Mind is correct - you're creating CONFLICTING instructions. It's also a good example that shows why we tell people to always do your transforms via GSAP. Definitely don't mix them between CSS and GSAP. Rotation, translation, skewing, and scale are all smashed into ONE "transform" property in CSS whereas GSAP lets you animate them individually. 

 

I also noticed you applied a CSS transition in your hover which is another thing you should definitely avoid. Either use GSAP for your animation or CSS, not both. The transition will basically make any change that GSAP makes take a while to see because CSS is overriding it. For example, if GSAP sets a "y" translation on the element to 100px but it has a CSS transition applied of 1s, that means that instead of taking effect right away, it'll take a whole second to do that. And GSAP sets things at roughly 60 times per second...so all of those changes are gonna get delayed. Not good. 

 

I assume this is what you were looking for?: 

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

 

 

 

  • Like 1
Link to comment
Share on other sites

6 hours ago, GreenSock said:

Yep, @b1Mind is correct - you're creating CONFLICTING instructions. It's also a good example that shows why we tell people to always do your transforms via GSAP. Definitely don't mix them between CSS and GSAP. Rotation, translation, skewing, and scale are all smashed into ONE "transform" property in CSS whereas GSAP lets you animate them individually. 

 

I also noticed you applied a CSS transition in your hover which is another thing you should definitely avoid. Either use GSAP for your animation or CSS, not both. The transition will basically make any change that GSAP makes take a while to see because CSS is overriding it. For example, if GSAP sets a "y" translation on the element to 100px but it has a CSS transition applied of 1s, that means that instead of taking effect right away, it'll take a whole second to do that. And GSAP sets things at roughly 60 times per second...so all of those changes are gonna get delayed. Not good. 

 

I assume this is what you were looking for?: 

 

 

 

 

 

so I need to do it only from my typescript ?

 

and how can I do it without foreach ?  because I need it only for one element and foreach a litle overkill

thank for help

Link to comment
Share on other sites

6 hours ago, b1Mind said:

@GreenSock Is it still an ok practice to do simple CSS transitions with no transforms? And still be animating the element with Gsap ? 

 

like even if its a pseudo like so? cause JS and pseudo don't get along well.

 

 

 

it ins't on same element

Link to comment
Share on other sites

1 hour ago, Lichay said:

and how can I do it without foreach ?  because I need it only for one element and foreach a litle overkill

 

let h1 = document.querySelector("h1"),
    hover = gsap.to(h1, {scale: 1.12, color: "blue", duration: 1.5, paused: true, ease: "power1.inOut"});

h1.addEventListener("mouseenter", () => hover.play());
h1.addEventListener("mouseleave", () => hover.reverse());

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

7 hours ago, b1Mind said:

like even if its a pseudo like so? cause JS and pseudo don't get along well.

In general we recommend using "real" elements instead of pseudo-elements so that GSAP can have full control over the element. With that being said GSAP is great at animating CSS variables and can even animate the actual CSS style rules themselves using CSSRulePlugin.

  • Like 2
Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

In general we recommend using "real" elements instead of pseudo-elements so that GSAP can have full control over the element. With that being said GSAP is great at animating CSS variables and can even animate the actual CSS style rules themselves using CSSRulePlugin.

with CSSRulePlugin. have some problem at angular indicate ::before and :: after

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