Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Davidstr

Hover animation

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

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

 

  • Like 1
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.
×