Blog
/ 
Code

Creative code: animation, 3D, and generative tools

TLDR

A curated set of tools and resources for building with animation, 3D, and generative code on the web.

Tags

Javascript
Animation
3D
Interactions
CSS

Date

Jan 16, 2026

Author

No-Code Supply Co.

Creative code is one of those spaces where the line between art and engineering gets blurry — in the best way. Whether you are building immersive 3D scenes with Three.js, crafting scroll-driven SVG animations, live-coding music patterns in the browser, or applying ASCII dithering effects to video in real-time, the tooling has never been more accessible. You do not need a CS degree or a background in motion studios. The barrier to entry is a browser and some curiosity.

Three.js
Code
Library
/ 

Three.js

9.30.24
Creative, Dev Tools, Javascript, Animation, Interactions, 3D
Annnimate
Code
Library
/ 

Annnimate

1.5.26
Creative, Dev Tools, Animation, Webflow
Codrops Creative Hub
Tools
Directory
/ 

Codrops Creative Hub

9.30.25
Creative, Dev Tools, Custom Code, Javascript, CSS, Interactions, Animation, 3D, GSAP, Three.js
Interactive SVG Animations
Learn
Course
/ 
Article

Interactive SVG Animations

12.1.25
Creative, Dev Tools, Assets, Animation, Workflow
Strudel REPL
Code
Library
/ 

Strudel REPL

1.11.26
Music, Dev Tools, Javascript, Custom Code, Audio
Ripplix
Tools
Directory
/ 

Ripplix

1.23.26
Creative, Animation, Gallery
Efecto
Tools
App
/ 
Utility

Efecto

11.14.25
Creative, AI, Assets, Workflow, 3D, Video
Puck
Code
Library
/ 
Utility

Puck

12.22.25
AI, Dev Tools, Creative, No-code, Javascript, Website Builder, Onlook
Slide Right
Slide Right
Slide Left
Slide Left

Pretty straightforward on the surface, but there is more depth here than you might expect. A few of these are full libraries you will build entire projects around. Others are one-afternoon experiments that teach you something new about what is possible on the web. Either way — if you have been wanting to add more motion, depth, or generative flair to your work, this is a solid starting point.

Keep exploring

Items
0
Layout
Grid View
Row View
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Hide Page From Google Search w/ Meta Tag
Code
Snippet
/ 

Hide Page From Google Search w/ Meta Tag

12.16.22
HTML, SEO
Vectary
Tools
App
/ 

Vectary

12.13.22
SAAS, 3D
Artboard Studio
Tools
App
/ 

Artboard Studio

12.12.22
Creative, Motion Design, Video, Animation
Matter.js
Code
Library
/ 

Matter.js

12.11.22
Javascript, Animation, Aesthetic, Using Matter.js in Webflow, Matter.js with Responsive SVG Bodies
Morpher for Framer
Tools
Component
/ 

Morpher for Framer

12.5.22
Extending, Assets, Animation, SVG, Framer, Benjamin den Boer
Summarize Airtable Text with OpenAI
Learn
Tip
/ 

Summarize Airtable Text with OpenAI

12.3.22
AI, Javascript, Airtable, OpenAI
Carbon
Tools
Utility
/ 

Carbon

12.1.22
Custom Code, Javascript, HTML, CSS, Jquery
Web Bae Resource Library
Tools
Directory
/ 

Web Bae Resource Library

11.21.22
No-code, Custom Code, How To, Javascript, CSS, HTML, Your Own Webflow Component Library is EASY???, Webflow
Spline
Tools
App
/ 

Spline

11.4.22
Creative, Marketing, 3D
Womp
Tools
App
/ 

Womp

11.4.22
Creative, Landing, 3D
Bezel
Tools
App
/ 

Bezel

11.4.22
Creative, Marketing, 3D
Animator for Framer
Tools
Component
/ 

Animator for Framer

11.2.22
Animation, Extending, Framer, Benjamin den Boer
Supply.family
Tools
Directory
/ 

Supply.family

11.1.22
Creative, Design System, Fonts, Mockups, 3D
Redirect Form on Submit and Pass Input Value to URL
Code
Snippet
/ 

