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

A Frame XR/VR

A Frame Source Code with repl.it publishing

VITE Webflow and Three JS

GLB with Draco Compression

Three JS and Pixotronics

Three JS glb, texture, timeline view capture, draco compression export

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.
Prototype 1Prototype 2Link to GSAP Site

examples

toddsnyder.com Custom Shopify Theme Development

HTMLX

use with npm and or CDN

Animate with CSS Transitions using Native HTML/CSS.

examples

HTMLX CSS Transition

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 Resources
do this tutorial  R3Fiber and Three JS
AMAZING!
Bruno Simon's Three Journey
Drei Storybook
Drei Components

Three 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 JS

Wizardry jQuery / Class Design/UX

YSL - Native Vanilla Compile Enterprise Builds

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.
d Converter
Fluid Layout Calculator
REM/Percentage based Typography

jquery

embeded natively in webflow static export

Link to Jquery Visual Builder

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 11ty
Animate 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.
AGILE, Source Set, Image Management

Locomotive Scroll

Resources

JS Based Scroll Tools
Github Source Code

3D Texture Modeling

Resources

Apply Illustrator Repeat Patterns export to glb and to AI VR

Adobe Dimension is included with Creative cloud

Creative Cloud

GLTF 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.

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

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 Code

Texture Maps

Add Material styles

Resources for generating depth, "fabric, grass, stone, 3D wrapping"
Normal Map Converter

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.
YSL - Native Vanilla Compile Enterprise Builds

Lottie

Resources

Flat frame based animations. Export to file formats.

plugin for After Effects export

After Effects PluginMotion Graphic Templates

Figma

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.
Principle/Figma  Animation Project
Principle/Figma  Animation Project

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 Gator

Animate Vanilla JS in Native DOM

GSAP and Lenis JS

GSAP and Lenis JS are Vanilla Javascript and will work "anywhere"

Needle Tools

Resources

Unity Based GLTF management
Needle Tools

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.
Press w a d s to "walk" spacebar "jumps" and arrow left/right spins camera

Gaming Controls. Exceptionally easy and intuitive.

Spline JS Gaming
Spline JS Gaming Panel
Link to Spline
This is some text inside of a div block.