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!!

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!

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: Participants see a blurry screen with a button saying "los geht's" (meaning "let's go!"). Once this button is clicked, you see a monkey watching how a balloon falls under a hedge. 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. 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!