bytrangle

Thanks everyone involved for the helpful discussion and suggestion. I was wondering why I didn't see many web games using GSAP. Now that makes sense. I guess building games is the dev equivalent of data visualization. You don't know how complex it can be until you get into it. Before I started, I could only think of animation. Then I discovered that there are important concepts to explore such as collision detection, input control, enemies etc. My mind was blown. Mad respect for game devs, especially indie ones.

Oops, thank you for the catch, Cassie. I'm just sharing what I learn ?.

So I was learning from some demo for animating with Canvas and GSAP at this thread that happened to use the antiquated `colorPropsPlugin`. I'm delighted to learn that it's easy to migrate from this plugin with a few changes. Example for anyone interested: Old code: const tl = new TimelineMax({repeat: -1, yoyo: true}) tl.staggerTo( rects, 0.5, { colorProps: { fill: "#f1af11" } }, 0.1 ); rects here is just an array of different shapes I draw in Canvas. Each shape is an object with several properties, one of them is `fill`. New code: const tl = gsap.timeline({ repeat: -1, yoyo: true}) tl.to(rects, { duration: 0.5, fill: "f1af11", stagger: { each: 0.1 } }) Finished code

I don't know why I didn't read this sooner, but I was in the exact situation recently. It's not only inefficient but also leaves a lot of room for errors, so thank you for the super helpful tip.

Just chime in. If anyone is looking for a good graphic editor to make SVG for animations, listen to @Cassie. |Illustrator saves me the most time, but Affinity Designer is a good start at good price. There was a point where I was a passionate proponent of Inkscape. Then I switched to Affinity for several months, then Illustrator for a few years. Now I'm using Inkscape again and I'm perplexed at the lack of many features that I take for granted: - Swap fill and stroke with a shortcut. - Path preview when using the Bezier tool - Drag rubberband over only a portion of the object to select it - Export selection - Panel manager - Snap guides to center of an object. It was no-brainer in Illustrator and Affinity, but it took me an hour to figure out how to do that in Inkscape. And probably many more. The shortcuts in Illy and Affi are somewhat similar, but the ones in Inkscape are totally different. So all the tricks I've learned in Illy go down the drain. I'm switching back to Affinity. Learn SVG is already challenging for me, so I don't want to spend extra time navigating Inkscape ?.

Thank you @mikel. That was so slick. Here is my attempt. Nothing worth talking about yet, but I hope it's in the right direction. https://codepen.io/trangthule/pen/ExXPaPm Thank you @Cassie and @PointC for the advice. I worked with SVG text for the first time yesterday and it was so unexpectedly frustrating ?. I'm going to study up on SVG path and texts soon, but can you flesh out a bit more about the benefits of using text paths over text objects in animation?

@PointC Thanks for the demo. I didn't even think of the possibility of animating path with Motion Path plugin.

@Cassie, Sorry, I don't want to pollute the forum with unnecessary threads, but I've rethought my approach by starting from scratch breaking it down into different steps. This thread is hopefully just about animating things from straight line to an arc. The original thread is about rotating text in a circle and many more. Actually, at the time of opening the original thread, I saw a cool idea, didn't know where to start and mainly just asked for general pointers. |Nonetheless, if you think this deserves to be merged to the original, then I'll do so ?.

Hi everyone. I'm attempting to animate a block of text from straight horizontal line to an arc that would be a part of a circle. Here is the design that I have in mind: At first, I tried to use sine, cosine to calculate the horizontal and vertical distance that each character has to move to reach the arc. The problem with this approach is that I have to set `position: absolute` to each character. As a result, my attempt looks nothing like what I have in mind, with each character radiates from the center point of the imaginary circle instead of organically moving from horizontal line to the arc. So I'm rethinking: Maybe I should scratch that and try to animate a straight line to a Bezier curve using SVG, then place the characters on the curve to make them look like they are waving from straight line to curve. What do you think? Any pointer would be highly appreciated.

@GreenSock Thanks for your help. I meant to make the loader repeat infinitely until the main content is loaded and I'll stop the timeline. But I'm still figuring things out so I set `repeat: 1`, hopefully to make it a little bit easier to troubleshoot. Didn't know that `repeat: 1` would make tweens repeat immediately.

Hello, thanks for all of your encouragement @PointC, @mikel and @Cassie. Thanks to your kind words and encouragement, I was able to get the animation up to this point: codepen The text is rotating around the circle as I want but I don' get why the text sway from the horizontal line to a circular path only works once. I've been getting stuck at this part for days. I would be very appreciative if someone can give me some hints, or pointers. By the way, thanks Craig' for the heads up about the wavy number animation. That looks awesome. Happy tweening.

@Cassie Thanks for the help. I've noticed that before the letters rotate around a circle, they move like a wave (each letter moves slightly higher than the one on the left) until all of them reach the arc base (I think, it goes by so fast ?). I don't think there's any property in the MotionPathPlugin that allows controlling how an element travels from its initial state to a path, is it?

Hey @nicofonseca I've read that thread (I often excavate the whole internet for implementation idea whenever I get intrigued by a cool design beyond my skill ?). The demo inside used an older version of GSAP. For example, it calls ``` tl.from("#masterTextPath", { duration: dur, attr: { textLength: 12500 } }, 0) ``` But I can't find an `attr` property for `tween.from()`. But thanks for the reply anyway. Guess I need to learn to use those plugins properly first before I can dream of fancy effects.

Hi Greensockers, Sorry that I don't have a Codepen to show, as I don't even know where to start. I was intrigued by this custom loader that features letters of a word moving on a curve. Here is the link I notice that in addition to moving letters to make them line up on a curve, they are also slightly rotated (probably randomly), which makes it more whimsical than classic curved text animation. The source code was bundled so it was quite hard to read. I'm just looking for some pointers on what direction I should take to achieve this type of animation. My only thought right now is `MotionPath` plugin? The picture below is the earliest screenshot that I can capture. Anything would be helpful. bandicam 2021-08-16 15-48-53-015.mp4