Looping through svg elements

[BrownsFanForLife 27 Likes (Newbie)]

hi gang, i'm sure I'm missing "something" here.

In the codePen listed, only the 30,000 and 158,000 are "wired up" to execute action.

 

1. I want to loop through all the ".boxes" and only perform the animation for that button. , but I can't seem to figure out if I'm using the wrong tool.

2.  should I be using a forEach loop here?

3. Is this the best way to target child elements for my timeline?

 

 

 

Thanks in advance.

See the Pen jOzoVOX?editors=0110 by zenogy (@zenogy) on CodePen

[Cassie 5,411 Likes (Superhero)]

Heya!

 

I can't fork this unfortunately, but you're adding new tweens to the global timeline on every loop.

 

You probably want to separate out your timelines so you have one global timeline to control the houses and then manage the button animations inside that loop.

e.g.

 

const bigNum = document.querySelector(".big");
const buttonItem = document.querySelectorAll(".button");
const houseTimeline = gsap.timeline({ paused: true });

houseTimeline
  .to("#treeFarm g", {
    y: 200,
    scale: 2,
    stagger: 0.1,
    duration: 0.3,
    ease: "power4.inOut"
  })
  .to("#theVillage g", {
    y: 200,
    scale: 2,
    stagger: 0.1,
    duration: 0.3,
    ease: "power4.inOut"
  })
  .reverse();

buttonItem.forEach((item, index) => {
  if (index != index) {
    playPauseReverse();
  }

  const buttonClasses = item.querySelector("#textGroup");
  const buttonBackground = item.querySelector(".background");

  let buttonTl = gsap.timeline({ paused: true });

  buttonTl
    .to(buttonClasses, { opacity: 0 })
    .to(buttonBackground, { fill: "#C5E9FB" })
    .reverse();

  // for keyboard
  item.addEventListener("keypress", () => {
    playPauseReverse();
  });
  //   for mouse
  item.addEventListener("click", (e) => {
    playPauseReverse();
  });

  function playPauseReverse() {
    houseTimeline.reversed(!houseTimeline.reversed());
    buttonTl.reversed(!buttonTl.reversed());
  }
});

 

[BrownsFanForLife 27 Likes (Newbie)]

Hi Cassie, I think this is going to get me there.  I really appreciate it.  I'm going to put a more generic demo out as soon as I get it working so that people can fork it.  I'm just a bit panicked right now, so I just threw up what I was "actually" working on.  Sigh...  I see what you did here by breaking them out and checking for reversed on the shared animation.  

[BrownsFanForLife 27 Likes (Newbie)]

Ok, I ditched the first pen and replaced it.  Sorry for that. I used some of your code for the update

 

Update:

What I'm looking for is how do I make it so that when you click on the red box, it runs its own animation, but at the same time, alters the circle.  If I click on any other button, the circle reverses, THEN runs the box animation, then re-runs the circle.  Any button not clicked has to go back to its original state. I think I've been working this too long.

[Cassie 5,411 Likes (Superhero)]

Can you let me know exactly what the box animation is doing? If it's simple I'd probably just tween it dynamically and use overwrite modes instead of a timeline?

[BrownsFanForLife 27 Likes (Newbie)]

Well, the box would change color, the text would fade out.  Essentially that is all I'd want it todo. In my actual project it would also send some attribute data to another area of the application.

 

[Cassie 5,411 Likes (Superhero)]

Ok, sure - so it's probably best to think in terms of state rather than animation to start with.

Your boxes are either active or not active - if you work out that logic then you can base your animation off that.

Maybe something like...

See the Pen bGvXJed?editors=0011 by GreenSock (@GreenSock) on CodePen

[BrownsFanForLife 27 Likes (Newbie)]

Oh Cassie, thank you so much. There's  a lot to unpack here for me.  This gets me almost there, but I should be able to take it form here. There are so many different ways to skin a cat.  I love how you did this. It's so clean.  I'll post my final when I get it done. Thank you again for taking the time to show how these different options are available. I'm sure I'll have some follow up questions as to "why" certain choices were made.

[Cassie 5,411 Likes (Superhero)]

No worries at all, pop back if you get stuck, this kind of thing is fiddly!