Lichay Posted July 5, 2020 Share Posted July 5, 2020 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 More sharing options...
Lichay Posted July 5, 2020 Author Share Posted July 5, 2020 plz help guys. Link to comment Share on other sites More sharing options...
GreenSock Posted July 5, 2020 Share Posted July 5, 2020 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. Link to comment Share on other sites More sharing options...
Lichay Posted July 5, 2020 Author Share Posted July 5, 2020 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 More sharing options...
Lichay Posted July 6, 2020 Author Share Posted July 6, 2020 help plz Link to comment Share on other sites More sharing options...
b1mind Posted July 6, 2020 Share Posted July 6, 2020 <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. 4 Link to comment Share on other sites More sharing options...
GreenSock Posted July 6, 2020 Share Posted July 6, 2020 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 1 Link to comment Share on other sites More sharing options...
b1mind Posted July 6, 2020 Share Posted July 6, 2020 @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. See the Pen NWxyLJO?editors=0110 by b1m1nd (@b1m1nd) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted July 6, 2020 Share Posted July 6, 2020 Sure, as long as you're not creating any conflicts where you have CSS and GSAP both trying to control the same properties of the same element. 1 1 Link to comment Share on other sites More sharing options...
Lichay Posted July 6, 2020 Author Share Posted July 6, 2020 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 More sharing options...
Lichay Posted July 6, 2020 Author Share Posted July 6, 2020 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 More sharing options...
GreenSock Posted July 6, 2020 Share Posted July 6, 2020 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()); 2 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 6, 2020 Share Posted July 6, 2020 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. 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 6, 2020 Share Posted July 6, 2020 @Lichay Please do not post extra times in threads saying "help please". We will answer your question as soon as we're able to Posting multiple times probably makes it less likely for us to answer, not more likely. 3 Link to comment Share on other sites More sharing options...
Lichay Posted July 6, 2020 Author Share Posted July 6, 2020 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now