tgczan
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by tgczan
-
-
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.jsOther 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. 🙏
- 1
-
Thank you, @PointC. Your demo was very helpful. I still have some questions regarding the syntax of
gsap.timeline
. Here is a sampleSee the Pen VwdvmMY?editors=1010 by tcwadr (@tcwadr) on CodePen
Questions:
1. In your code, you write
.to("rect", {attr:{stroke:"white"}}, 0);
, I deletedattr
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 includeattr
?EDIT: I double checked and placed
attr
back in afterwards. Everything worked pretty much the same except for therotate
attribute, which no longer rotates the SVG. I checked the documentation and see nothing beyond the few sentences there. How does one rotate withattr
? Is there better documentation available for this plugin?2. In one of the
to()
s, I initially used a parameter namedstroke-width
(copied from the<rect>
element), but that caused an error. I then made a guess and turns out the correct word isstrokeWidth
– 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'sfill
is defined as"url(#someID)"
, referring to the ID of the gradient element. In JavaScript, if I define the#rect
'sfill
attribute as"url(#someID)"
, the fill color just stays white; or if I define thefill
attribute as"#someID"
, nothing happens.Is there a convenient way to define
to()
andfrom()
usingfill
(or some other attribute, likebackground
) that can encompass the entire gradient at once? Or am I forever stuck with having to minutely change eachstopColor
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
See the Pen MWwyJLe by malnurtured (@malnurtured) on 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
See the Pen OVWLOd?editors=0010 by dfranklinau (@dfranklinau) on CodePen
creates SVG gradients dynamically, but then stays static.3. This
See the Pen bMxqYR by PointC (@PointC) on CodePen
does use GSAP v3 but only transform gradient into a solid color.4. This
See the Pen MwbRoL by MAW (@MAW) on CodePen
uses SVG gradients, but only GSAP v2 (TimelineMax).5. This
See the Pen WNoxoLP by garethj (@garethj) on 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
See the Pen ZWKmrK by jonathan (@jonathan) on CodePen
uses SVG gradients, but only GSAP v2 (TimelineMax)7. This
See the Pen 56dc377001d36c64c154cc3a120098cb?editors=1111 by GreenSock (@GreenSock) on CodePen
uses CSS gradients and GSAP v2 (TweenMax).8. This
See the Pen LYGXrMq by DickeySingh (@DickeySingh) on CodePen
uses GSAP v3, but uses CSS gradients.9. This
See the Pen DgyRbB by rhernando (@rhernando) on CodePen
uses TweenLite and Raphel.js.10. This
See the Pen XdBvEB by PointC (@PointC) on 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()
, orgsap.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)
ReferenceError: SplitText is not defined
in GSAP
Posted
Really appreciate the explanation.
I was blindly guessing at solutions and got quite close, but unfortunately not close enough. Thank you for the help.