qqignatqq Posted December 5, 2019 Share Posted December 5, 2019 Hello. In addition to the animation, I want to add a style property for the class: "pointer-events: none". I did it like this: gsap.to(document.querySelector('.contfeed'),{duration:0.5, opacity:0.1, onComplete:function() {document.querySelector('.contfeed').style.pointerEvents = "none";} }) It works, but I wanted to ask, is this the right decision? Link to comment Share on other sites More sharing options...
GreenSock Posted December 6, 2019 Share Posted December 6, 2019 @qqignatqq did you want to only apply that at the END of the animation? Or the start? Or only during the animation and then remove it after? By the way, you never need to use document.querySelector() to feed something into GSAP - it uses document.querySelectorAll() under the hood when you pass in selector text as the target. If you don't mind pointerEvents being set to "none" at the start of the tween, you could do: gsap.to('.contfeed', { duration: 0.5, opacity: 0.1, pointerEvents: "none" }); Or if you want it to only happen at the end, you could use an onComplete: gsap.to('.contfeed', { duration: 0.5, opacity: 0.1, onComplete: function() { this.targets()[0].style.pointerEvents = "none"; } }); Or a timeline: gsap.timeline().to('.contfeed', { duration: 0.5, opacity: 0.1 }).set('.contfeed', {pointerEvents: "none"}) Or keyframes: gsap.to('.contfeed', { keyframes:[ {duration: 5, opacity: 0.1}, {pointerEvents: "none"} ] }); Lots of options 4 1 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