Need help with eventListeners and timelines...

[cr33ksid3]

More details shown in CodePen but I'm trying to learn how to use functions and eventListeners for mouse interactions. I have the center white box (logo) that I can set to spin on click but I can't get it to spin again with another click. And I can't get a mouseover to work on the top left box unless I remove all the other addEventListener code. One or the other but not both. I'm missing something and not sure what so I'm turning to the community. Teach me please...

See the Pen mdRdmqB by cr33ksid3 (@cr33ksid3) on CodePen

[mvaneijgen]

When I just create a variable to the timeline (removed it from the function) and do `animLogo.play()` it works as you want it to.  I've also set `{ paused:true }` to the time line to stop it from playing on page load.

 

Here is the code I have right now:

See the Pen LYxERww?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Your next animation (animBoxTL) doesn't do anything, because you didn't tell it to do anything 

tl.to("#boxTR", {
  duration: 3, // the time of the animation
  yoyo: true, // Moves forward and backwards if there is an repeat (which is not set) https://greensock.com/docs/v3/GSAP/Tween/yoyo()
  transformOrigin:"50% 50%" // Sets the origin of the elemetns tranfrorm
  // Missing animation. For exmaple rotation:90,
});

 

Here is your code working with a rotion add and the same tweaks as my first example 

See the Pen WNRbooM?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[cr33ksid3]

Thank you mvaneijgen. I had a tween in there but must have removed it when I was playing around with yoyo:true. I will review your fixes and hopefully learn how to apply them further.

[cr33ksid3]

mvaneijgen:

 

I see that you drastically changed my JS code. You removed the functions and made the animations as plain tweens. Might I ask why?

 

For instance... I tried to change the logo animation tween back to a function like this...

function animLogo(){
  var tl = new gsap.timeline({ paused: true });
  tl.to("#logo", {duration: 3, rotate: 360,transformOrigin:"50% 50%"});
    return tl;
}

with the addEventListener like this...

logo.addEventListener("click", ()=>{
  console.warn("click");

//animLogo.play();
  gsap.to(animLogo());
  if(animLogo.progress() == 1){
    animLogo.restart();
  }
});

but now the click doesn't play the rotation on the logo.

I wanted to use functions rather than single tweens because in the future I could see you mouseover a series of tweens in a timeline.

Isn't this possible with functions and addEventListeners?

 

Thanks again

[GreenSock]

5 hours ago, cr33ksid3 said:

For instance... I tried to change the logo animation tween back to a function like this...

function animLogo(){
  var tl = new gsap.timeline({ paused: true });
  tl.to("#logo", {duration: 3, rotate: 360,transformOrigin:"50% 50%"});
    return tl;
}

with the addEventListener like this...

logo.addEventListener("click", ()=>{
  console.warn("click");

//animLogo.play();
  gsap.to(animLogo());
  if(animLogo.progress() == 1){
    animLogo.restart();
  }
});

but now the click doesn't play the rotation on the logo.

It's totally fine to wrap your animations in a modular function and use timelines...there are several logic problems in your code: 

 

gsap.to(animLogo()) 

This doesn't make sense - I'm not even sure what you're trying to do here, but what's happening is you're calling the animLogo() function which creates a NEW timeline (each time you call it) and then you're feeding that as the target of a gsap.to() tween...without any vars. It's like saying "animate this new timeline...to nothing...)

 

if(animLogo.progress() == 1){

This is invalid JavaScript. You're trying to call progress() on a literal function definition itself. In other words, animLogo is a function, not an animation. 

 

Lastly, the reason you're only seeing it animate once is because each time you call animLogo() it's creating a new animation to the SAME end values, so once it runs once, it's already at those end values so subsequent animations won't appear to do anything. For example, if you animate something to rotate: 360, let that animation finish, and then you try to animate it again to rotate: 360, you're effectively saying "animate from 360 to 360" (so it doesn't appear to animate of course). 

 

Let us know if that makes sense or if you still need some help with something. 

[cr33ksid3]

Argh. Its not just the GSAP that I have to grasp... its all the technical details about JS too. All the logic problems are because I have never taken any programming courses I'm afraid. I get by only by understanding just enough... I envy all of you who can look at the code someone like myself hacks together and understand why it is wrong. I have to figure this out. I'll keep going over the tutorials, courses and failed projects. Thanks for the help all of you...

[GreenSock]

Don't feel bad about that, @cr33ksid3 - we're all learning. I admire the fact that you're pressing through and trying to figure things out. It's hard when you don't have any training, but I've never taken a programming class either and I somehow learned through online sources and books so I'm sure you'll get there if you keep pressing forward. 

 

Good luck!

[mvaneijgen]

@cr33ksid3

On 3/23/2021 at 4:04 PM, cr33ksid3 said:

I see that you drastically changed my JS code. You removed the functions and made the animations as plain tweens. Might I ask why?

That is why I've said 

Quote

When I just create a variable to the timeline (removed it from the function) and do `animLogo.play()` it works as you want it to.

I did this to get the code working as you wanted it to. I've only ever used a timeline in a function to `.add()` it to a other timeline.

 

Good luck