Jump to content
Search Community

Looping through svg elements

JasonD test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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());
  }
});

 

Link to comment
Share on other sites

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.  

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 2
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...