Jump to content
GreenSock

Shutt90

Issue with mouseover or callback functions

Go to solution Solved by Dipscom,

Recommended Posts

Not sure what's going on here, could be the onComplete because I haven't used it before. But when I'm hovering some are sticking open when I've left the element and also sometimes they glitch out completely and just get stuck without the text and are no longer interactable.

 

I wondered if there was a check I could add see make sure the cycle completes and queues reverse or something similar? Or any other suggestions would be great

See the Pen ZEavpwW by shutt90 (@shutt90) on CodePen

Link to comment
Share on other sites

  • Solution

Hey Shutt90,

 

Is there a reason why you aren't using a timeline in this case? That's exactly what timelines are for, to queue tweens and control them easily. You can do so much with a simple timeline, you'd be amazed at the simplicity of it.

 

See here an example of the many ways you could organise your code using a timeline based on the code you provided:

 

const getProjects = document.querySelectorAll('.projects_container-outer');

function tweenIn (target) {
  const overlay = target.querySelector('.projects_container-overlay');
  const text = target.querySelector('.text');
  const tl = gsap.timeline({ paused: true });
  
  tl.to(overlay, {
    width: '100%',
    opacity: 100,
    duration: 0.3,
    backgroundColor: 'rgba(94, 59, 83, 0.8)'
  });
  
  tl.from(text, {
    opacity: 0,
    x: 150,
    duration: 0.3
  });
  
  return tl;
}

getProjects.forEach(project => {
  
  const animation = tweenIn(project);

  project.addEventListener('mouseenter', function(e) {
    animation.play();
  });

  project.addEventListener('mouseleave', function(e) {
    animation.reverse();
  });

});

 

  • Like 3
Link to comment
Share on other sites

Amazing, always wondered about the timelines on GSAP but never really thought to dissect them. Thank you for sending that it's a great help to see it being used in something familiar, I can finally wrap my head around it.

Link to comment
Share on other sites

Glad to be of assistance. :)

 

May you go forth and animate!

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