Jump to content
Search Community

Troy Martz

Members
  • Posts

    2
  • Joined

  • Last visited

Everything posted by Troy Martz

  1. Troy Martz

    GSAP and Svelte

    Hi folks... I have an update, but it's not a code update, but rather a decision update... After a deep dive in XState, I found another library that has a learning curve about as steep as GraphQL, or even GSAP. It's a 13kb library, and I found it much more confusing than a few barebones FSM's, like Robot (probably #2 in the JS FSM arena), which is only 1kb in size and makes some design decisions that streamline what XState can do, but it keeps it functional and it's lite on all the features. But nearly all those features are already provided by GSAP. I was sold on the switch from XState to Robot, but then I decided to take the Xstate course on Frontend Masters w/ the author, and before he explained XState, the first 20 minutes was creating a basic functional finite state machines w/o any libraries... I actually found that simple exercise to be the most profound, because GSAP has much of what I want to do already built in... state change delays could be done w/ a simple delay value and an "onComplete" callback. So... Here is the update. I doubt I will be using either XState or Robot, but rather a very streamlined fsm that only handles the basics, and I'll let GSAP timelines do the rest... I just feel this is the best of both worlds. Lastly, Svelte's framework makes it really easy to make these into simple, well-encapsulated modules, and the syntax magic to shorten the expression even more. I'm confident that tiny functional fsm will be all that's needed, faster than a library, and a great opportunity for me to wrestle with the whole function within a function, within a function thing... More updates coming as I get to coding... My site will be done faster too
  2. Troy Martz

    GSAP and Svelte

    Hi guys... Just an FYI... I'm rebuilding my own portfolio site and using Svelte, GSAP, primarily to make use of ScrollTrigger eye candy in a <canvas> wrapper w/ Pixi... Hoping I get get the liquid smooth animation w/ canvas. Also looking at Blakes "smooth mouse wheel scroll" vs. LocalMotion or some other bigger library just to get that app-like feel. I'll share as I have time... Also, another HUGE difference this time around is that I am using XState for an FSM... it also plays very nicely w/ Svelte. Because of the large amount of scenes and concurrent animations I have planned, a state machine makes more sense than trying to use the Svelte store, which is great for a Pub/Sub kind of architecture. Again, will post some Code Pens (or even make my private portfolio site publicly available on GitHub). Thanks guys! It's great to hear I'm not the only one thinking Svelte + GSAP is a great pairing. After all, Rich Harris eats and breathes reactive info-graphics all day, so with performance in mind, seems like peas and carrots.
×
×
  • Create New...