Interactive Architecture
SKP Architectural Conversion to optimized THREE JS, with interactive GSAP Scroll and Responsive Framework. Three JS, GSAP, GLB, Substance Designer.
CLO / Avatar and Three JS Interactive
CLO and AVATAR Media and Interactive PIPELINE. Three JS/GSAP. GLB and Substance Texture
VITE Webflow and Three JS
GLB with Draco Compression
Three JS and Pixotronics
Three JS glb, texture, timeline view capture, draco compression export
Animation Stacks
3D Models can be created in Blender and Adobe Dimension. Compression and File Size is managed using, Draco and Illustrator/Photoshop Pipeline for Textures and Surfaces. Excellent Ready to use materials are "free" in Adobe Substance Library that is included with Dimension.
Cinema 4D/After Effects and Lottie Exports to Vanilla prototyping, that can include GSAP, Greensock, Anime JS, SVG CSS native animation, can be prototyped and exported to Vanilla JS, HTML, CSS.
The components can be folded into Vue, Angular, React, Svelte, Astro, Remix, Custom Shopify / E Commerce Flows.
Forms and APIs can securely be hooked to Declarative snippets, as overlays or embedded "Actions". Authentication, Gating and Score Keeping can be managed via IA and in real time Asset Publishing.
Cinema 4D/After Effects and Lottie Exports to Vanilla prototyping, that can include GSAP, Greensock, Anime JS, SVG CSS native animation, can be prototyped and exported to Vanilla JS, HTML, CSS.
The components can be folded into Vue, Angular, React, Svelte, Astro, Remix, Custom Shopify / E Commerce Flows.
Forms and APIs can securely be hooked to Declarative snippets, as overlays or embedded "Actions". Authentication, Gating and Score Keeping can be managed via IA and in real time Asset Publishing.
GSAP
use with npm and or CDN
Include CDN Animation link in Higher Order Template or "Header Component" (this can also be included in custom Shopify, Magento, Wordpress, Salesforce Commerce configuration sections and cartridges). Configure to load after the HTML sets up.
examples
toddsnyder.com Custom Shopify Theme Development
HTMLX
use with npm and or CDN
Animate with CSS Transitions using Native HTML/CSS.
examples
Builds
Semantic ARchitecture
For Animation Libraries order of build/deferred js is important. Localhost development and cacheing may work. When you go to deploy, with brute force JS Compiles, your animations may not load correctly. JSON/and API backed animations need to be carefully planned.
React Three Fiber/Drei
Caution when using React with Animation: ScrollTrigger GSAP. Order of Execution matters. Ability to defer JS for GSAP will break if all the JS is compiled with a single load
use the wasd keys to avoid scroll jacking or open in new window
Source Code RepoOpen Game in New WindowReact 3 Fiber Resourcesdo this tutorial R3Fiber and Three JS
AMAZING!
Bruno Simon's Three JourneyAMAZING!
Drei Storybook
Drei ComponentsThree JS Vanilla
Three JS can be used with "Declarative" non React methods.
React 3 Fiber/Drei encapsulates Core Three JS Library.
Three JS and GSAP can be combined using Vanilla Code Base.
Three JSWizardry jQuery / Class Design/UX
examples
visual builder for vanilla "use anywhere" jquery interactions
Extend Figma/Principle Animation with Fully Responsive Use Anywhere (Shopify, Wordpress, Drupal, Salesforce, AEM, Angular, Next, VUE, React, Headless Netlify CMS-example below) Component Exports.
Extend Figma/Principle Animation with Fully Responsive Use Anywhere (Shopify, Wordpress, Drupal, Salesforce, AEM, Angular, Next, VUE, React, Headless Netlify CMS-example below) Component Exports.
jquery
embeded natively in webflow static export
examples
toddsnyder.com Custom Shopify Theme Development
Dynamic CMS for Animations
GIT CI CD Animation/Collections
Manage Private Folios for Design, Program Management, Atomic NFT Contract Publishing, Direct Pay Portals. Preview and Review with Private (GIT based) Documentation uploads.
Webflow Card Animation Converted to 11tyAnimate on a "Blockchain" Time Stamped updates and ledger. Collection and UI manage. Utilize Libraries: GSAP, Barba, Three JS, Swiper JS, etc. No limits. Access Control Content Management and Merge to Production with Role Based Moderation. Will hook to any CMS/CRM/EDI endpoint. IP based will also work with Machine Data and Display at Retail Publishing Strategies.
Create AGILE code and task sprints with version control linked to CI CD GIT based File Loading
Images/are Source Set, ADA Tagged and Time Stamped. This resource is free to use, and horizontally scales immediately.
Images/are Source Set, ADA Tagged and Time Stamped. This resource is free to use, and horizontally scales immediately.
3D Texture Modeling
Resources
Apply Illustrator Repeat Patterns export to glb and to AI VR
Adobe Dimension is included with Creative cloud
Creative CloudGLTF Models
Model publishing services with gltf downloads
Sketchfab offers auto-conversion of all of its downloadable models, including PBR models, to glTF format.
Poimandres Market offers 3D assets for download in glTF format.
Poly Haven offers CC0 (public domain equivalent) HDRIs, PBR textures, and glTF models.
Poimandres Market offers 3D assets for download in glTF format.
Poly Haven offers CC0 (public domain equivalent) HDRIs, PBR textures, and glTF models.
Kronos group
Kronos Group ModelsKronos Group Tutorialshttps://market.pmnd.rs/glb conversion
React three fiber/drei
Optimizing 3D models for Interactive use. React in Canvas/with hoisted JS to "flatten" complex layers of nested animation and modeling code. It will be the only time I recommend React over plain Vanilla Product Development.
run npx gltfjsx [name of grouped glb] export from Blender/Dimension]
gltfjsx converterDREIPMDR React Three Fiber Resources
run npx gltfjsx [name of grouped glb] export from Blender/Dimension]
Code Sandbox Development
Resources
Fork GLTF Code Sandbox and animations for prototyping to Github Publish. Code Sandbox examples include React Three Samples, Vanilla, Multiple Node Libraries prebuilt. Replace components and publish to Git, Netlify/Vercel. Fork and Scale.
Dimension 3D Export with Custom Texture/Fabric Application. Replace animation with CPG, Shoes, Apparel, Car Customizations.
The Red Chair has the same color with 2 different levels of "Roughness". The top is "canvas" and the bottom cushions are "velvet".
Github CodeThe Red Chair has the same color with 2 different levels of "Roughness". The top is "canvas" and the bottom cushions are "velvet".
Texture Maps
Add Material styles
Resources for generating depth, "fabric, grass, stone, 3D wrapping"
Lottie in Webflow
build
Native Lottie Animation import and interactive usage. Layer Lottie/Three JS. Include GSAP/Native Vanilla Animation.
You can use Three JS in Webflow with limited use. For full interactivity iframe Canvas to State Management and Animation (Vanilla) Webflow interactivity/gating/combination with Lottie.
You can use Three JS in Webflow with limited use. For full interactivity iframe Canvas to State Management and Animation (Vanilla) Webflow interactivity/gating/combination with Lottie.
Lottie
Resources
Flat frame based animations. Export to file formats.
plugin for After Effects export
After Effects PluginMotion Graphic TemplatesFigma
Extend Animation to Figma using Webflow Native/Responsive Animation Stack. Principle Handoff does not include usable animation. CSS/JS from Webflow can include API Headless CMS or Native Code that can be used anywhere.
SVG/CSS Animation
Resources
SVG and CSS are universal
Use in Figma/XD
Use in Enterprise CMS
Link to Headless CMS to Dynamically Render
Add JS Libraries/Fonts to Native CData header with Base 64 Compression
Host in Gitbased CDN and link to Responsive iframed Asset Management without breaking
SVG GatorUse in Figma/XD
Use in Enterprise CMS
Link to Headless CMS to Dynamically Render
Add JS Libraries/Fonts to Native CData header with Base 64 Compression
Host in Gitbased CDN and link to Responsive iframed Asset Management without breaking
Animate Vanilla JS in Native DOM
GSAP and Lenis JS
GSAP and Lenis JS are Vanilla Javascript and will work "anywhere"
Spline
Resources
Drag and Drop 3D Modeling and Interactive Action Tools
Bring Illustrator SVGs and Model and Animate in WYSWYG online Editor.
Gaming with First Person Walk Throughs can be individually created with free/private/public 3D publishing and Game Engine.
Gaming with First Person Walk Throughs can be individually created with free/private/public 3D publishing and Game Engine.
Press w a d s to "walk" spacebar "jumps" and arrow left/right spins camera
Gaming Controls. Exceptionally easy and intuitive.
Link to Spline
This is some text inside of a div block.