--- title: The Architecture Behind Trionn: Coordinating GSAP,... description: A deep technical case study of Trionn, a studio website that unifies GSAP, Three.js, Lenis, and the Web Audio API into a single performant experience. The post... canonical: https://daily.dev/posts/the-architecture-behind-trionn-coordinating-gsap-three-js-lenis-and-web-audio-jsxof6qx6 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The Architecture Behind Trionn: Coordinating GSAP, Three.js, Lenis, and Web Audio | daily.dev og:description: A deep technical case study of Trionn, a studio website that unifies GSAP, Three.js, Lenis, and the Web Audio API into a single performant experience. The post... og:url: https://daily.dev/posts/the-architecture-behind-trionn-coordinating-gsap-three-js-lenis-and-web-audio-jsxof6qx6 og:image: https://api.daily.dev/og/posts/JSxOF6QX6.png og:image:alt: The Architecture Behind Trionn: Coordinating GSAP, Three.js, Lenis, and Web Audio og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # The Architecture Behind Trionn: Coordinating GSAP, Three.js, Lenis, and Web Audio **[Codrops](https://daily.dev/sources/codrops)** · 39 min read · 8 upvotes · 3 comments ## Summary A deep technical case study of Trionn, a studio website that unifies GSAP, Three.js, Lenis, and the Web Audio API into a single performant experience. The post covers the architecture behind each major section: a WebGL hero symbol with raycasting hover, hold-to-blast interaction, and synthesized audio; a scroll-driven Services sequence coordinating a 371-frame WebP image sequence, particle headline explosion, and service card animations from a single normalized scroll progress value; a parametric Double Helix gallery with per-frame geometry deformation, shader-based rounded corners, and demand-driven rendering; an SVG footer logo where each stroke behaves as a pluckable string with real-time Web Audio synthesis and audio-reactive procedural fog; a depth-mapped lion portrait with spring-physics curtain strips; and a scatter-wall gallery with collision-safe randomized layouts and client-side dominant color extraction. Key architectural patterns include a shared explodeAmt state combining scroll, hover, and click interactions via Math.max(), idle-time preloading with requestIdleCallback, GPU layer management via will-change, and demand-driven WebGL rendering tied to ScrollTrigger rather than continuous animation loops. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do you synchronize Lenis smooth scrolling with GSAP ScrollTrigger? Lenis is driven directly from gsap.ticker rather than running its own animation loop, which keeps scroll position synchronized with ScrollTrigger throughout a site. This avoids desync between the smooth-scroll library and GSAP's timeline-based scroll animations, since both update on the same tick. _Developers wiring smooth scroll into animation timelines can find implementation patterns like this on daily.dev._ ### How can I create a scroll-scrubbed image sequence animation without using canvas or video? A 371-frame WebP sequence can be scrubbed by updating the src attribute of a standard img element, easing the frame index toward the scroll-derived target frame each animation loop tick. Frames are preloaded in requestIdleCallback batches of 20 using img.decode() to avoid jank, and only the DOM src is updated when the frame index actually changes. _Anyone optimizing scroll-driven image sequences can track techniques like this via daily.dev._ ### How do you avoid a rendering hitch when a WebGL scene first becomes visible on scroll? Warm up the scene ahead of time by rendering it once before the user reaches it: call renderer.compile() to compile all shaders and renderer.render() to upload textures and initialize GPU resources, then clear the frame so nothing is shown. This moves the one-time shader compilation and texture upload cost off the user's first visible frame. _Developers chasing smoother WebGL scroll transitions can follow techniques like this through daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@dhruvparmar92** · 2 upvotes > Juuuuust...Wow! The site is very cool. Such a great inspiration for Animation websites. You can also publish on '[Wall of Portfolio](https://www.wallofportfolios.in/?company=All)', '[Awwwards](https://www.awwwards.com/websites/3d/)' **@springtofigh** · 1 upvotes > Such a cool website!!!🚀✨🔥🔥 ## Similar posts on daily.dev - [Inside HAOQI.DESIGN: Letting DOM and WebGL Share a Retro-Futurist Stage](https://daily.dev/posts/inside-haoqi-design-letting-dom-and-webgl-share-a-retro-futurist-stage-onvg2vzkk) · Codrops · 1 upvotes · 0 comments - [Building Seamless 3D Transitions with Webflow, GSAP, and Three.js](https://daily.dev/posts/building-seamless-3d-transitions-with-webflow-gsap-and-three-js-vkf3mp1qr) · Codrops · 3 upvotes · 0 comments - [A Tour Of The Landscape](https://daily.dev/posts/a-tour-of-the-landscape-zxvoov4lf) · Larablog · 0 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#threejs](https://daily.dev/tags/threejs) [View this post on daily.dev](https://daily.dev/posts/the-architecture-behind-trionn-coordinating-gsap-three-js-lenis-and-web-audio-jsxof6qx6) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"The Architecture Behind Trionn: Coordinating GSAP, Three.js, Lenis, and Web Audio","url":"https://daily.dev/posts/the-architecture-behind-trionn-coordinating-gsap-three-js-lenis-and-web-audio-jsxof6qx6","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-architecture-behind-trionn-coordinating-gsap-three-js-lenis-and-web-audio-jsxof6qx6"},"datePublished":"2026-07-15T14:37:06.991Z","dateModified":"2026-09-13T19:15:04.467Z","description":"A deep technical case study of Trionn, a studio website that unifies GSAP, Three.js, Lenis, and the Web Audio API into a single performant experience. The post...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/55b890644f2473aefc8bf8ea083a2632?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/55b890644f2473aefc8bf8ea083a2632?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Codrops","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Codrops","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/codrops","url":"https://daily.dev/sources/codrops"},"commentCount":3,"discussionUrl":"https://daily.dev/posts/the-architecture-behind-trionn-coordinating-gsap-three-js-lenis-and-web-audio-jsxof6qx6","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":8},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":3}],"keywords":"webdev,threejs","timeRequired":"PT39M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Codrops","item":"https://daily.dev/sources/codrops"},{"@type":"ListItem","position":3,"name":"The Architecture Behind Trionn: Coordinating GSAP, Three.js, Lenis, and Web Audio"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/the-architecture-behind-trionn-coordinating-gsap-three-js-lenis-and-web-audio-jsxof6qx6","comment":[{"@type":"Comment","text":"Juuuuust…Wow! The site is very cool. Such a great inspiration for Animation websites. You can also publish on ‘Wall of Portfolio’, ‘Awwwards’","datePublished":"2026-07-16T04:40:15.056Z","url":"https://daily.dev/posts/JSxOF6QX6#c-1yBBunmoW","author":{"@type":"Person","name":"Dhruv Parmar","url":"https://daily.dev/dhruvparmar92","image":"https://media.daily.dev/image/upload/s--jOgxSgKk--/f_auto/v1759592543/avatars/avatar_PNBsgn7cuO9oYjF05Ji50?_a=BAMAK+ZW0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Such a cool website!!!🚀✨🔥🔥","datePublished":"2026-07-17T15:42:52.906Z","url":"https://daily.dev/posts/JSxOF6QX6#c-JcTKgQZIY","author":{"@type":"Person","name":"Spring Tofigh","url":"https://daily.dev/springtofigh","image":"https://avatars.githubusercontent.com/u/90114320?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/the-architecture-behind-trionn-coordinating-gsap-three-js-lenis-and-web-audio-jsxof6qx6#faq","mainEntity":[{"@type":"Question","name":"How do you synchronize Lenis smooth scrolling with GSAP ScrollTrigger?","acceptedAnswer":{"@type":"Answer","text":"Lenis is driven directly from gsap.ticker rather than running its own animation loop, which keeps scroll position synchronized with ScrollTrigger throughout a site. This avoids desync between the smooth-scroll library and GSAP's timeline-based scroll animations, since both update on the same tick. Developers wiring smooth scroll into animation timelines can find implementation patterns like this on daily.dev."}},{"@type":"Question","name":"How can I create a scroll-scrubbed image sequence animation without using canvas or video?","acceptedAnswer":{"@type":"Answer","text":"A 371-frame WebP sequence can be scrubbed by updating the src attribute of a standard img element, easing the frame index toward the scroll-derived target frame each animation loop tick. Frames are preloaded in requestIdleCallback batches of 20 using img.decode() to avoid jank, and only the DOM src is updated when the frame index actually changes. Anyone optimizing scroll-driven image sequences can track techniques like this via daily.dev."}},{"@type":"Question","name":"How do you avoid a rendering hitch when a WebGL scene first becomes visible on scroll?","acceptedAnswer":{"@type":"Answer","text":"Warm up the scene ahead of time by rendering it once before the user reaches it: call renderer.compile() to compile all shaders and renderer.render() to upload textures and initialize GPU resources, then clear the frame so nothing is shown. This moves the one-time shader compilation and texture upload cost off the user's first visible frame. Developers chasing smoother WebGL scroll transitions can follow techniques like this through daily.dev."}}]} ```