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

Ben Celinski

Hi Webflowers,
Many of you asked to share my new website as a cloneable so here it is:
👉 advanced hover interactions
👉 clean and reusable way of naming interactions
👉 clean naming using Client First
👉 custom cursor animations
👉 complex type animations
👉 page transitions
👉 scroll-based animations
👉 smooth bg change animation
👉 lock/unlock scrolling on project screenshots
👉 CMS slider for testimonials using Swiper.js
👉 little touches of Attributes and custom code
Very happy to give back to this wonderful community. Clone away!
I lorem-ipsumed client things - you can check the live site for reference at https://www.bencelinski.com/
__________________________________________________________________________
👋 Contact info for collaborations -> pick your platform and shoot me a message:
https://www.bencelinski.com/
https://www.linkedin.com/in/benedykt-celinski/
https://twitter.com/ben_celinski 

Ben Celinski Personal Website & Portfolio Cloneable

Jonas Arleth

Sliding Tab Navigation With Custom Content Animations
WITH BACKGROUND & UNDERLINE
Info: If you need to add more tabs for your job, you also need to add another interaction for each tab accordingly, so that the background moves there.

Various tab navigation and tab content animations

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 in Webflow | Free Template

Protocore Studio

Original codepen by Foretoo. You can fully customize this effect through the embed element and the code in the page settings.

https://codepen.io/foretoo/pen/zYjpYad

Thank you for helping optimize the code Dimitris. 
https://twitter.com/dimitris4qq

••••••••••••••••••••••••••••••

𝗣𝗿𝗼𝘁𝗼𝗰𝗼𝗿𝗲 𝗶𝘀 𝗮 𝗽𝗿𝗼𝗱𝘂𝗰𝘁 𝗱𝗲𝘀𝗶𝗴𝗻 𝘀𝘁𝘂𝗱𝗶𝗼 𝘁𝗵𝗮𝘁 𝗰𝗿𝗲𝗮𝘁𝗲𝘀 𝗺𝗮𝗴𝗶𝗰 𝗳𝗼𝗿 𝗰𝗼𝗺𝗽𝗮𝗻𝗶𝗲𝘀 𝗮𝗻𝗱 𝗺𝗮𝗸𝗲𝗿𝘀 𝗮𝗿𝗼𝘂𝗻𝗱 𝘁𝗵𝗲 𝘄𝗼𝗿𝗹𝗱. 𝗖𝗼𝗻𝘁𝗮𝗰𝘁 𝗵𝗲𝗹𝗹𝗼@𝗽𝗿𝗼𝘁𝗼𝗰𝗼𝗿𝗲.𝗰𝗼 𝗳𝗼𝗿 𝗶𝗻𝗾𝘂𝗶𝗿𝗶𝗲𝘀. 𝗜𝗳 𝘁𝗵𝗶𝘀 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 𝗶𝗻𝘀𝗽𝗶𝗿𝗲𝗱 𝘆𝗼𝘂, 𝗽𝗹𝗲𝗮𝘀𝗲 𝗳𝗼𝗹𝗹𝗼𝘄 𝘂𝘀 𝗼𝗻.

◉ 𝗪𝗲𝗯𝘀𝗶𝘁𝗲 - www.protocore.co
◉ 𝗧𝘄𝗶𝘁𝘁𝗲𝗿 - www.twitter.com/theprotocore
◉ 𝗜𝗻𝘀𝘁𝗮𝗴𝗿𝗮𝗺 - www.instagram.com/theprotocore

Particle Galaxy Effect

Shais Ahmad

Please enjoy this super simple, fully responsive Webflow cloneable that instantly calculates the read time of some text/a blog post 🔥

It only required a bit of custom code and the rest is Webflow!

There's also some really cool load animations, interactions as well as a light/dark mode feature!

Feel free to ask any questions below :)

We hope this is useful! Enjoy!

[Cloneable] Read Time Calculator

THS - The Hero Section

Start your website with our cloneable hero section design perfect for Agency Portfolio 💼

Components & Features:

⦿ Simple yet elegant design
⦿ Background gradient change animation
⦿ Full-Screen Hamburger Menu

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

Like this cloneable?  👍 

We're coming soon with a huge library of more such high-quality and free cloneable hero section designs for every kind of website built in Webflow.

For more FREE CLONEABLES
→ https://theherosection.webflow.io/

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

Support:

If you have any difficulty in understanding the design or any part of it, please feel free to comment below. Alternatively, you can send us an email here: support[at]theherosection.com

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

License:

