green_machine

Ah, I gotcha. I misread then; I thought in 3.0 that you meant that you could now use "rotate" across the board in GSAP, which I prefer since it matches CSS now and not AS (and it's also fewer characters). If it means you had to add logic now to convert "rotate" to "rotation" everywhere behind the scenes then no need, I can just go back to using "rotation" instead and keep the library leaner.

I often use non-position properties in a motion path, but found a potential bug with the "rotate" property inside of an array of motionPath values. In my CodePen, you can see that using "rotation" works just fine, but when using "rotate", nothing happens. The only different between the two lines other than the selector is the "rotate/rotation" property swapped out. Am I missing something obvious here? I switched to using "rotate" over "rotation" in 3.0 to stay consistent with how I'd write it in CSS, so was curious if I encountered a bug here or if I am messing something up.

I almost needed to figure something similar out awhile back but the project changed a bit and I was off the hook for that part. Curious what solution you go with once you figure it out, if you wouldn't mind dropping an update in here later on.

Has there ever been GSAP tees or stickers or anything? I would rock one, just saying.

Here's my devil's advocate comment: It sounds like all you're needing is to fire some animations when elements get scrolled into view. Unless you need some of the advanced functionality in the ScrollMagic library, a simpler approach would be to use the native IntersectionObserver API to listen for when elements get scrolled into view, and then call your GreenSock animations when that happens. It saves you from loading in another third-party library in favor of native functionality, and also gets rid of listening for the browser's scroll event, which is costly (I'm assuming that ScrollMagic still listens for the scroll event; they may have changed that since I've used the library). In regards to the smooth scrolling, I personally don't like it and typically recommend that others not do it. I'm sure some of it has to do with preference, but there are also some accessibility and other concerns with smooth scrolling. So if you do decide to incorporate that effect, please be mindful.

The blue paper effect is just a series of jpg/png images that are swapped in/out depending on the scroll position, essentially functioning as a user-controlled frame-by-frame animation. I don't have time to dig through the code and see how everything functions, so I can't tell you how it's built or what they are specifically using GSAP for. I would guess that they're probably using some JS to swap out the src of the img element once the scroll position reaches certain points. They could optionally also be using a scroll library to help do that. It does look like the element for the white paper and some of the text elements have some transforms applied to them, perhaps they're using GSAP to handle the animation for those elements. If you're only interested in the blue paper part, I don't see anything here that would require GSAP, though you could certainly use it in various ways.

Cool, thanks for the explanation, Jack! It seems like perhaps for very simple cases, it might be ok to forgo loading in the MorphSVG plugin and just using the Attr plugin to do it. The times I've done that have been pretty low-key uses, like changing a two-point straight line to a two-point curved line; but I didn't know if there was actually more work behind the scenes that the Attr plugin was having to do for stuff like that. Love the MorphSVG plugin and use it for some complex stuff all the time, but didn't want to load it in for something very simple unless there was a good reason.

Just curious if there is any performance differences in a scenario where you're animating a path's "d" attribute from one value to another (both beginning and end values use the same amount of points) using the MorphSVG plugin vs. using the Attr plugin to animate the "d" attribute directly. I've done it both ways but never knew if one was more performant that the other in cases where the number of points are the same. Thanks.

@OSUblake wow that's awesome! Funny, yesterday I didn't know how to approach this and less than a day later I have like four different approaches. Thanks, all!

@GreenSock this is great! Pretty clever, I didn't think of handling it that way, but it makes total sense. Going to dive into it in the morning. Much thanks! -darin

Here's a super rough and quick version that I did. You could probably smooth out some of the paths in Illustrator a bit more even.

I'll just throw out another possible solution, since I do a lot of character stuff with GSAP and recently did something similar with a tail (unfortunately I can't share it since it's client work that hasn't launched). If it were me, I'd avoid all of the math and just create 4-5 (or more) slightly different tails in Illustrator (or whatever vector editor you're using) and use the MorphSVG plugin to make quick tweens between them in a loop. The "rubber hose" -ish illustration style that you're using on your character will work well with a handful of canned paths since it's not very detailed (in a good way).

Thanks, @PointC! Very helpful. I have a solution working currently using Jack's ChoppedEase from the second link you posted. I essentially created a separate timeline for the leaves. Then in my loop where I create each leaf element, I add a .01s tween to that timeline for each leaf along the same motion path used by the vine, with the ChoppedEase value randomized. That essentially works as a "set" method to place the leaves perfectly along the path at random intervals. Once I play with it a bit more and know it's all working, I'll add a new CodePen link to this thread in case it helps somebody in the future. -darin

Hi, I'm creating an animated vine with the drawSVG plugin, with dynamically created leaves. The stem is a vertical bezier curve (SVG path) that I'm creating using a few random numbers. I'm then using a loop to create a bunch of leaf elements, which I then am trying to place along the curved path. The 'y' position isn't a problem, but I'm not quite sure what a good solution is for the 'x' position of the leaves to ensure that they're placed along the vine's stem. Looking at the Bezier plugin, I was wondering if there's a way to use the same path data I've created for the stem and use it as a motion path for the leaves, only instead of animating their position along the path, simply place them at a random position along it. I haven't used the Bezier plugin before, so I wasn't sure how doable that is, if at all. Anybody know if this is an easy undertaking, or should I consider a different approach? -darin

Yup, that's it!