Shutt90 Posted February 17, 2022 Share Posted February 17, 2022 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 More sharing options...
Solution Dipscom Posted February 17, 2022 Solution Share Posted February 17, 2022 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(); }); }); 3 Link to comment Share on other sites More sharing options...
Shutt90 Posted February 17, 2022 Author Share Posted February 17, 2022 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 More sharing options...
Dipscom Posted February 17, 2022 Share Posted February 17, 2022 Glad to be of assistance. May you go forth and animate! 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