Sygnal Attributes v5
Webflow Tools that Make Your Site Better
Last updated
Webflow Tools that Make Your Site Better
Last updated
SA5 is the lastest version of Sygnal's Webflow Utilities Library. The tools here are 100% free, 100% open-source, and 100% designed for Webflow.
SA5 is divided into a series of individual libraries.
Library | Purpose | Features |
---|---|---|
These are libraries we're experimenting with.
Now you can sponsor the development of those features, and they will be added to the library for everyone to use.
We've also begun including our dev team and roadmap notes in these docs so that they are available for community comment and discussion. You can expand most features for a Future notes document.
Share your ideas in SA5's forum.
If you'd like a specific feature built that you already see on our design board here, you can sponsor a feature. Features marked with
Documentation is organized by library
At the top of most libraries, you'll two important pages-
π About this Library, which gives you an overview of the capabilities
π Quick Start, which gives you the library code you need
Within each library the features are grouped separately
π§ͺ indicates EXPERIMENTAL items, which are not yet available
π indicates NOTES, which are primarily for the dev team
βΆοΈ indicates VIDEO TUTORIALS, which we're just beginning to add
The tech changes we've made in v5 open the doors to a lot of new capabilities.
If you are using v4, none of these changes will affect your current websites. Since all of our CDN URLs are version-locked, youβll continue to use the same libraries you are using now until you upgrade to the newer versions, someday, if you want to.
Weβve changing from a JavaScript ES6 codebase to TypeScript
Weβve changed fully from CSS to SASS.
Weβve eliminating all use of jQuery in the libraries.
Weβve separated classes through the library into discrete source files
Weβve bundled the distributed files differently for even greater efficiency
We've integrated debugging features
Weβre excited about the tremendous capabilities the new stack gives us.
If you choose to switch to the upgraded v5 libraries at some point, youβll see a few minor integration changes;
Javascript <script> elements;
Will be moved from the before-/body section to the before-/head section of your pages and site-wide code settings.
The library URLs will change to point at the /dist/
path, rather than the /src/
path.
You'll also notice that the type=module
is dropped
CSS <link>
elements will essentially remain unchanged, and will continue to point to /dist/css/
All of this is covered in the docs for each feature, and weβll update the docs as each library is migrated, so that you can upgrade them if you choose to.
You can simply reference the new libraries with no changes to your custom attributes or existing features- and youβll still get the enhanced features and performance benefits.
Nope! If youβre happy with things as they are and donβt need any of the new features, you donβt need to change a thing. v4 will continue to run indefinitely.
Library | Purpose | Features |
---|---|---|
Library | Purpose | Features |
---|---|---|
A lot of features have subpages- make sure to click the > to expand those sections
A huge range of page-modification capabilities
Get logged in user info to personalize your site and improve user experience. Custom-route on login.
User name
Custom fields
Access groups
Add capabilities to Webflow's Rich Text Block
Responsive inline images
Advanced, dynamic layouts for your Webflow pages
Restructure your collection lists entirely into groups
Create dynamic tabs from the CMS
Overcome Webflow's 5-nested-item limit
Easily replace Webflow's native form handler with your choice of 3rd party handlers like Basin, Zapier, Make, and n8n.
Eliminate SPAM
Trigger automations
Create powerful, consistent modals with full design control and zero interactions
Define custom hotkeys to trigger your scripts, page actions and navigation
Special URL enhancement tools
Pass-through your query params from one page to another for referer tracking
Target all external links to a new tab
Add capabilities to your video elements
Youtube Hide related videos
Background Video poster image
Video player
Control Webflow's elements with code, and receive events when they change
Tabs
Sliders
Buttons
Dropdown menus
Lightboxes
Radio buttons
Accordions
Lotties
Locale Switcher
Format numbers and currencies & dates specially
Locale-specific formatting
Special tracking using cookies and webStorage
Custom Select element based on Finsweet's attribute of the same name. Adds some dynamic update capabilities
Central to SA5, but has a few tricks up its sleeve
Hide objects in the designer and make them visible in the published site
Handle high-latency tasks such as content-fetching with a built-in caching layer.
Allows complex calculations and slow data retrievals to easily cache.
Code your update directly to the cache layer and it will "lazy load" the content when needed.
Embed external content into your blog posts and pages.
Tables from Google Docs
Adds Email as a social share option. Designed to work in conjunction with Finsweet's Social Share component.
Adds share-to-email
Adds some analytics capabilities to your site using attributes.
GTM dataLayer events
UTM Tracking
Rel Attributes
A/B testing
Extract CMS data into JS objects from your collection lists, to power your custom code and calculations.
Extract data from collection lists into datasources
Extract querystring data, and URL data
Cookies and webStorage
Data-bind these pieces of information to text elements and form inputs
Improve your 404 pages
Smart search trigger Webflow site search based on the Path the user was looking for
Animated count up to a set value. Triggers on scroll-into-view
Special UI components
5-star ratings component ( display only )
Add special capabilities to your Webflow demo sites, such as links to the correct readonly link page.
Simple commerce solutions for one-off purchases.
Paypal
Windcave
Custom trigger items and interactions from text links and buttons.
Trigger interactions, such as pop-ups and modals from a link
Support CMS-driven scenarios
SA5 Calc π§ͺ
Calculate & sum items
SA5 SEO π§ͺ
Some SEO tools
Noindex
Nofollow
JSON-LD
SA5 Fixup π§ͺ
Fix a few things in Webflow editor and published sites.
SA5 Logic π§ͺ
Add logic capabilities using attributes, for conditional visibility and page structuring
If
Switch
SA5 Effects π§ͺ
Experimental effects
Depthmap ( fake 3d )
SA5 State π§ͺ
State management
SA5 Booking π§ͺ
Tag trigger elements easily to invoke 3rd party booking systems with the correct service, location, category, and staff member.
GetTimely
SimplyBook
SA5 Localization π§ͺ
Various localization features
SA5 Detect π§ͺ
Detect and manipulate your page depending on how
Add HTML tables