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!

I know that in the constructor, you can pass a parameter for the 'onComplete' event. But once a TimelineMax instance has been created, can you dynamically add one? I didn't see anything in the docs about it. I'm looking to do something like this: if(...) { myTimeline.onComplete(function() { // do this stuff }); } else if(...) { myTimeline.onComplete(function() { // do this other stuff }); }

Hey Jack, thanks for this! I had figured that this was just a natural occurrence along the lines of what you explained with the diagram, thanks for confirming. Though, I was secretly hoping that I would be wrong and there was a parameter that would make it all better instead of reworking things. Thanks a lot for this pen, your approach makes total sense now that I see it. I haven't had a chance/need to use the Modifiers plugin yet either, so it was also a good chance to learn about it while reverse-engineering your solution here. Much appreciated! -darin

So I was playing around with a fake 3D cube-like object from just a few SVG elements. The example I've created here just changes the perspective of the cube based on the user's mouse position. There are essentially two rectangles (for the cube's top and bottom) that are being skewed in a tween. Then, another rectangle (simulating the left/right sides of the cube) has its x position tweened to match the top/bottom elements. When the tween duration is small, everything looks nice and accurate. But if you change the tween duration to something larger, like 2 or 3 seconds, you'll see that the top/bottom rectangles being skewed lag behind a bit. I don't believe my calculations are the issue, since when the tweens end everything is the proper place. So I'm wondering if there's anything that I'm missing here that's causing this. Something under the hood that I mixed up? A performance issue? Some law of physics with skewed objects that I'm not familiar with?

Duh, getBoundingClientRect totally will work. I haven't started making anything yet, was just a question that popped into my head and I made it more complicated than it needed to be. Was thinking there would be a _gsTransform.theRealHeight undocumented property or something. Thanks, everyone!

When skewing an object, the 'skewType' parameter by default compensates for the distortion that occurs in a simple skew. So if you skew a 50px square, the height becomes smaller the more it is skewed. Is there an easy way to get the square's new "height" as it's being skewed? Trying to determine if that's the easier task vs using a simple skew and adding my own compensation to the skewed object. Thanks!

Awesome! That's exactly what I was looking for. Thanks, Blake!

Am going to be working on a project with a slider that looks and functions similar to a car's manual transmission, where the slider is able to be dragged in an |--|--| formation. So, you'd be able to drag the slider left and right along the middle x-axis, and when it reaches one of the junctions, draggable up and down along the y-axises. I haven't used the Draggable plugin much, so before I spend time trial-and-error-ing possible solutions, I was curious if: This is easy to accomplish with the Draggable plugin. The examples on the Draggable page show that it's easy to make an object draggable along the x-axis, y-axis, or both axises, but is it possible to change that property seamlessly mid-drag? If not, how would you approach creating something like this? Are any CodePen examples that exist already so I can get ideas on how to structure it? Thank you to anyone that can provide some info!

Carl, in my haste I must've gotten too careless with the position parameter on my tweens, so I'm going to adjust some of those. I also did some fiddling for the occasions where I will need to handle the overwriting, so pointing out that parameter was a big help. Of course now that you pointed it out, I see it in the documentation where I must've read right over it. Thanks.

Thanks, Carl! I will give this a shot and report back. Much appreciated.

Hey guys, Been a lurker here for a few years, but never needed to ask a question until now, so thanks for anyone that can provide any info. Working on a little SVG chess animation, as you can see in the pen. I have the timeline set to repeat. On the initial playthrough, the elements all appear correctly and animate as I've coded them to. But on any subsequent plays, you'll see that some elements jump or appear differently. I'm assuming this has something to do with the transforms I'm applying to them. If so, is there a way for all of the elements to "reset" to how they start at the beginning of my timeline on the first play? Thanks, in advance.