Jump to content
Search Community

Trigger this toggle, not all

Devotee007 test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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

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