⦿ Background Mesh Gradients from - https://www.meshgradients.design/

⦿ Iconography from FontAwesome

⦿ Heading Font - "Silk Serif" downloaded from FontShmonts
https://www.fontshmonts.com/text-fonts/silk-serif/

Agency Cloneable Hero Section

Jakob Wrs

Found this on CodePen and Rebuilt it in Webflow (Also small fineTuning)

Source: Darryl Huffman:
https://codepen.io/learosema/pen/WNpGKpz

Liquid Metal

Marcin Rzymek

Need a capabilities section for your design/development business?
Check this out!

Animated gradient background, 4 service' cards in grid, icons, and all of that interactive.

Feel free to clone the whole project.
Based on Client-first by Finsweet, just sayin' ;) 

Animated Gradient Capabilities Section (Cloneable)

Web Bae

Easily add an animated (or static) grain texture background to your project with grained.js. Watch the full tutorial here: https://www.youtube.com/watch?v=8WpBfyhO9ZY

animated-gradient-webbae

Matan Assulin

While working on a site for a client, I discovered this cool feature 🤩 to add a preview of Spotify 🎧 on your website. Feel free to clone and use it for your project! 💻

spotify-microsite

Petit Hack

Aujourd'hui, on vous propose de découvrir comment créer un arrière-plan de gradient animé natif Webflow pour vos projets. Idéal pour ajouter une touche dynamique et colorée à vos sections, pages d'accueil, ou bien à toute autre partie de votre site Webflow.

Petit Hack est une agence Webflow qui aide les équipes marketing à reprendre le contrôle de leur site web. On vous partage toutes les semaines nos astuces Webflow, Nocode et Webdesign.

Liens et ressources :

Site Webflow pour la création d'arrière-plans de gradient animé : webflow.com
Suivez-nous sur Twitch pour d'autres démos : https://www.twitch.tv/petithack
Découvrez notre agence : https://www.petithack.com
Cet exemple pratique vous permettra d'intégrer facilement un arrière-plan de gradient animé dans Webflow, sans avoir besoin de code supplémentaire.

Animated Gradient background | Petit Hack

Based on:
https://tympanus.net/Development/AmbientCanvasBackgrounds/index3.html

Colorful Blur Background

Alex Tourgis

Hi, this week I have fun to create this scroll color animation. 

The video is available on my Youtube Channel https://www.youtube.com/alextourgis

Webflow Tips / Background Scroll Color

Alem 'Buckshot' Bukvich 🤠

Animated Shooting Fire Landing Page [CLONEABLE]

Braden Mosley

This is not a background video with a mask... this is magic. 🪄
Simply apply .text-style-gradient (a global class) to any text and watch it transform into a beautiful moving gradient!
(change the colors, angle, and speed as you like through the embed code)

Moving Gradient Text Code

Custom button that uses simple js code to make the button function as a random link button and will take you to any random site that was given in the code. There is other code that is the vanta js which is the cool background look.

buttonmicrosite

Katarzyna Pomieczynska

Simple one-pager for a newsletter about the modern use of psychedelics.

The New Health Club - platform for new psychedelics

Ricardo Pérez Arce

This is a simple yet fun under construction site for a socks brand based in mexico.

awesome-socks-under-construction

1vaRoS0QlFL+TEUDugDt/1KXdWvhj03Qb9u2ruorsNc=

6qSamKWmkxX2fnUM9HsZmrP8aP7f2O195iTFPfRXJnU=

Abq7j8lCUGCWx2iqashROjdv8R2L4sVg4pUuROgkp4E=

BI8g38RjO9qSIoKsoKXAkzypF/jq0x6CSrMWEHlULbs=

CHiQfJJNufnbbHjt7tcZuD9wK6Bl5FwbOUHnSl3avqA=

CS4BRGaO4rUrYNAyOI44zTjp3t7P2OOu41QdwKmWO/g=

RMv0YJlLOBe7cY7HgZ3Jox34R0Wrk7jLv3DZyBETA7I=

ZC8pa382rux3/Ya5JYmbaiFDJJqVQfa/ZkKRoDwNIOg=

mMjt/im3qTbmtzqqztBpqn+Rgsc5U8Gc8X6ZDITjoDk=

mtJqObTlZWmiBNeE7/xNFXj3iCQFEX9OV5D0Sg5Peno=

oIkmI84/O3nodhAO/gAbs0zgY2IvPgpH6UlSycbHi/I=

zRYikcIlbF3Un7C26+4VGO/t8jKwNjjuAdQWLlZECTQ=

