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

My YouTube Webflow community asked for a nice grid design as a tutorial, so I recreated Vitaa Architects' Journal section as an example: have a look at the original website here: vitaarchitecture.com/journal

They didn't use css grid for their layout but I found it is a perfect use case for it. 
The grid contains several collection lists which are always limited to one item. This allowed me to create a more varied grid design.  

I also use a fluid design system. It scales down the grid on the desktop breakpoint from 1600px downwards. The custom CSS for this is written in the global-css embed.

Watch the tutorial here: https://youtu.be/9plbrIo4lfM

🖤

Free Grid Design Template (CMS ready)

Refokus

2021! Our first year! And... What a year! 🚀

We are so happy that we've made a cool website to show off!

We've created Refokus in January 2021, and this was our first year! For us was a year of growth, building an amazing team, building our culture, setting up our processes, defining our brand, and so much more.

We want to thank everyone who trusted and supported us in this first year!

2022 already started amazingly, with a lot of new clients, great new projects, new people joining us, and a lot of amazing stuff coming!

Year #2 is getting 🔥 🔥 🔥 ... and we are also hiring! just saying...

Refokus Year in Review 2021

Just a simple little retro 3d grid effect with optional scan-lines overlay.

✅ Native Interactions
✅ Custom CSS (optional)

--

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

Retro 3D Grid

MM—011: Retro 3D Grid

Webflow

Webflow’s annual No-Code Conf is back! Join us November 17–18, 2021 to reunite with the makers, creators, and visionaries who are shaping the future of the web.

No-Code Conf 2021

A 3D scroll animation that lets you slowly rotate a tablet towards the viewer while scrolling. You can even use animated videos instead of a static image. I use this setup in one of my case studies in my portfolio.

Watch the Tutorial: 
https://youtu.be/yX_KhCuMx_Q

3D Tablet Scroll Animation | Free Template

3D Tablet Scroll Animation in Webflow | Free Template

Dunclyde

Hi everyone, I was inspired to create this based on a recent website I saw on CSS Design Awards. It's all Webflow, no JS used, only a few CSS lines for the text outline.

Have fun!

Air Force Text

Tech 3D Text

Hi my gorgeous friends of Webflow,

This project contains a browsable sushi menu from a CMS collection

Enjoy and feel free to leave a comment!

Browsable Sushi Menu from a CMS Collection

Browsable Menu from a CMS Collection

This is an experiment made for my application to The speed build Challenge at NoCode Conf 2021.

The idea was to build an illustration of a mobile phone in just 5 min. You can see the video in this link:

https://www.loom.com/share/1644244b356540ceba956523d75034d2

Then I decided to make a more complex model to share it with the community, just for fun.

The main idea of this technic is using different layers pilled inside each other on absolute positions and with the use of Z-Index properties. 

I hope you liked.

3D Iphone

Redis Team

We've updated our agency's website because it's time for a change. Except for a simple layout, our new website is a full-fledged development with almost no Webflow elements.

We wrote the code for the endless scroll ourselves, and we added our favorite radishes and photos of our guys that change randomly with each turn.

Check it up at redis.agency.

Redis

Redis Agency

Hero Image Concept

3D Hero Image Concept

Website for an Italian startup that makes shapable, solid and safe electric supercapacitors.

novac

Novac Supercapacitors

In this Webflow tutorial I will show you how to create a scroll animation with a 3D perspective. With a few tricks you can even make 2D objects look like 3D and bring a wow effect into your website.‍ To make the whole thing scale smaller easily, I use the Fluid Design System on the desktop breakpoint (see custom-CSS embed element).

Watch the tutorial here: https://youtu.be/NNGW2IlfNxA

3D Scroll Animation in Webflow

Hi my gorgeous friends of Webflow,

This project contains

1) A full-responsive 3D foldable card effect on hover
2) A full-responsive 3D foldable card effect when scrolling into view

Enjoy and feel free to leave a comment!

Flipable Card

Hi my gorgeous friends of Webflow,

This project contains a 3D card animation on scroll - built with absolutely no code - that you could use to show testimonial or process cards on your websites.

Copy and illustrations belong to Flux Academy (https://www.flux-academy.com/), an awesome place if you want to learn the art and business of Web Design! :)

Enjoy and feel free to leave a comment!

3D Testimonial or Process Card Animation

3D Testimonial or Process Card Animation on Scroll

A minimalist portfolio of my eclectic skillset. Included are some 3D effects to add a little 'surprise and delight'.

With 2 decades of web design experience it still remains a constant learning experience, the web truly evolves every year bringing with it new and exciting ideas, systems and new processes.

Oliver Bibby.

Oliver - Portfolio Website

3D Sphere

3D Sphere Animation

Hi my gorgeous friends of Webflow,

By playing with Webflow interactions and animations, 3D transforms, and a bit of Math, you can create a round text effect with absolutely no code.

Scroll till the end of the page to reveal one last scroll-into-view interaction effect! :)

Enjoy, clone, and feel free to leave a comment!

Have an awesome Webflow journey y'all,
Francesco

No Code Round Text Effect

The Asset I - Error 404 page
================================
Support the Human behind the Machine by follow on social channels. 
-> Website  www.nocodemachine.com
-> Webflow www.webflow.com/nocodemachine
-> Twitter www.twitter.com/NoCodeMachine
-> LinkedIn https://www.linkedin.com/company/nocodemachine
-> Facebook https://www.facebook.com/NoCodeMachine
-> Instagram https://www.instagram.com/nocodemachine
-> Dribbble https://dribbble.com/NoCodeMachine
-> Reddit https://www.reddit.com/user/No-Code-Machine
-> Pinterest https://www.pinterest.com/NoCodeMachine
-> YouTube https://www.youtube.com/channel/UCQlRzk4y3ivRZtQbMldj8mA

Discover .css-73fekg{text-transform:capitalize;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;}3danimation websites built by the Webflow community

Discover 3danimation websites built by the Webflow community