Redirect Form on Submit and Pass Input Value to URL

10.23.22
Jquery, Get, URL, Forms, Hide/show Based on URL Parameter, Set Hidden Input Value From URL Parameters, Set Text From URL Parameters, Corey Moen
Refokus Tools
Tools
Utility
/ 
Website

Refokus Tools

10.20.22
CMS, Interactions, Slider, Webflow, Refokus
Reinitialize Webflow Interactions
Code
Snippet
/ 

Reinitialize Webflow Interactions

10.19.22
Javascript, API, Interactions, Load, Webflow
Get Image Size w/ Airtable Script
Code
Snippet
/ 

Get Image Size w/ Airtable Script

10.10.22
Javascript, Get, Loop, Set, Airtable, Airtable Scripts Marketplace, Corey Moen
Compress Images w/ Airtable Script
Code
Snippet
/ 

Compress Images w/ Airtable Script

10.10.22
Javascript, API, Automation, Airtable, Airtable Scripts Marketplace, Kraken, Corey Moen
Finsweet Attributes
Tools
Utility
/ 

Finsweet Attributes

10.7.22
CMS, Custom Code, Extending, Search, Frontend, Interactions, Navigation, Webflow
Simple Countdown to Date/Time
Code
Snippet
/ 

Simple Countdown to Date/Time

10.6.22
Javascript, Set, Time, Corey Moen
Moment.js
Code
Library
/ 

Moment.js

10.3.22
Javascript, Time, Validate
Metaballs
Learn
Tip
/ 

Metaballs

9.24.22
How To, CSS, Aesthetic, Animation
Finsweet Attributes Ready JS Method
Code
Snippet
/ 

Finsweet Attributes Ready JS Method

8.31.22
Javascript, API, Load, Finsweet
Effect All Siblings on Hover With CSS
Code
Snippet
/ 

Effect All Siblings on Hover With CSS

8.30.22
CSS, Aesthetic, Hide/Show, Set
Fable
Tools
App
/ 

Fable

8.29.22
Motion Design, Animation
Framer
Tools
App
/ 

Framer

8.28.22
Accessibility, CMS, Forms, Hosting, Interactions, Website Builder, Framer Training, CourseOS, Cubo, Streamline Icons, Instaprice, Traf, Godlike, Charles, Ultra, MOD, Dann Petty, Dive, How to add a custom class to an element in Framer, Nocode.gallery, Framer.supply, Zapier Brand, Detail, Vibrant, Framer Tips, Remix Framer, Animator for Framer, Morpher for Framer, Heading for Framer, Particles for Framer, Good Design Tools, Framepad, MessageBird, Copy-Paste SVG Shapes, Framer Daily Drops, VSK, Mars Rejects, Databar, Pimpinella, Before & After Image Slider for Framer, Studio Duo, HyperFramer, Framer Overrides, Framer Form Component, Framestack, Gil Huybrecht, Framerave, FramerAuth, Interfacer, Framer University, Thenty, BuildBetter AI, Navs.Supply, Bajgart Design Office, Off-Grid, Off-Grid, Overrrides, SegmentUI, Form Studio, Oleg Masnyy, FramerForms
Creating Lottie Files Using Illustrator & After Effects for Webflow
Learn
Video
/ 

Creating Lottie Files Using Illustrator & After Effects for Webflow

8.28.22
Animation, How To, Webflow, Timothy Ricks
Building a Liquid Nav in Webflow
Learn
Video
/ 

Building a Liquid Nav in Webflow

8.28.22
Custom Code, How To, Interactions, Navigation, Webflow
Adaptive Page Loader in Webflow
Learn
Video
/ 

Adaptive Page Loader in Webflow

8.28.22
Animation, Custom Code, How To, Webflow
Top 5 CSS Tricks You Must Know for Webflow
Learn
Video
/ 

Top 5 CSS Tricks You Must Know for Webflow

8.28.22
Custom Code, Frontend, How To, CSS, Webflow, Timothy Ricks
Create Award Winning Animation and Interaction Design in Webflow
Learn
Course
/ 

Create Award Winning Animation and Interaction Design in Webflow

