GSAP target undefined not found.

[zɛd]

I'm trying to create this animation.

And here is my Code Sandbox

 

If you want to see the carousel working, you could just comment off the opacity in Car and CarDesc styled-component.

 

I'm getting the error GSAP target undefined not found. I'm not sure why it couldn't find the target even though the correct value of index has been passed. 

 

When click on the arrow (either left or right) I want the other car to appear from right and the old car to disappear to left. And the heading to the top or bottom (doesn't matter that much tho)

 

initialCarAnimation() is the function that brings the car from right and text from the top.

carousel.current[index] is for the heading

carRef.current[index] is for the car

 

I believe I'm almost there its just the GSAP couldn't find the element that I want to animate.

 

Please any help would be appreciated

 

See the Pen abVBvva?editors=0010 by zaidik (@zaidik) on CodePen

[GreenSock]

Welcome to the forums. It looks like logic issues in your code - if you console.log() the targets out before you try plugging them into the tween you'll notice that they're undefined: 

const finalCarAnimation = (index) => {
    console.log("final", carousel.current[index], "and", carRef.current[index], index, carousel.current.slice(0));
    gsap.to(carousel.current[index], {
      y: "-100px",
      opacity: 0,
      duration: 0.5
    });

    gsap.to(carRef.current[index], {
      duration: 0.5,
      opacity: 0,
      left: "-200%"
    });
  };

You're asking for the index of 1 even though there's only 1 value in the Array (index of 0).

 

If you have any GSAP-specific questions, we'd be happy to help with those. We don't have the resources to chase down logic issues in the code (please read the forum guidelines). Good luck with the project! 

[zɛd]

Appreciate it! Thanks for the reply.