Glowing Border Animation V3

Glowing Border Animation

A simple glowing border animation using webflow variables and a conic gradient.  Easy to customize.

Text on the right follows the shape of the mask.

Easy to replace with your own text and images for a unique hero section.

Custom CSS is marked with 🚫 So if you want to change the class names of these, be sure to also change the custom css classnames.

Uses custom css for:
shape-outside
clip-path
shape-margin
aspect-ratio
mask-image
display:inline-flex

To create your own path for text alignment use this tool:
https://bennettfeely.com/clippy/
and upload the url to your vector mask and then trace it as close as possible.

shape-outside-hero-section

How do I create a link on my Webflow site that prefills a tweet for users?

Proof of concept of linking mouse animation to gyroscope

credit-card-animation

A simple logo carousel concept that repeats forever and doesn't require a set width.

Can also be used from a cms collection.

Adjust the duration of the animation in the on page load interaction The more logos you have the more time you will want to give it to cycle.

To copy the page load animation after you've cloned the site, follow the instructions.

Copy to your own site and replace the logos and links and style to your desire.

After you've copied it to your site, remove the click animation you set previously and then set an on page load animation to the copied animation and set to loop.

Infinite Logo Slider (CMS Capable)

Example of a slider that only starts autoplaying when it has been scrolled into view.

start-slider-autoplay-when-scrolled-in

Example for loading a custom script inside webflow via a userscript:
Steps to test:
1.) Clone this project.
2.) Install Tampermonkey in Google Chrome
3.) Install the userscript here https://t.co/9F5NJpPGQy

The userscript looks for a data attribute on the body tag called data-wf-design-mode-script which should point to your externally hosted script.

custom-script-in-design-and-preview

cross-site-copy-paste

younique

RMv0YJlLOBe7cY7HgZ3Jox34R0Wrk7jLv3DZyBETA7I=

ZC8pa382rux3/Ya5JYmbaiFDJJqVQfa/ZkKRoDwNIOg=

zRYikcIlbF3Un7C26+4VGO/t8jKwNjjuAdQWLlZECTQ=

+j+2BnaQSkzkNe0dpNHl103pbsRtVlBy3Ivqpwb7bho=

/zPeDB00QSmJg02UNPvvY6N+w7bL9XbOTmOZn0UHdA0=

0ACb5hSoxo1svvHlhJqD4sUSDGJ97B1kBGWGGxycXu4=

6s1k2w6SLnWj64d28WQrv9HQMxjAQ6/qFXIbthFaqKc=

9DmxyyZ8FEsc5DSKm/8DpcDu2e/GCLlCF0UJQCEBuSw=

BEaEBzmJ+dCz7bi9Xenx+kQRiui5/usgymUiFzHdUSk=

EA6pIl34ynZu2fCXtDsf5N+8HjgmFW1iWFEJidJmjwE=

JCIMc2jHTforX4kLxzXeocMmrYb+LnAgwZU0w3bCzQY=

JseFDRfctUKg1rAF0E6mL1YOHzQe1gVou75Mw8zcVOY=

LtNTzuGC6a/O4opneIzFRwuxaT7A0jTPzl4xxFVOaJU=

OKA/wpW5U0/bGFF7Bsd9Jpz9vIcGmsLeCg4ac42B+uM=

P7vOA+qkoiRS/9UWXIUHxm+CI0lSj7WY2ZBiK9KyND4=

Pesmw2FSIduSR93sJEVAEAHyJZ4MQP9Pbn1gPgXxcXw=

Qdld2j63j/MIDqhyo7Y3RiOeFhBqJglREH2O+FwXR9I=

Rf1eI8pDEJSkptFB/XWlj0IN7pQXjrNngR5tBDx8ihI=

Sf9qPmyeAJlqj4x6Kz5SNESMv5Qs7ARqsnNruitgYpA=

USOHvTUI3mh2ib/mMwbKTyTADvigSfSmb3MXH/HsN6A=

XGglpWsF+VpgOjXfIqzwrxv0n1E+aPydxJbt23zu0UA=

Zf6XyBzSm/LtmgDvoXinw+Hi6BMMwoaUJHcowJ8ikX0=

eDXaquyPVYoFNZ+HLRFOqPbAk7N1nlRiJhbhe4g83Es=

gok0DFmTbYmfgm71+6/UBa9YMdK9fta9tVCYCvw0mUk=

l+2HpTI8qsEqSoxz6Y8y+po4C4+PakSbBdZ2Wp0L/Zk=

n9lKHF86NGBCOKJ/o3Xl/F++i0ke7eTshw4YJ60x+20=

p8RKstqTUsFv0yM8P1EiWUksDkzfBxAw5OAvX/lo29w=

qriyvYyof2e0nw26zR6JThjy67bKClLhvHTizM7yDcg=

tOlureLazS6/pYwbqdKmud6Bvaf9nA4m71Uoyrhnjxo=

wV9d2LzLij/UwbGC8MXX+RHNBZ5d/rww134rq+krlJQ=

whJ3jNLC0SO8XSaY/XPhiyr+uvZwcHDCMcIF6SZYwb8=

xdTyVT3ZuBSNWCl2NPxJ8eZ0ifhUzatwezSwUElWFy0=

Sites