Syntax - Tasty Web Development Treats

Scott and Wes sit down with Cassie Evans of GSAP to talk all things animation—from SVGs and scroll timelines to GSAP’s new rebrand and exciting features. They also dig into performance, plugins, and what makes GSAP such a powerful tool for web developers. Show Notes * 00:00 Welcome to Syntax! * 00:59 What is GSAP [https://gsap.com/]? * Cassie Codes [https://www.cassie.codes/]. * 01:53 GSAP Rebranding. * 04:44 GSAP under the hood. * 05:29 The big announcement [https://gsap.com/blog/webflow-GSAP/]! * 07:19 GSAP Showcase [https://gsap.com/showcase/]. * 11:01 Brought to you by Sentry.io [https://sentry.io/syntax]. * 11:26 Why is GSAP easier for animations? * GSAP Docs [https://gsap.com/docs/v3/]. * 12:38 Animating with SVGs. * 13:33 The love of SVG. * 14:55 GSAP is performant. * 16:06 Gotchas to watch out for. * 18:12 Does GSAP work with canvas? * 19:02 What GSAP projects are you most proud of? * 20:30 Does it play nice with web frameworks? * GSAP with React [https://gsap.com/resources/React/]. * 22:32 What are you excited about in CSS right now? * Scroll Timeline [https://developer.mozilla.org/en-US/docs/Web/API/ScrollTimeline]. * 24:27 Will any of these make their way into GSAP? * 26:31 Timelines [https://tympanus.net/codrops/2025/04/21/mastering-carousels-with-gsap-from-basics-to-advanced-animation/]. * 29:24 Building animations with timelines. * 34:55 What are the best GSAP plugins? * Split Text [https://gsap.com/docs/v3/Plugins/SplitText/] * spanran-wrap [https://github.com/wesbos/AI-and-JavaScript/blob/main/spanran-wrap.ts]. * Physics 2D Plugin [https://gsap.com/docs/v3/Plugins/Physics2DPlugin]. * 38:44 GSAP docs [https://gsap.com/docs/v3/] and philosophy. * 39:50 Scrubbing animations by frame. * 41:09 GSAP Video Exporter [https://github.com/workeffortwaste/gsap-video-export]. * 41:45 Animating with JavaScript. * 45:19 JavaScript in unconventional applications. * 47:56 Is there anything missing in web tech? * 50:53 What about AI in GSAP? * 52:40 Sick Picks + Shameless Plugs. Sick Picks * Cassie: Eyesy Video Synthesis [https://www.critterandguitari.com/eyesy]. Shameless Plugs * Cassie: Smashing Conf [https://smashingconf.com/freiburg-2025/]. Hit us up on Socials! Syntax: X [https://twitter.com/syntaxfm] Instagram [https://www.instagram.com/syntax_fm/] Tiktok [https://www.tiktok.com/@syntaxfm] LinkedIn [https://www.linkedin.com/company/96077407/admin/feed/posts/] Threads [https://www.threads.net/@syntax_fm] Wes: X [https://twitter.com/wesbos] Instagram [https://www.instagram.com/wesbos/] Tiktok [https://www.tiktok.com/@wesbos] LinkedIn [https://www.linkedin.com/in/wesbos/] Threads [https://www.threads.net/@wesbos] Scott: X [https://twitter.com/stolinski] Instagram [https://www.instagram.com/stolinski/] Tiktok [https://www.tiktok.com/@stolinski] LinkedIn [https://www.linkedin.com/in/stolinski/] Threads [https://www.threads.net/@stolinski] Randy: X [https://twitter.com/randyrektor] Instagram [https://www.instagram.com/randyrektor/] YouTube [https://www.youtube.com/@randyrektor] Threads [https://www.threads.net/@randyrektor]

Wes and Scott talk all things 3D printing—from fixing every day items to organizing tools, printing gadgets, and even teaching their kids entrepreneurship. Show Notes * 00:00 Welcome to Syntax! * 03:34 Brought to you by Sentry.io [https://sentry.io] * 05:03 Practical uses of 3D printing * 07:34 Creating tools for organization * Gridfinity [https://gridfinity.xyz/] * 10:33 Improving and adapting everyday items * Underware [https://www.printables.com/model/941161-underware-the-ultimate-cable-management-solution] * 14:34 The benefits of printing something vs buying it * 15:32 Choosing the right 3D printer * Bamboo Lab [https://bambulab.com/en-us] * Elegoo [https://elegoo.com] * Prusa [https://www.prusa3d.com/] * Flashorge [https://www.flashforge.com/] * 25:26 Projects and ideas * Multiboard [https://x.com/calebsylvest/status/1902045363973902705] * 31:33 Filament types and their uses * 40:05 Finding affordable filament * Deal Forager [https://dealforager.com/] * 46:07 Where to find 3D models * Maker World [https://makerworld.com/] * yeggi [https://www.yeggi.com/] * Printables [https://www.printables.com/] * Thangs [https://thangs.com] * Thingverse [https://www.thingiverse.com/] * 48:08 Creating your own 3D models * Fusion [https://www.autodesk.com/products/fusion-360] * Shapr3D [https://www.shapr3d.com/] * Onshape [https://www.onshape.com/] * 53:00 Modifying existing 3D models * 54:30 Coding in 3D printing * Bento [https://bento3d.design/] * shards [https://shards.design/] * ManifoldCAD [https://manifoldcad.org/#Heart] * Hunyuan3D-2mv-Turbo [https://huggingface.co/spaces/tencent/Hunyuan3D-2mv] * Mecagent [https://mecagent.com/] * 01:01:25 Sick Picks + Shameless Plugs Sick Picks * Scott: Alaska Bear Organic Silk Sleep Mask [https://amzn.to/4cwbdlI] * Wes: BLV - AMS Riser [https://makerworld.com/en/models/19535-blv-ams-riser-for-x1c-p1p-p1s-v3-1-final#profileId-19420] Shameless Plugs * Syntax YouTube Channel [https://www.youtube.com/@syntaxfm] Hit us up on Socials! Syntax: X [https://twitter.com/syntaxfm] Instagram [https://www.instagram.com/syntax_fm/] Tiktok [https://www.tiktok.com/@syntaxfm] LinkedIn [https://www.linkedin.com/company/96077407/admin/feed/posts/] Threads [https://www.threads.net/@syntax_fm] Wes: X [https://twitter.com/wesbos] Instagram [https://www.instagram.com/wesbos/] Tiktok [https://www.tiktok.com/@wesbos] LinkedIn [https://www.linkedin.com/in/wesbos/] Threads [https://www.threads.net/@wesbos] Scott: X [https://twitter.com/stolinski] Instagram [https://www.instagram.com/stolinski/] Tiktok [https://www.tiktok.com/@stolinski] LinkedIn [https://www.linkedin.com/in/stolinski/] Threads [https://www.threads.net/@stolinski] Randy: X [https://twitter.com/randyrektor] Instagram [https://www.instagram.com/randyrektor/] YouTube [https://www.youtube.com/@randyrektor] Threads [https://www.threads.net/@randyrektor]

Scott and Wes break down the tricks and techniques for making your app feel blazing fast—even when it’s not. From optimistic UI to preload-on-hover, it’s all about perception, not just performance. Show Notes * 00:00 Welcome to Syntax! * 01:12 Brought to you by Sentry.io [https://sentry.io/syntax]. * 02:34 Mousedown or pointerdown events. * 06:00 UI animations should be fast. * 08:00 Animations should not block interaction. * 08:20 Animations should be cancellable / reversible. * 10:50 Optimistic UI. * 12:37 Local Data. * 13:36 Delay loading indicators. * 14:40 Page loading indicators. * 15:47 Preload on hover. * 17:13 Calculate mouse trajectory. * 18:51 Full page spinner on every change. * 20:04 Pixelated spinners. * 20:23 Skeleton loaders. * 23:43 Photo frames. * 25:52 Search on input instead of search on click. * 26:46 Progress loaders than move in between steps. * 27:31 Community submissions. Hit us up on Socials! Syntax: X [https://twitter.com/syntaxfm] Instagram [https://www.instagram.com/syntax_fm/] Tiktok [https://www.tiktok.com/@syntaxfm] LinkedIn [https://www.linkedin.com/company/96077407/admin/feed/posts/] Threads [https://www.threads.net/@syntax_fm] Wes: X [https://twitter.com/wesbos] Instagram [https://www.instagram.com/wesbos/] Tiktok [https://www.tiktok.com/@wesbos] LinkedIn [https://www.linkedin.com/in/wesbos/] Threads [https://www.threads.net/@wesbos] Scott: X [https://twitter.com/stolinski] Instagram [https://www.instagram.com/stolinski/] Tiktok [https://www.tiktok.com/@stolinski] LinkedIn [https://www.linkedin.com/in/stolinski/] Threads [https://www.threads.net/@stolinski] Randy: X [https://twitter.com/randyrektor] Instagram [https://www.instagram.com/randyrektor/] YouTube [https://www.youtube.com/@randyrektor] Threads [https://www.threads.net/@randyrektor]

Scott and Wes break down the current state of React Server Components — what they are, how they work, and why they’re so controversial. From framework support to bundling complexity, it’s everything you need to know about RSC in 2025. Show Notes * 00:00 Welcome to Syntax! * 01:01 Brought to you by Sentry.io [https://sentry.io/syntax]. * 01:55 What exactly are React Server Components? * 02:18 Server components rendering. * 03:17 Server components are async. * 03:45 Server components can be suspended. * 05:05 Server components send RSC payloads to the browser. * 06:08 This feels like HTMX? * 06:54 Client components are still server rendered. * 07:58 Server Functions. * 08:52 useActionState. * 09:12 Frameworks and React Platforms. * 09:16 NextJS. * 09:42 Waku. * 12:26 candycode.com [https://candycode.com/] * Daishi Kato [https://daishikato.com/] * 14:23 React Router. * Michael Jackson Tweet [https://x.com/mjackson/status/1904977249918705853]. * 19:29 Vite. * vite-plugin-react-server [https://github.com/nicobrinkkemper/vite-plugin-react-server] * 20:54 Tanstack. * Syntax Ep 833 [https://syntax.fm/show/833/next-gen-fullstack-react-with-tanstack]. * 22:39 Bun. * 23:01 DIY. * 23:39 Why so much hate? * 25:28 I want it my way. * 27:46 React Server Components lock-in. Hit us up on Socials! Syntax: X [https://twitter.com/syntaxfm] Instagram [https://www.instagram.com/syntax_fm/] Tiktok [https://www.tiktok.com/@syntaxfm] LinkedIn [https://www.linkedin.com/company/96077407/admin/feed/posts/] Threads [https://www.threads.net/@syntax_fm] Wes: X [https://twitter.com/wesbos] Instagram [https://www.instagram.com/wesbos/] Tiktok [https://www.tiktok.com/@wesbos] LinkedIn [https://www.linkedin.com/in/wesbos/] Threads [https://www.threads.net/@wesbos] Scott: X [https://twitter.com/stolinski] Instagram [https://www.instagram.com/stolinski/] Tiktok [https://www.tiktok.com/@stolinski] LinkedIn [https://www.linkedin.com/in/stolinski/] Threads [https://www.threads.net/@stolinski] Randy: X [https://twitter.com/randyrektor] Instagram [https://www.instagram.com/randyrektor/] YouTube [https://www.youtube.com/@randyrektor] Threads [https://www.threads.net/@randyrektor]

Wes and Scott talk with Chad Whitacre, the newest member of the Syntax team, about all things open source—licenses, controversies, economics, and ethics. Chad breaks down what most people misunderstand, and how companies can support sustainable software development the right way. Show Notes * 00:00 Welcome to Syntax! * 00:39 Meet Chad Whitacre * 03:39 Chad’s retro headphones * Retrospekt [https://retrospekt.com/products/retro-orange-headphones] * 05:00 Chad’s role at Syntax * https://syntax.fm/oss [https://syntax.fm/oss] * Open Path [https://openpath.quest/] * 09:41 What do people get wrong about open source? * 11:11 Why is open source so divisive? * 13:01 The evolution of open source and free software * 17:55 Single vendor vs. community open source * 20:22 How do people build businesses off of a GPL license? * 24:40 What’s the most pure version of open source? * 26:55 Fair source licensing explained * 30:30 Brought to you by Sentry.io [http://Sentry.io] * 33:09 Should you be concerned about dependencies in your app in relation to licensing? * Fair Source [https://fair.io/] * 35:16 What’s the most interesting/unusual open source license? * Beerware License [https://spdx.org/licenses/Beerware.html] * 40:00 What is Open Source Pledge? * Open Source Pledge [https://opensourcepledge.com/] * 45:41 Choosing the right open source license * 48:31 Wes’ most popular open source project * wait [https://www.npmjs.com/package/wait] * 49:39 Interesting open source projects * Mercedes-Benz embraces Open Source [https://group.mercedes-benz.com/innovation/digitalisation/industry-4-0/open-source-software.html] * Porsche Open Source Platform [https://opensource.porsche.com/] * 51:33 Licensing for educational content * 53:46 The beauty of open source * Plausible [https://github.com/plausible] * 56:12 Scott’s various open source projects * 56:44 The importance of contributing to open source projects * 59:16 Sick Picks + Shameless Plugs Sick Picks * Chad: Save The Cat! [https://www.amazon.com/Save-Last-Book-Screenwriting-Youll/dp/1932907009] Shameless Plugs * Chad: Coming soon Hit us up on Socials! Syntax: X [https://twitter.com/syntaxfm] Instagram [https://www.instagram.com/syntax_fm/] Tiktok [https://www.tiktok.com/@syntaxfm] LinkedIn [https://www.linkedin.com/company/96077407/admin/feed/posts/] Threads [https://www.threads.net/@syntax_fm] Wes: X [https://twitter.com/wesbos] Instagram [https://www.instagram.com/wesbos/] Tiktok [https://www.tiktok.com/@wesbos] LinkedIn [https://www.linkedin.com/in/wesbos/] Threads [https://www.threads.net/@wesbos] Scott: X [https://twitter.com/stolinski] Instagram [https://www.instagram.com/stolinski/] Tiktok [https://www.tiktok.com/@stolinski] LinkedIn [https://www.linkedin.com/in/stolinski/] Threads [https://www.threads.net/@stolinski] Randy: X [https://twitter.com/randyrektor] Instagram [https://www.instagram.com/randyrektor/] YouTube [https://www.youtube.com/@randyrektor] Threads [https://www.threads.net/@randyrektor]