+j+2BnaQSkzkNe0dpNHl103pbsRtVlBy3Ivqpwb7bho=

/z5rny/vN8rnsI2gxYCgnqQOFiwY847T4QIeZ6w5I34=

/zPeDB00QSmJg02UNPvvY6N+w7bL9XbOTmOZn0UHdA0=

0ACb5hSoxo1svvHlhJqD4sUSDGJ97B1kBGWGGxycXu4=

0z+EonM/Ze0RUt4FnVPK9NO8zbPrdKWPIV/2nsroWAM=

1Kas5SxzFq1TyEEK/rwk9T2BTRF97IopQx0dxEZEiV4=

1PAePmG+u2MMJihdvOPE+f3q6uU4s1vcblpYTbo4KCw=

1yPpEBxQzs5EQ8FAvcACSinRq2S2J2069sPRZVRmmxE=

4ZJ7EGzGqv4xuN2dyPyGVzeXC3ZzxnWvJ6WajoEnM98=

4eIPknyFF46oh0mLjXLEN9nOuX2TKp2hUHUJY5aPSpQ=

4zIwhZkCZ+GlQOns3JIYBz0/OVfdZ3Y1uk/5+7mf+2A=

5FDeSfKIJLemkdT7BTuxj/qoLWYEBfG9UQBPghck3ZA=

5pIFK+PVeOj47PIVY1YpQZ0n1VhUv3AFhxF9FK3/5NU=

7xZWAYfVqaEy7CXa1ckZo3xjvoaWoIOdhw+qc8M1IKQ=

8oMNOGWYYe/dsogfowL+vLrVdT2OWWyyHB1Y4XXFWGs=

9DmxyyZ8FEsc5DSKm/8DpcDu2e/GCLlCF0UJQCEBuSw=

CY7M9UIqsstwHXkY2gh+1iwe+xn/L400EHoMCr5V2Kk=

CjOPUxQfd2e9T/jCfK5kLFZtS+YknIrp9TbZsxBJ3n4=

DZW4Lt9/4nTqMYcoG7AAN7TQCRwpJ94xFJ+gE1GO2AQ=

EA6pIl34ynZu2fCXtDsf5N+8HjgmFW1iWFEJidJmjwE=

EmL/07sZTmi9xV+epHzdYP8GGRzf/PzE1igH51TIYGQ=

I6aCKEIKc6Arq7OqoqijPw7efTjUjYkQrD6nNhdEUwo=

JCIMc2jHTforX4kLxzXeocMmrYb+LnAgwZU0w3bCzQY=

JSUE/tzFGqA8SW6UZelJxRWNmjDOVW6AacN+s8q2058=

JXxUskpxyJf0HzDZZzk+rnqpDJoD/uHhmIBaeZ2rf2I=

JseFDRfctUKg1rAF0E6mL1YOHzQe1gVou75Mw8zcVOY=

KmttvwfoYQsBfGx+YR6WvNYQXoRwaQ+hKZS5+DHpXLk=

LOBx6XjXdHGh1Mc2TWG0lUBfYWbMOp15iStJG887/pg=

LtNTzuGC6a/O4opneIzFRwuxaT7A0jTPzl4xxFVOaJU=

NP6mAIrpTB9kRjtJnW3FmZTpNpH4UMQimwJqY9Sec+k=

NaOvW/FyxHGGW+okX5dXeUZcodQswSRaUy5pwYMQCY0=

OKA/wpW5U0/bGFF7Bsd9Jpz9vIcGmsLeCg4ac42B+uM=

ONGbaY8NwLZsAON1rFnvSZpSx/C2YgSvAaKP+Qs3sy0=

P7vOA+qkoiRS/9UWXIUHxm+CI0lSj7WY2ZBiK9KyND4=

Pesmw2FSIduSR93sJEVAEAHyJZ4MQP9Pbn1gPgXxcXw=

Qdld2j63j/MIDqhyo7Y3RiOeFhBqJglREH2O+FwXR9I=

RTjXBMHnjTqFdoDyXUO2AKPkqYypcAKcmM0zGDh4caY=

ReTHz5O++2bhIDWL5iofoqpgFh3DS7gFBY5lndMX0a4=

S3UH97cX9/DCJeeuSb/1cxTJ7CCdGRdLv4pASFeUrlQ=

W0wgK3N2DKRw7mHe/OXWveRF5zny0tvm+vG0KHiLp/Q=

XGglpWsF+VpgOjXfIqzwrxv0n1E+aPydxJbt23zu0UA=

