Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About green_machine

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

862 profile views

green_machine's Achievements


Newbie (1/14)



  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. @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!
  6. @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
  7. 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.
  8. 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).
  9. 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
  10. 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
  11. 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 }); }
  12. 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
  13. 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?
  14. 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!