[How do I prevent element flickering?]

Thank you for taking time to respond.

The issue was related to how I handle the WebSocket.  

 

Next time when I ask a question here, I try to reexamine if it's related to GSAP.

Thank you.

[How do I prevent element flickering?]

I have a game app where target elements of `elm1` and `elm2` are constantly moving according to the value of `x1` and `x2` that are receivable via WebSocket. The issue with the code below is that the target elements blink and seemingly default to 0px. How can I fix this? Sorry for not providing CodePen URL because it's hard to implement WebSocket.

 

let xSetter1 = gsap.utils.pipe(

gsap.utils.clamp(0, 800), gsap.utils.snap(5),

gsap.quickSetter(elm1, "x", "px")

);

xSetter1(x1) ;



let xSetter2 = gsap.utils.pipe(

 gsap.utils.clamp(0, 800),

gsap.utils.snap(5),

gsap.quickSetter(elm2, "x", "px")

);

xSetter1(x2) ;

 

[How can I rotate Compass to an absolute value?]

Thank you so much for clarifying my issue.

I think inserting the "angle" with "+=" caused it.

 

This is what I wanted to achieve.

Thanks again.

 

See the Pen a64fd835785345304ca1b4ca9ce38772 by riotron (@riotron) on CodePen

[How can I rotate Compass to an absolute value?]

Following method adds up the value every time the code runs.  When the compass is set to 30degrees first time, that's ok. But when the second time the code runs the rotation value is 45 degrees, the compass point to 75 degrees.

 

gsap.to(".compass", {rotation: 30, duration: 1});

 

How can I make it point to 45 degrees?  

 

[What is the best practice to learn character animation?]

Thanks, @GreenSock and @PointC !

 

As you said, MorphSVG has the potential to open up a new method of character animation. Playing with Rive, I was reminded of MorphSVG as the shapes (SVG) deformed one after another. However, one problem that Rive has and GSAP doesn't is resizing the result to fit the viewport.

Using sprite is like classical cell animation. ex; PIXI.JS.https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs5 This might be worth to try. Plus, GSAP has its plugin.

 

Whichever method is more suitable to me, I have to think about how to integrate it with my application. I plan to integrate user-uploaded photos and character animations to generate a kind of greeting card.

 

So, it seems the versatility of GSAP wins out imo.

Any thoughts in this regard? 

 

[What is the best practice to learn character animation?]

I wonder how I can start learning character animation with GSAP.

I'm guessing combining motionPath and MorphSVG could lead us to interesting works.

 

While I was searching web, I found Rive.app that specializes in this area.

Animations that drawn in the following link looks ideal to me.

https://rive.app/#runtimes

Did anybody create something like that with GSAP?

 

However, I really want to stick with GSAP as there are still many things I need for my web app.

 

 

[howler.js sound is delayed on mobile(ios) on Timeline.]

I have updated my codepen above posted so that I can synchronize the sound and animation as I intended.  I just inserted silent sound in the timeline and the main sound starts off after the offset(3 seconds). If anyone has a better idea, I am grateful with that. Thanks.

[howler.js sound is delayed on mobile(ios) on Timeline.]

Hi Zack,

 

Thanks a lot!  I appreciate you posted the howler GitHub repo. That would be a big help to me.

BTW, I fixed the bug related to restart() . Thanks as well.

 

I would post something here when I found the solution.

 

Rio

[howler.js sound is delayed on mobile(ios) on Timeline.]

Hi gsap community,

 

This is my first post!  I'm sorry if this is already asked previously.

I am trying to synchronize sound effect and the animation via howler.js .

 

The issue is that the sound does not start on the first attempt of play(). This is happening only on mobile(ios).

There is no problem when I tap on restart(second attempt). Desktop works like a charm.

 

Why this on mobile?

See the Pen 8ba9316d6abf27c301f65e9de0ffc5c5 by riotron (@riotron) on CodePen