Currently WIP.

Rive.app tooling for Webflow, configured via attributes.
Ideally will cover all possible interactions, still deciding how.

For now only allows (multiple) imports, automatically sets up the DOM for display, and allows to call for a state machine (by name) to enable listeners.

File can be stored in Webflow asset panel, more info in the docs.
Accepting suggestions/ideas through github.

Docs here: https://github.com/vallafederico/hacking-webflow/tree/master/src/riveTool


👀

Rive.app Tooling — WIP

Text reveal staggered animation, as seen almost everywhere. Fully automated, configured via attributes.

All config info before /body tag plus link to the docs.

--
Via GSAP, Intersection Observer API and Split-Type library (thanks to https://webflow.com/@devinsfountain)

--
Config Options:
Split Type (char/word/line)
Animation Duration
Animation Delay
Animation Ease
Stagger Duration
Stagger Start Point
Once / Every Time
Intersection Threshold
Intersection Margin



👀

Text Animation (via GSAP)

Other cloneable supports only light/dark, this ones is dynamic so supports whatever mode. Same cookie, same things.

Works with attributes. 
Sets classes, emit events.

All info in the script tag in home page.

👀

Persistent Multi Color Mode

Persistent dark mode via cookie.

Remembers toggle also across pages. If never been triggered looks for the default computer colour scheme (dark / light). If not there, defaults to light mode.

Currently adds a class (.light/.dark) to the body.
You can also listen to change events directly in Webflow code editor via the 2 functions you find in the homepage body.


Persistent Dark Mode

Was testing depth on skinned models, this funny dude turned out. Didn't want it to die on my machine.
👀
--
Animated skinned mesh with separated bones to be manually controlled. Post processing on top, bloom and depth of field.

WebGl Skinning w/ Post Processing

2022 Placeholder — working on the actual one :)

Fully parametric, configurable animated gradients done in vanilla WebGl. Reacts to mouse position.

——
You can tweak the parameters keeping the data-test attribute and kill it when you find what you like simply by removing it.

Parameters are served through attributes. Everything is explained in the repo linked in the custom code /body section.

——
CHANGELOG
02/11/12 — fixed controls not disappearing when removing data-test

——
Quite random and can be done better, might make more tweaks in the future. Inspired by the recent @ webflow.com/skylartkitchen AE cloneable.

👀

Webgl Reactive Animated Gradient

Integrated post processing and native DOM interaction on my WebGl engine. Made a tiny progress demo. 

Def not optimised / responsive.

👀 

Native WebGl Engine -> Post Processing

But is it worthed? 
Should you?

Regardless, rename your .webp to .webp.txt and upload in the asset manager, use a <Picture> tag et voilà.

Check the network tab and see what's being loaded.

*******
Images are purposefully GIGANTIC. Also not really leveraging anything that's great for .webp here, but that's the gist of it.

Free worst practices ever included. Please use alt tags like a champ would do.

Images from unsplash.

Well you can *technically* use .webp from Webflow Asset Manager

Ethereum based Auth + Account System, through Netlify and Supabase.


1. User sends request to serverless backend, gets a nonce generated securely and a request to sign it.

2. Wallet signs and sends signature back to backend. If signature holds correct nonce user is logged in asd a session JWT is allowed to make changes to profile with no additional secured requests.


Try and login (I'm only storing wallet address and if you pick one the username and twitter handle). Please don't spam my API (:

👀


—— v⟋0 
Only supports Metamask Wallet and sessions resets on every refresh

Blockchain Account + Login System ⟋ demo

Inserts arbitrary non-cms element from the page flow inside a CMS colleciton list. Can be positioned at start, middle, end, or in an explicit position (specified through number).

—— 
Please if you use this in production host the code yourself :)

👀

CMS Insert ⟋ js

Needed sound, made sound (module).
Configurable to play on hover or click.


Might add stuffs to it,  just comment if you need anything. Not particularly elegant but 🤷.

Random sounds from soundly.

👀

CHANGELOG
06/04/22 ‖ If first click is on a trigger sound plays directly instead of separating the Audio Context creation from the triggering. Never written something less clear in my life I think :)

How to.
Please host the code yourself if used in production as stuffs might break or I might make weird changes. If you follow the link provided in the page code you'll find yourself in a codesandbox, where there will be a .js.txt file. Download that, put it in wf, get the link and link that as a script. Thanks!

Sound Module ⟋ js

Had to revise a project when the API changed. 
Made it cloneable.

Pulls all NFTs from a Wallet Address from OpenSea marketplace, javascript only. CSS animation for when stuffs get pulled in. Fully style-able as is using a component from the Webflow DOM, with classes and everything accessible in WF.

Be aware that if using this in an actual project you will be safer going through the API KEY route.

👀

wallet-address ⟋ OpenSea API

Random dump of unfinished things made in 2021 that for one reason or another have never seen the light. 1/∞

Testing realtime refraction in WebGl with moving background (tricky part). Text animation is bad and definitely not to be seen on mobile. Might not work and could definitely use a preloader.

Click and drag to navigate.

👀

Realtime Refraction (WebGl)

Tiny vanilla JS clock, needs an attribute and can be configured with timezones. All info in /body tag.

👀

clock ⟋ js

Temporary published to answer a question, will disappear soon :)

Barba.js ⟋ starter

Revising my boilerplate, needed a scroll so made one.
Smooth Scroll + Mouse Drag Scroll (optional), in less than 200 lines of vanilla JS.


Completely configured by data-attributes for wf.

You can control the scrolling element (data-scroll), a factor for scroll speed (data-factor="{number}" and if mouse dragging is supported (data-mouse="true/false").


It's also webGl ready and supports speed, but for that you'll want to fork the sandbox here (https://codesandbox.io/s/smooth-scroll-2qfif).

(!) Definitely not tested throughly, so use it at your own risk.
(:) Would love feedbacks on breaking cases and strange behaviours.


-- I'm currently working on an actual one that also solves a couple of webflow problems regarding position sticky and while scrolling animations but that's not happening anytime soon. I'll post on twitter when (and if) it's to a publishable state. This one does not. But position sticky is horrible anyway.


👀

Minimal Smooth and Drag Scroll ⟋ lib

WIP for current project. 
Just an experiment for now.

Tensorflow based in browser realtime speech recognition as trigger for WebGl animated mesh. 

👀

Federico

About

Skills

About

About