chenxin

I want to animate the property uPosx and uPosy of this.pageCurlMaterial object, but the value can only be signed with the setProperty function. How can I use gsap in this case? I think maybe I need to call setProperty on the onUpdate callback, but I don't know how to form it. this.pageCurlMaterial.setProperty("uPosx", this.pointerStartPosx) this.pageCurlMaterial.setProperty("uPosy", this.pointerStartPosy)

It helped a lot, thank you!

Let's say I have a repeated animation, like this: const tl = new TimelineMax({ repeat: -1, }) tl.to(...) Q1: If I pause the animation by calling tl.pause() , when will this animation be garbage collected? Q2: If I kill the animation by calling tl.kill(), when will this animation be garbage collected ? Q3: For a repeated animation that has already been paused, is it necessary to call Kill() method?

Hey Zach, thank you for your answer! Just curious, what is the cost if I leave them alive, do they cost more memory? If I have hundreds of animations like this, is it still ok to just leave them alive?

I have a some animations which cannot be reused, so I have to kill it after it is completed. Now I am doing it by calling the kill() method after the completion: I am not sure if this is the correct way or the easiest way to do this.

Hey Zach, thank you for your answer. By "learn animation" I mean learn how to create an animation library. I have been using GSAP for several month and I think it is time to know what is going on under the hood. Like you said , I will get a more full understanding of JavaScript itself, and hope finally I can understand the source code.

I have been using GSAP for several months now, and I really love it. Recently I start to wondering how GSAP works under the hood, and I want to create my own animation library from scratch because I think that is a good way to learn animation. I tried to read the GSAP source code, but I can't really understand it... Is there any good way to start? Books or articles ? or I should stick on the source code.

Hi GreenSock and mikel, thank you for your answer! Combine the suggestions given by both of you, now the animation looks perfect!

In this codepen, I have two lines. The animation I want: initial state: line1 and line2 hidden. stage one: line1 expand from the center to its ends, and then reverse this animation. stage two: line2 expand from the center to its ends, and then reverse this animation. and repeat these two stages infinitely. Now the problem is: at the start of the animation, when line1 is expanding, line2 is already shown.

To illustrate my problem, i made two codepens: example uses em and example uses px. My problem is, in the first example, where i use em unit for text-shadow. Initially i set text-shadow: 0 0 0.08em #EB509E, and then in JS, I wrote exactly the same property of text-shadow(0 0 0.08em #EB509E). So I expect there will be no animation. However, if you open the pen in the debug mode, you will see the the 0.08em goes up to a very high value and then goes down. In the second example where I use px instead of em, it works properly. Is there any way to fix this? Thank you!