Devotee007 Posted February 28, 2022 Share Posted February 28, 2022 Hi, I'm trying to make a tooltip toggle just toggle then one I click on. But I can't get it to work. I don't get the child to a var in the timeline. This is as fas as I have gotten. Any tips on how get the variable to the timeline? const tl = gsap.timeline({reversed: true, paused:true}) .set(".HERE-I-WANT-THIS-CHILD-NAME", {display:"flex", y:5}) .to(".HERE-I-WANT-THIS-CHILD-NAME", {autoAlpha:1, y:0, duration: .3, ease:Expo.easeInOut}) function toggleTooltip(childTarget) { const thisChild = childTarget; tl.reversed() ? tl.play() : tl.reverse(); } const tooltip = document.querySelectorAll('.js-tooltip-wrapper'); for (let i = 0; i < tooltip.length; i++) { tooltip[i].addEventListener('click', function(e) { const parent = e.currentTarget.parentNode; const childTarget = parent.querySelector('.js-tooltip').classList[7]; toggleTooltip(childTarget); }); } //Devotee007 Link to comment Share on other sites More sharing options...
Solution Cassie Posted February 28, 2022 Solution Share Posted February 28, 2022 Hey @Devotee007 This example may help you? gsap.utils.toArray(".container").forEach(container => { let info = container.querySelector(".information"), silhouette = container.querySelector(".silhouette .cover"), tl = gsap.timeline({ paused: true }); tl.to(info, { yPercent: 0 }) .to(silhouette, { opacity: 0 }, 0); container.addEventListener("mouseenter", () => tl.play() ); container.addEventListener("mouseleave", () => tl.reverse() ); }); See the Pen PoqRZOB by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Devotee007 Posted February 28, 2022 Author Share Posted February 28, 2022 hey @Cassie, Thanks for the link, I will check it out and see if I can get it to work. 1 Link to comment Share on other sites More sharing options...
Devotee007 Posted February 28, 2022 Author Share Posted February 28, 2022 Thanks for your help @CassieIt worked out great! I ended up with this code, works great. gsap.set(".js-tooltip", {display:"none", autoAlpha: 0}); gsap.utils.toArray(".js-tooltip-wrapper").forEach(toolWrapper => { let tip = toolWrapper.querySelector(".js-tooltip"), tl = gsap.timeline({reversed: true, paused:true}) .set(tip, {display:"flex", y:5}) .to(tip, {autoAlpha:1, y:0, duration: .2, ease:Expo.easeInOut}) toolWrapper.addEventListener('click', function () { tl.reversed() ? tl.play() : tl.reverse(); }) }); 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