XX0MCgYYdjyJaAld9hCk0PcNrB+fUHW+6oqNW70OCtw=

YTgvz2H2yS7kYnVdz+7EJIUOPBCJhECNTPAhmUOoe68=

bNYcTJMABTjrejqaTAIi80LmrWFfpTsCp44eZk1OWP0=

bsLlc2kcOlK5RWQ59v0AEAUf4ihEq1EqzVL0STw1ipU=

ca/pVHa3/6Sxei+4H7EgEWxytJZtjYaWd4gIcLS9BNk=

dZwrFziiqNuYnGDLDpHI1YhPjKifwSg45KCaURl8D2g=

e+VmFrHp4Yr8GXYWjDQHdWz2PclHlzv9quqbIMU/Xu0=

eDXaquyPVYoFNZ+HLRFOqPbAk7N1nlRiJhbhe4g83Es=

eKZ9sLSo6+sicIvD6P1KSh2FCMctkVM3veR39Usebi0=

eYRhaR917Kl8W9yQ5U6MBqXj8vPkIthFhiNmuNeAN78=

eYmgBZ7+8Grb61FIjGTNd9D3G+r/jczTEkvC5rm19Tk=

eecmD3rxb35ZwVocxDFRqbIjnQdCCFmngV56ILYVHa4=

fqjlnE7z3/vZw0OHR2kV0utFuXmlHUaSBJ3gfhkXNsI=

gok0DFmTbYmfgm71+6/UBa9YMdK9fta9tVCYCvw0mUk=

gtX0dj3u43dHLSN3L1/ocA2zuRIhSWSH7czMAshjILo=

i5RceAnwNYDnFUmn6Nr7tYoU2zgb6WZMXFAm/Ks3EJI=

iyiyfmoKLG7KcFAH8fMkFZGer4wu8vHJodF4ieLhLsc=

kaIOlI6Nq9Q/ie+EQ0pIStIilIP0OEzSTA39Jp+4KjQ=

mdqrxKA5yNLUO1xy5DRK+BdrEEx0DaTbUqGALpHTFfo=

oEth0GQmlQEb4LYJYa0d+c3HKD3ULkpBbWmsOKI9iAY=

p2Vh8R1nnPDbUmB2laIvAo+ftmfycxaj1wj+1VbZyLg=

p7M33hx2/QNUnwxc0CuYfz1Pt74M+mfrGVQxzk65gwY=

p8RKstqTUsFv0yM8P1EiWUksDkzfBxAw5OAvX/lo29w=

p97Dq+fIx/w3/EkGTzaK1w3GxAKb2UiB7DMgeXVqPaw=

pJfUbXSMy3I5/YgFlhkcdg6l873+JjkE05INAUxLmUI=

pJu6WGBlTFWiqPzNCkQSRb8W05i8Lzy2Nfh+m51MAZM=

qriyvYyof2e0nw26zR6JThjy67bKClLhvHTizM7yDcg=

qwBI7cEFi2p5uofmngMNq9hyeXBei5HjbZBPsE2jVNk=

sVP46tBNXrVbRgo8gxjQJi56Ye1Tf58d/5IGrW+t554=

tGWEp1ekGCD5QuqN7IYlGfZ+o0Bp3gDLnODVnfQtzzk=

tOlureLazS6/pYwbqdKmud6Bvaf9nA4m71Uoyrhnjxo=

taTnYyyHDohIACH0XOt7f9rsbQDo8eDaAR5/12UVIeQ=

tcmGcYpBS2ChBOHZ0EWBvqwozC4S2fVByvq+/Nu+8qk=

w2/bDgmUb6OwHuhtN+Wm89zclNO2xRBG8xtJr4UsBbM=

wV9d2LzLij/UwbGC8MXX+RHNBZ5d/rww134rq+krlJQ=

xdTyVT3ZuBSNWCl2NPxJ8eZ0ifhUzatwezSwUElWFy0=

xopiPniokR0nK50Zusg9JVnovSEk5Ehp9FNP10Oe3yY=

z0Bcstj2RryBavzQoKM3ahOCQcI8zFyYwMLgeOJj6ho=

zTjP0wu4jQu1N5tp1E0KqrsQoD7VvYN4Qrege5SFXd0=

znSGofNSewV4L1nPnkUNOmgEJsZN01R3WQN2oIXOng0=

Best Animatedbackground Websites | Free Examples & Designs

Discover Animatedbackground websites built by the Webflow community

Discover Animatedbackground websites built by the Webflow community