Jump to content
Search Community

Hover animation

Davidstr test
Moderator Tag

Recommended Posts

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();
 
 
});
});

 

292505583_Kpernyfot2021-12-03-2_18_26.png.48a7320cd05220560dccc2bec454df25.png1301378637_Kpernyfot2021-12-03-2_18.26copy.png.0b5a8a9db1fa023b6b15b644db254736.png

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