Discover the best canvas websites created by professional designers. Get inspired and start planning your perfect canvas web design today!

CJ Hersh

While learning about canvas last year, I took some time to reverse engineer (hack together) this beautiful slider, originally built by the team at ToyFight. The real beauty is in the desktop interaction. 

Some notes:
- Mobile view is using Hammer.JS for the slider
- Images can be updated by changing the attributes found in each <li>. Just replace the current image URL with your own.
- The "View Details" URL's can be updated the same way. 
- You can change "View Details" to say "View Project" by changing the attribute 'data-video' to false. If you want it to say something else, feel free to dive into the code - it's a fairly easy change. 

Credit: The ToyFight Team!

Canvas Slider

Create Something

In this episode of What In Webflow 013, we walk-through how to integrate custom code to have a canvas to draw on in Webflow

To walk-through this tutorial with me, make sure you use the cloneable project at https://webflow.com/website/Canvas-in-Webflow

Also, you can find a more comprehensive tutorial at https://www.superhi.com/video/how-to-draw-and-paint-using-html-canvas

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

I'm happy to help further!

Canvas in Webflow

Francesco Castronuovo

Hi my gorgeous friends of Webflow!

Have you ever tried to embed an HTML canvas into your projects? By playing a bit with Java Script, you can use it to add a fancy cursor tracking effect to your websites! :)

Enjoy, and feel free to leave a comment!

Have an awesome Webflow journey y'all,

Francesco

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Canvas Cursor Tracking

JP Dionisio

Trying out how to work out 3d files into Webflow.

Also, I did an animated 3d icon to indicate interactivity. 
Had fun doing this bit. haha.

⚠️ YesCode: Code-heavy project! ⚠️

Codepen from Arden
https://codepen.io/aderaaij/pen/BapYONL

You can use this as a starter template for glb/gltf files.

Feel free to clone and enjoy!

Portal Journey - Three.js

BuildBites

Hey there!👋
We rebuilt a Pablo Farias website's canvas move interaction.

Use it freely! :)

P.s. Need a website? Drop us a line at hi@buildbites.com.
We provide an unlimited Webflow development for a flat monthly fee!

Pablo Farias website interaction experiment

Eloy Be

I made a quick DOS-styled landing page to have a little coming soon notice on my new domain http://eloyb.design  
The layout and execution are pretty simple, used Typed.js for text animations, custom interactions for button reveals, and added a canvas line that follows the cursor just because it felt cool.

Stay tuned for the real deal once my new page is launched!
Thanks for watching :)

Coming Soon Page // eloyb.design

A website to bend light in three different waves.

⚠️ YesCode: Code-heavy project! ⚠️

While studying Three.js, I found this awesome pen from Yuki. 

Codepen from Yuki
https://codepen.io/Web_yuki1027/pen/yLgYpWM

Feel free to clone and enjoy!

Bending Light - Three.js

Jakob Wrs

Sketch.js :D

Press C = Clear

https://github.com/soulwire/sketch.js

Multitouch Draw

A collection of components for Webflow projects. Each one with its own video tutorial.

1) Three responsive flexbox patterns
2) Quick and easy responsive grid borders
3) No code immersive grid gallery
4) Infinite marquee with stop on hover, an attributes-only solution
5) GSAP Trail Image effect, an attributes-only solution
6) Automatically open a dropdown on page load, an attributes-only solution
7) Canvas cursor tracking effect, an attributes-only solution
8) Webflow's website navbar and mega menu, built by using new Webflow components
9) Distortion draggable slider, an attributes-only solution
10) Growing link underline interaction on hover
11) GSAP button on-hover interaction, an attributes-only solution
12) No-code premium scrolling gallery

Wanna take a deeper look at what's inside?

Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Webflow Friendly Components

Hey this is a very nice Background animation with a really small file size 👌🏻

Github:
https://github.com/crnacura/AmbientCanvasBackgrounds
(I bundled the Js Files)

Change Background Color:
1) download the .txt fill
2) search for „backgroundColor“
3) change the hsla code
4) upload the new file
5) link the new script in the script tag

Pipeline Animation

Vlad Danilchenko

------------------------
Warning! 
I try to put all the projects for copying, so you can reuse them and learn something new.

But you don't get the likes, which supports me. 

Please, give me a "like" if you copy the project
------------------------

A website for my circle partner from Chicago. WebGL + noise + custom animations + horizontal scrolling.

alex-flow

Website Design for Melbourne Deejays & Event runners...

Website features:
- CMS soundcloud files without zapier
- HTML5 canvas animation
- instagram like gallery on image gallery
- CMS gallery
- CMS slider
- Custom animations
- Ecommerce Slider (Shop not setup)
- Counter

insessions-mockup

Are you having a hard time making Three.js work on your website? 

This cloneable shows you how to use Three.js in Webflow so that you can start your journey in learning and building with Three.js in Webflow

A starter template to use Three.js in your Webflow project.

Feel free to clone and enjoy! :)

Three.js Template

Granyon

---- CLICK ON LINK TO VIEW ----

Granyon decided to bring employees, partners, and customers together for a late summer/fall party. And of course, the invitation should be special.

Vote for us on Awwwards if you like it: https://www.awwwards.com/sites/the-great-granyon-gathering

Thanks for your time. :)

The Great Granyon Gathering

Webflowtips

In just a couple clicks you can add a bouncing particle animation to any of your projects. You can just copy and paste the code on the “custom code” section and modify it if you feel adventurous. 

Sign up if you want the lesson: www.webflowtips.com/b/how-to-create-a-particle-animation

If you have any questions feel free to comment.

P.S 🙂  🙌  - Like or follow if this was useful for you.

8 of 50

How to add a particle bounce animation?

Create your own waves with this project!

⚠️ YesCode: Code heavy project! ⚠️

from Codepen of Arden:
https://codepen.io/aderaaij/pen/XWpMONO

The Raging Sea - Three.js

Youness Benammou

I’m so thrilled to share this new website. One of my most exciting projects! Props for a stunning design by the team at Planetly.

Check it here:
https://planetly-v2-by-wtm.webflow.io/

Feat:
@webflow  💙
@greensock  💚
@thatsfinsweet  💜

planetly-v2-by-wtm

Web Bae

Wandering dots is my recreation of a neat hero effect seen on https://finiam.com/ by Onda Studio. It's a great intro to introducing randomness to animations, linear interpolation function (lerp), and dealing with speed in p5.js. It's also a simple implementation of scroll and mouse click behavior in p5!

Discover canvas websites built by the Webflow community

Discover canvas websites built by the Webflow community