timeline in forEach not playing - GSAP Express with Carl

[PapaDeBeau]

Hi, I just recently took Carl's free class "GSAP Express" and am loving it so much that I became a lifetime member. It's amazing. Thank you for your hard work and great teaching style.  I have one silly question. I call it silly because I know I am close and it must be one little thing "silly" I am missing.

QUESTION: Why is my timeline in this forEach not playing? I see the code is running in the log but not the timeline.

Also, why am I seeing this in the log? 

Quote

 "GSAP target null not found. https://greensock.com"

 

In my mind I see no mistake compared to

See the Pen WNZLoNg by snorkltv (@snorkltv) on CodePen

. What am I missing?  After 10 years plus being a part of this community, not very active, I am finally REALLY diving in and taking classes. Loving it and this amazing forum and community. Why did I wait so long?  Thanks for all you do.  

See the Pen XWoZBjp by PapaDeBeau (@PapaDeBeau) on CodePen

[Carl]

Hi @PapaDeBeau

 

I think the main problem was just the syntax / formatting in the eventlisteners. When using multiple lines in an arrow function you need the {}

 

See the Pen eYbVPPm?editors=1010 by snorkltv (@snorkltv) on CodePen

 

item.addEventListener("mouseleave", () => {
     console.log("Still works")
     one.reverse()
   });

Also in your loop item is the button with a class of ".Amazing" so I don't think you need to do

item.querySelector(".Amazing"), you just need to animate each item.

 

also, be careful with from tweens on buttons. you don't want them moving away from the mouse when you enter them because then they could trigger the mouseleave immediately. 

 

Glad to hear you enrolled in the classes!

 

I'm sure if you put in the time and practice you find a wealth of information in there.

 

Carl