aok Posted March 6, 2020 Share Posted March 6, 2020 I'm attempting to allow that if the user hovers on one element, it then transitions the other elements (siblings). I'm doing this with mouseenter/mouseleave. const dev = {}; dev.interactions = { init: function() { this.bindEvents(); }, bindEvents: function() { let $filters = document.querySelectorAll("[data-filters] a"); $filters.forEach(function($filter) { let $filters = [ ...$filter.closest("[data-filters]").querySelectorAll("[data-filter]") ], $filterSiblings = $filters.filter(function(filter) { return filter !== $filter; }), filtering = gsap .to($filterSiblings, 0.4, { css: { color: "#ece9e2" } }) .pause(); $filter.addEventListener("mouseenter", function(e) { dev.interactions.filtersOnEnter(filtering); }); $filter.addEventListener("mouseleave", function(e) { dev.interactions.filtersOnLeave(filtering); }); }); }, filtersOnEnter: function(filtering) { filtering.play(); }, filtersOnLeave: function(filtering) { filtering.reverse(); } }; dev.interactions.init(); The issue is I think the timing out or start/stop of the animation? I've tried a variation of approaches but with each I can't seem to work out what's going wrong? Any pointers? See the Pen PoqOozR by johnthepainter (@johnthepainter) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 6, 2020 Share Posted March 6, 2020 Hey aok. I think you're overcomplicating things. I'd just use some tweens and make sure the tween for the hovered link has overwrite applied to it: See the Pen jOPabqd?editors=0010 by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
aok Posted March 9, 2020 Author Share Posted March 9, 2020 On 3/6/2020 at 1:23 PM, ZachSaucier said: I think you're overcomplicating things. As usual Thanks so much, Zach. This makes more sense! 1 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