Jump to content
Search Community

How do I create an animation for an object that doesn't exist yet?

qqignatqq test
Moderator Tag

Recommended Posts

What if I need to animate a list of objects with the class "error", but they just got that class? 

To clarify. I have a form. It is sent to the server. If the data didn't pass validation, I get a list of input names returned. I need to animate their parents. What do I do with selecting an animated object if it doesn't already exist? I thought I could assign a .error class, issue it to everyone, and then animate it, but if the object doesn't have a class when the page loads, it won't be animated. How to solve this problem?

See the Pen yLjxprd by accountnujen (@accountnujen) on CodePen

Link to comment
Share on other sites

4 hours ago, GreenSock said:

That's the great thing about JavaScript/GSAP - it's totally dynamic. So you can just create that animation when the elements exist, like this: 

 

 

I tried to change the class to a variable to pass it, but for some reason the first animation doesn't work correctly. I purposely slowed it down to get a better idea of what's going on. The subsequent clicks work fine. Can you tell me what this has to do with and how to fix it?

See the Pen dyeqaem by accountnujen (@accountnujen) on CodePen

Link to comment
Share on other sites

Hi,

 

The reason  you're seeing that is because the repeats and the fact that without the error class that Jack used in the codepen the start color of the input boxes is gray and not red. This is what is happening, the user clicks the button, the server returns the inputs with validation errors, you select those elements and create the animation for all the elements, so far so good. Now the animation starts, the current color of the boxes is gray, so they go from gray to red, the back to gray, then back to red. Here is where the problem begins, the animation repeats and since GSAP records all the styles at runtime and not in every repeat it has the instruction to repeat the animation and when it checks it sees that the background color is gray, so it turns it back to gray and starts all over. Why this happens only on the first form submit, at least in the codepen example? Because by the time you click the button the boxes background is already red, so GSAP takes animates the color from red to red in the first instance of the timeline, so when it repeats there is no gray flash. Makes sense?

 

In this case you can solve it by adding a set() instance before creating the timeline setting the background color to red:

q("#form").addEventListener("submit", function (e) {
  e.preventDefault();

  let list = serverSimulation(new FormData(e.target));
  console.log(list);
  let git = [];
  list.forEach((item) => {
    const el = q("[name=" + item + "]").parentElement;
    gsap.set(el, { background: "red" })
    git.push(el);
  });
  shake(git);
});

function shake(elem) {
  const tl = gsap.timeline({ repeat: 2 })
  .to(elem, 0.05, { background: "red" })
  .to(elem, 0.1, { background: "#eee" })
  .to(elem, 0.05, { background: "red" });
}

With the intention to clarify the subject as much as possible if you clear the styles before running the animation, you will see that gray flash on every submit event. With that, the boxes background is gray every time the timeline is created, so you always see the gray flash:

See the Pen ExLdxpe by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!

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