Animation randomly stuck

[JuliaP]

Hi there! 
I'm rather new to the whole world of JavaScript and animations, so please bear with me 😅

 

We're trying to build an experimental study on gaze following with SVGs. The basic setup is as follows:

1. Participants see a blurry screen with a button saying "los geht's" (meaning "let's go!").
2. Once this button is clicked, you see a monkey watching how a balloon falls under a hedge. 
3. This scene is shown until the participants click on the hedge (click accompanied with short positive sound). They should click on where they expect the balloon to be - by using the animal's eye position as a clue. 
4. Then we go on to the next trial, that starts again with the blurry scene and the let's go button.

 

All the animations run wonderfully smoothly in most of the cases.

 

Now the problem: 

From time to time, the animations just don't play at all. They won't even start, but just do nothing (without error message). I tried to reproduce the error, but can't really find any logic behind it. The only thing I noticed is that appears more often (still not always), when you click very quickly from trial to trial. A good proxy of whether the animations work is if the little sound icon on the browser tab is still showing or not. However, the bug still exists even if no sound is played. So for me it seems like maybe the browser is still busy doing some stuff?

 

As you can imagine, there are tons of functions and a huge SVG file already. I tried to strip it down as best as possible, to provide a minimal demo. 

 

https://github.com/ccp-eva/vox/tree/minimal-demo
All the animation happens in https://github.com/ccp-eva/vox/blob/minimal-demo/src/js/changeGaze.js

 

There is also a small video with the bug: https://github.com/ccp-eva/vox/blob/minimal-demo/minimal-demo.mp4.

The first three trials are as they should be - everything's fine. The fourth trial then doesn't play the animation anymore. However, the eventListener on the hedge is still being added and works. This is also very interesting - since the eventListener only gets added after the animation is done playing. 

 

I greatly appreciate any hints or recommendations and sincerely hope that you understand my description. Many many thanks! 

[ZachSaucier]

Hey Julia, welcome to the GreenSock forums.

 

I haven't been able to recreate the issue where the animation doesn't run. Any further instructions as to how to reproduce it more reliably?

 

I do see some jumpy-ness in the position of the balloon at times.

 

Some notes that may or may not help:

• It's best to stick to relative tweens like .to() or .from() unless you need to use a .fromTo(). In this situation it probably makes sense to use .fromTo() for the first animation in the timeline but then .to() for the others.
• We recommend using the position parameter instead of delay for tweens in timelines. I see you're using it some of the time but I'm not sure why you're not using it all the time.
• You don't need to pass in a string value like `${exp.elemSpecs.eyes.left.beginning.x}`. Just use the variable value: exp.elemSpecs.eyes.left.beginning.x
• You're adding a new requestAnimationFrame every time that setViewBoxAttr and setCircleAttr are ran. That's no good. I recommend setting up a RAF once that updates everything that you need it to. But I also am not understanding why you need to use a RAF at all. I would just use a gsap.set() to set whatever you need when you need to change things.

If you have a GSAP-related question let us know. Best of luck debugging!

 

Side note: a couple times the end position of the balloon was off the screen to the right and I couldn't click it to go to the next stage. Probably want to fix that at some point  

[JuliaP]

 Dear Zach, 
Thank you so much for your fast reply!

Very interesting that you could not recreate the bug. Which browser are you using? 

The only thing that makes the bug appear more often/ more reliably for me is really clicking as fast as possible on the hedge and then the "los geht's" / let's go button. 

Any idea why the balloon might be jumpy sometimes?

 

I worked on the code and tried to implement your suggestions. Everything in the github repo as before, now in the commit  24ee231 . Only the changeGaze function changed. Some replies to your notes:

•  Very interesting! In the beginning, I actually only used .to(). But then I thought the more explicit the better, and that using .to() might be a source of the bug. Apparently, it isn't. So know I switched back to using only .to().
• Similar for this point - in the beginning, I put everything in one big timeline with position parameters. For debugging, I created more timelines and couldn't really figure out how to use the position parameters across these timelines anymore. But now back to one timeline and position parameters without delay!
• Great tip about the string values! Looks way neater that way!
• Yeah, about the RAF... So the problem that I experience is that if I do not set the viewBox (for the balloon) and cx/cy (for the eyes) after animating, they just jump back to their original position. So basically they move to the specified position and once reached, back to the beginning. Obviously, we want to avoid that and want them to stay at their final place. So I thought I just explicitly set the attribute values. If I don't use RAF, you can't see any effect. Same if I call RAF only once. I also just tried to do it with gsap.set() and realized that this method does not exist for the viewBox attribute. Any tips regarding this "setting" problem? You can see the different approaches I tried out in the current version of our minimal demo, in the changeGaze function. 
• About the positioning being off the screen: that's alright, only a problem in the minimal demo (was too lazy to fix it here 😅).

Thanks a lot for taking the time! 

 

[ZachSaucier]

22 minutes ago, JuliaP said:

Which browser are you using? 

Tested on Windows in Chrome and Firefox. Note that I tested using the .html and .js files in the /dist directory that you provided in the repo (i.e. I didn't install the project and create the dist files myself).

 

23 minutes ago, JuliaP said:

Any idea why the balloon might be jumpy sometimes?

I'm guessing due to conflicting tweens? But that's a guess. Your application is still fairly large for us to try and help with for free so I didn't put too much time in trying to understand all of the logic to figure out the core issue. 

 

25 minutes ago, JuliaP said:

I also just tried to do it with gsap.set() and realized that this method does not exist for the viewBox attribute.

You should be able to do it like so: 

gsap.set(target, { attr: { viewBox: newViewBox } });

I still don't really understand why you would need a RAF. I don't understand why the animated values would jump back to the start ones when the animation finishes. The only time that should happen is if you use clearProps or create a new animation with starting values of the original ones.

[JuliaP]

Hi Zach, 
Thanks for your answers! 
I'm still in the process of figuring things out - but I guess the main issue was using the viewBox for all the animations (for some reason we used that in the past, before I started to use gsap). I'm trying it with simple x/y coords now, which makes things way easier. This actually also resolves the setting issue. So I'm keeping my fingers crossed that this will solve all problems. Thanks a lot for your help!!