Jump to content
GreenSock

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

Only zoom in into image hovered upon doesn't quite work

Go to solution Solved by OSUblake,

Recommended Posts

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

  • Solution

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 5
Link to comment
Share on other sites

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

  • Like 2
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.

×