$110
8.28.22
Animation, How To, Interactions, Webflow
Overlapping Page Transitions in Webflow
Learn
Video
/ 

Overlapping Page Transitions in Webflow

8.28.22
Custom Code, How To, Interactions, Navigation, Webflow, Timothy Ricks
Top Five Interactions Designers Struggle to Create in Webflow
Learn
Video
/ 

Top Five Interactions Designers Struggle to Create in Webflow

8.28.22
How To, Interactions, Webflow, Timothy Ricks
Using Matter.js in Webflow
Learn
Video
/ 

Using Matter.js in Webflow

8.28.22
Animation, How To, Interactions, Custom Code, Matter.js, Webflow, Timothy Ricks
How to Webflow like a boss
Learn
Course
/ 

How to Webflow like a boss

$100
8.28.22
Frontend, How To, Interactions, Webflow
Accessibility Checklist
Tools
Utility
/ 

Accessibility Checklist

8.23.22
Accessibility, Custom Code, How To, Javascript, CSS, Webflow
Sticky Scroll Feature Section
Tools
Component
/ 

Sticky Scroll Feature Section

8.5.22
Interactions, Scroll, Scrollytelling, Webflow, Corey Moen
CSS Logo Marquee / Ticker
Code
Snippet
/ 

CSS Logo Marquee / Ticker

5.25.22
CSS, Loop, Animation, Corey Moen
Bulk Delete 301 Redirects From Webflow
Code
Snippet
/ 

Bulk Delete 301 Redirects From Webflow

5.20.22
Javascript, Hack, Webflow
Birthday Age Gate Modal Overlay
Code
Snippet
/ 

Birthday Age Gate Modal Overlay

5.10.22
Javascript, Cookie, Validate, Webflow, Corey Moen
View All or Show Less List Pagination
Code
Snippet
/ 

View All or Show Less List Pagination

4.11.22
Javascript, CMS, Paginate, Human Capital, Corey Moen
GSAP
Code
Library
/ 

GSAP

4.1.22
Javascript, Animation, Aesthetic, GSAP Scrolltrigger for Advanced Scroll Interactions, Animate Along SVG Path Using GSAP, Pixelate Images Interaction in Webflow, GSAP Text Animator
Update Page Title When Navigating Away
Code
Snippet
/ 

Update Page Title When Navigating Away

3.30.22
Javascript, Set
Get UTM Parameter Source From URL
Code
Snippet
/ 

Get UTM Parameter Source From URL

3.28.22
Javascript, Get, URL, Hide/show Based on URL Parameter, Set Text From URL Parameters
Set Referrer URL as Hidden Input
Code
Snippet
/ 

Set Referrer URL as Hidden Input

3.28.22
Javascript, Set, URL, Corey Moen
Fetch and Nest Content From Another Page
Code
Snippet
/ 

Fetch and Nest Content From Another Page

3.17.22
Javascript, Jquery, Get, Load, Corey Moen
Add Commas to Numbers
Code
Snippet
/ 

Add Commas to Numbers

2.19.22
Javascript, Number, Corey Moen
Round Number to Nearest Integer
Code
Snippet
/ 

Round Number to Nearest Integer

2.19.22
Javascript, Number, Corey Moen
Set Text From URL Parameters
Code
Snippet
/ 

Set Text From URL Parameters

2.19.22
Javascript, Set, URL, Get UTM Parameter Source From URL, Redirect Form on Submit and Pass Input Value to URL, Corey Moen
Custom Text Underline Offset, Size and Color
Code
Snippet
/ 

Custom Text Underline Offset, Size and Color

2.19.22
CSS, Aesthetic
Prevent Body Scroll on Click
Code
Snippet
/ 

Prevent Body Scroll on Click

2.11.22
Javascript, Click, Scroll, Corey Moen
WeBlocks
Tools
Utility
/ 

WeBlocks

1.30.22
No-code, Extending, Custom Code, Javascript, Webflow
Load more

Bummer, no results

Try a different search/filter combo, or drop us some feedback if there is something missing you would love to see!

Reset filters

Subscribe for updates

Get updates on the latest curated resources and be the first to hear of new features.