A collection of components for Webflow projects. From design patterns and no-code components to custom solutions built with JavaScript and CSS. Each one with its own video tutorial.

What you can find inside:
1) Three responsive flexbox design patterns
2) Quick and easy responsive solution to add borders to a grid
3) No code solution to build an immersive grid gallery experience
4) Infinite marquee with stop on hover, an attributes-only solution with a focus on motion accessibility
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

Wanna take a deeper look at what's inside?

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

Webflow Friendly Components

Hi my gorgeous friends of Webflow!

Have you ever heard of Greenvelope (https://www.greenvelope.com/)?
They're great at email invitations.

Came across their website a few days ago and wondered if the animation they built - which also has some soft cool effects - could be recreated within Webflow.

This cloneable is my answer. It's a completely responsive CMS envelope (with animations) built with absolutely no code.

Pretty much every text and image you see is customizable through a specific field inside the CMS - side-menu included.

Oh, before I forget! There's also a CMS link field to a Google Map that I embedded in a simple popup. Search for the map icon and let it show!

Enjoy, clone, 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

No Code Animated Responsive CMS Envelope

Hi my gorgeous friends of Webflow,

By playing a bit with jQuery and by using attributes to avoid the need for class matching, you can create a responsive CMS video player for your Webflow project.

Check for the instruction popup! 😊

Have an awesome Webflow journey y'all,
Francesco

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

Responsive CMS Video Player

Hi my gorgeous friends of Webflow,

A few days ago I stumbled upon a fancy glitch animation on hover, and I wondered if that could be done in Webflow with absolutely no code.

The answer is YES! And you will see it in the top left part of the page.
In the bottom right corner, an experiment of mine. 😊

You just need to play a bit with filters, move transforms, and Webflow animations and interactions.

I think these could be great for a logo in the navbar.

Enjoy, clone, 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

No Code Glitch Animations On Hover

Hi my gorgeous friends of Webflow,

This cloneable was built from a Jacob Foster's project:

https://codepen.io/Alca/pen/GRyBJZX

I tweaked the code a bit to make it fully responsive and directly configurabile from your Webflow project by using attributes. 😊

Things you can customize through attributes:

- Particle color (HSL format)
- Scale factor for desktop/tablet and mobile, for better responsiveness
- Particle density
- Cube perspective
- Particle spread
- Particle velocity

Just add the corresponding attributes to the div you want to host your canvas animation in and play around with attribute values! 😁

Look for the 'hero-section__canvas-host' element inside my project to get the whole list from the Element Settings panel and don't forget to add the 'fc-canvas-host' attribute as well!

Enjoy, clone, 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

Animated Cube Particles With Canvas

Hi my gorgeous friends of Webflow,

This project plays a bit with YouTube APIs, window scroll event, and - of course - the beauty and power of Webflow interactions to create a horizontal scroll animation where videos are automatically played or paused on scroll.

Also delayed the play function a bit to add an intro animation to each video by mixing the horizontal scrolling with simple scroll into view interactions.

The page load animation is a bonus. 😊

Shoutout to "The First Take" (https://www.youtube.com/channel/UC9zY_E8mcAo_Oq772LEZq8Q/videos), where you can find all the Japanese singers and bands that I love. 😁

Enjoy, clone, 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

Automatically Play Videos On Horizontal Scroll

Hi my gorgeous friends of Webflow,

This time I merged Webflow interactions and animations with a bit of CSS animations and JavaScript to create a fun and entertaining countdown timer.

Why is it different from all other timers you can find on Webflow Showcase?

Because it has a custom sliding CSS animation, it is completely based on attributes, and it is modular!

How to use it in your own projects? Just click on "How does it work?" to open the instruction pop-up.

Oh, and don't forget to scroll down the page! 😁

Enjoy, clone, 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

Countdown Sliding Timer

Hi my gorgeous friends of Webflow,

By putting together the phenomenal cosmic power of Webflow interactions and animations, the flexibility and ease-of-use of Finsweet Attributes, and just a bit of jQuery, you can build and engaging thumbnail slider with pretty cool slide transitions and content directly from the CMS.

Enjoy, clone, 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

CMS Thumbnail Slider With Finsweet Attributes

Hi my gorgeous friends of Webflow,

By playing with Webflow interactions and animations, and a bit of jQuery, you can create a growing circle animation on hover that follows cursor position.

And there is also a fancy image revealing animation on page load, if you wanna check it out! :)

Enjoy, clone, 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

Cursor Following Growing Circle 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

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

No Code Round Text Effect

Hi my gorgeous friends of Webflow!

By playing with Webflow IX2 or with a simple CSS workaround, you can build a linear gradient animation on hover for your buttons. :)

Enjoy, and feel free to leave a comment!

Have an awesome Webflow journey y'all,

Francesco

--------------------------------------------

UPDATE - 2022/02/22: Just added an infinitely looping version for both the animations. :)

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

Button Linear Gradient Animation

Hi my gorgeous friends of Webflow!

By playing with backdrop filters, svg clip path, and linear gradients, you can add a nice glowing text effect to your Webflow project.

Just hover over the image to reveal the animation! :)

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

Glowing Text Effect

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

Hi my gorgeous friends of Webflow,

This project is meant to show that with absolutely no code or svgs, you can create a fancy broken text effect.

You only need a bit of text and some divs. Then, mix those with some move and rotate transforms, use the overflow property, and you're good to go!

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

No Code Broken Text Effect

Hi my gorgeous friends of Webflow,

Who said you can't build geometric patterns with Webflow? :)

Merge a bit of creativity with a few skew transforms and you can build a seamless geometric pattern and add a border animation with completely no code.

Just move your mouse over the pattern for a bit of color!

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

Seamless Geometric Pattern With No Code Border Animation

Hi my gorgeous friends of Webflow,

This project is a complete Desktop rebuild of Webflow website home page.

Needless to say, Webflow home page is a huge example of how to implement mega menus, scrolling interactions, custom tabs components, infinite marquees that stops on hover, greatly customized sliders, awesome design, and much more.

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

Webflow Home Page Rebuild

Hi my gorgeous friends of Webflow,

This project contains a cool circular responsive progress bar - built with absolutely no code - that you could use as a pre-loader for your website.

Enjoy and feel free to leave a comment!

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

No-Code Circular Progress Bar

Hi my gorgeous friends of Webflow,

This project is a rebuilding from Webflow website, an amazing example of how you can responsively build a navbar and a mega-menu inside your project.

Enjoy and feel free to leave a comment!

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

Francesco Castronuovo

About

Skills

About

About