jiggy1965 Posted September 14, 2021 Share Posted September 14, 2021 Here is what I'm trying to do. I've added an eventlistener on a class. As I'm having multiply divs with a centered image. When I'm hovering on that div/image, the image inside that particular div should zoom in a bit. And back again when the mouse leaves that div. I've tried to do that, but when I hover on any div/image, all the images in all divs zoom in and out, not only the image which is hovered on. I guess I could duplicate multiple functions. One for wrapimage1, wrapimage2, wrapimage3 etc., but of course I wish to use only one mouseenter/mouseleave function and only have 'animation' played on the wrapimage which is hovered over. Can't figure out how I could pick up on which wrapimage is being hovered over so that animation.play() only runs on that particular wrapimage. Can anyone help me out? Probably something stupidly easy See the Pen PojKyvp by coder1965 (@coder1965) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted September 14, 2021 Solution Share Posted September 14, 2021 You need to move the creation of the animation inside the forEach. document.querySelectorAll(".wrapimage").forEach(function(element) { var animation = gsap.timeline({ paused: true }); animation.to(element, {scale: 1.5, duration: .5, ease: "power1.inOut"}); element.addEventListener("mouseenter", function () {animation.play();}); element.addEventListener("mouseleave", function () {animation.reverse();}); }); 5 Link to comment Share on other sites More sharing options...
jiggy1965 Posted September 14, 2021 Author Share Posted September 14, 2021 8 minutes ago, OSUblake said: You need to move the creation of the animation inside the forEach. document.querySelectorAll(".wrapimage").forEach(function(element) { var animation = gsap.timeline({ paused: true }); animation.to(element, {scale: 1.5, duration: .5, ease: "power1.inOut"}); element.addEventListener("mouseenter", function () {animation.play();}); element.addEventListener("mouseleave", function () {animation.reverse();}); }); Like I said, 'stupidly easy' Thanks! See the Pen zYzdMvQ by coder1965 (@coder1965) on CodePen 2 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