Davidstr Posted December 3, 2021 Share Posted December 3, 2021 Hi! I'm kinda new in the whole javascript thing, and I need a little help. I want to make a hover animation, when I hover on the "works" text, I want my image to disappear, but after that it doesn't come back The text class is ".works" and the image is ".col-one". I found this code in the forum, but I can't figure out the reverse function. let box = document.querySelector(".works"); box.addEventListener( "mouseover", () => { let droop = document.querySelectorAll(".col-one") let droopy = gsap.utils.toArray(droop); droopy.forEach( function(droop){ let move = gsap.to(droop, { opacity: 0, duration: 1, ease: "power1.out",}) move.reversed(true); move.play(); }); }); Link to comment Share on other sites More sharing options...
OSUblake Posted December 3, 2021 Share Posted December 3, 2021 Welcome to the forums @Davidstr If you want to toggle an animation by hovering, it's usually best to create your animation outside of the listener, kind of like this. See the Pen yLzNRKP by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
Davidstr Posted December 3, 2021 Author Share Posted December 3, 2021 Thank you very much! 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