tgczan

Really appreciate the explanation. I was blindly guessing at solutions and got quite close, but unfortunately not close enough. Thank you for the help.

I have used several GSAP plugins now with no problems. Yet, SplitText continues to be undefined somehow. I've tried all the obvious solutions: - checking basic typos/mispellings - copied code directly from the Doc - loaded GSAP js files as local files - called said files in <script> in index.html - <script> lines follow order of gsap.min.js -> [plugin].js -> script.js Other plugins (like ScrambleText, for example), have worked just fine with this setup. SplitText is the only one throwing up this basic error. What am I missing? I have made a replication of the problem here: [deleted] You'll see that the page loads and will scramble the text as expected. If you uncomment the SplitText line (line 10), you'll see the undefined error in the console. As you can see, both ScrambleTextPlugin.min.js and SplitText.min.js are located in the same folder and are declared in index.html at the same time. Why are they behaving differently?

I'm trying to simulate a 2D liquid substance filling a container. The container can be any shape (let's say in the shape of a cup). Liquid should have the wavy appearance but liquid level also moves upwards as it's undulating. There should also be multiple layers (front vs back) of these liquid waves, so there appears to be a some depth. How do I accomplish this in GSAP 3 in the most straightforward manner? Conceptually, would it better to make the shape itself morph as if it were liquid, or just simulate the movement by moving a larger piece horizontally underneath a mask that's shaped as the container?

Thank you for the explanations, @PointC. I really appreciate it. ?

Thank you, @PointC. Your demo was very helpful. I still have some questions regarding the syntax of gsap.timeline. Here is a sample pen Questions: 1. In your code, you write .to("rect", {attr:{stroke:"white"}}, 0);, I deleted attr and wrote it as .to("rect", { stroke:"white"}, 0);. It ended up working exactly the same. Can you explain what the purpose of attr is? What would be a situation where one would be required to include attr? EDIT: I double checked and placed attr back in afterwards. Everything worked pretty much the same except for the rotate attribute, which no longer rotates the SVG. I checked the documentation and see nothing beyond the few sentences there. How does one rotate with attr? Is there better documentation available for this plugin? 2. In one of the to()s, I initially used a parameter named stroke-width (copied from the <rect> element), but that caused an error. I then made a guess and turns out the correct word is strokeWidth – it was a good guess, but a guess nonetheless. Is there a list of attributes where one may find accurate available attribute names? 3. In HTML, the <rect> element's fill is defined as "url(#someID)", referring to the ID of the gradient element. In JavaScript, if I define the #rect's fill attribute as "url(#someID)", the fill color just stays white; or if I define the fill attribute as "#someID", nothing happens. Is there a convenient way to define to() and from() using fill (or some other attribute, like background) that can encompass the entire gradient at once? Or am I forever stuck with having to minutely change each stopColor attribute at a time? 4. Related to question 3: Because you can't just use "url(#someID)" as a fill in JavaScript, you seem to be stuck with the same gradient structure as you started with. How do I, for example, (1) animate from a radial to a linear gradient, and back? And (2) what if it's the same structure (linear/radial), but I just want to add additional colors or remove some colors entirely from the lineup?

Here are some primary examples: 1. This CodePen uses CSS gradients. Although the 3 samples claim to be browser-dependent, it doesn't seem to be the case for any of my browsers. 2. This CodePen creates SVG gradients dynamically, but then stays static. 3. This CodePen does use GSAP v3 but only transform gradient into a solid color. 4. This CodePen uses SVG gradients, but only GSAP v2 (TimelineMax). 5. This CodePen is pretty weird. Its syntax suggests it's staggering from one gradient to another, but it's only going from one solid color to another – this may give off the effect of gradients in motion, but they're not true gradients. 6. This CodePen uses SVG gradients, but only GSAP v2 (TimelineMax) 7. This CodePen uses CSS gradients and GSAP v2 (TweenMax). 8. This CodePen uses GSAP v3, but uses CSS gradients. 9. This CodePen uses TweenLite and Raphel.js. 10. This CodePen is good, but still uses TimelineMax. Essentially, I'm trying to produce a combined version of #8 and #10 (morphing between random shapes and applying gradient changes simultaneously). Creating the elements dynamically and appending them to one another is easy enough. How do I set up gsap.timeline(), or gsap.fromTo(), or MorphSVG to accommodate them?

My goal: have an SVG (fill: gradient) animated to change into a different gradient fill. All this should be done dynamically, using GSAP v3 (maybe using gsap.fromTo()?). I can create the SVG dynamically. I can also create other elements like the <defs> and <stop> to go inside the gradient elements. At this point, I can have the SVG display the 1st gradient dynamically. And I can animate other properties (like size, speed, or location). What I cannot do, however, is animate the actual gradient fill change using GSAP. How do you do that? There are a lot of examples from others online, but what I've found only includes: - a solid color changing to another solid color, and back - a gradient changing to a solid color, and back - a gradient changing to another gradient, and back –> but does not use SVGs and uses CSS gradients instead - a gradient changing to another gradient, and back –> but uses GreenSock v2 with the stagger function (which, apparently, doesn't exist with GSAP v3)