Start here
Getting started
All the interactions in this library follow some general rules for naming conventions, value types and more. By understanding how the library is setup you'll be better equipped to use it effectively.
Scope
This documentation does not go through how the javascript library is structured, that is up to your developer to setup and update, if you have any additional solutions you need added to your site feel free to reach out and I'd be happy to set them up for you.
This documentation is focussed on the Webflow attribute implementation so you can understand how to setup solutions or modify them using the provided option attributes.
The pieces
Attribute Parts
All Attributes follow the same naming convention throughout the library attribute names contain 2-3 parts and attributes will always be given a value (usually one word or number)
Attribute names contain the below:
- A Global Prefix (this is the same for all attributes in the library)
- A Solution ID (this refers to the specific solution this attribute is for)
- An Option name (used in an option attribute to denote additional options)
Attribute Values contain one of the following:
- An Item type (telling you what type of element this is with regards to the interaction) or:
- An Option value (this provides the value for an option, usually true or false, or a value for a timeline tween like a duration)
Examples
two roles
Attribute Types
Attributes can be one of two types:
01 Element Attributes
Any element that is targetted by Javascript for an interaction is targetted using an element attribute. Since the element attribute includes the whole solution prefix in the attribute name and nothing else any given element on the page can only have one element attribute, but multiple different option attributes.
02 Option Attributes
Option attributes give you further power to customize the interaction. In general an element does not need to have an option attribute to run but there are specific solutions like scrolling that require option attributes in order to configure an animation since there is no default version of the interaction set.
runtime controls
Global Run Options
There are a few option attributes that are given to all solutions in the library. These attributes are applied to the outermost item in any given solution (usually the wrap in something like the accordion solution, or to any element in the scroll-in solution.
For these attributes anytime you see {prefix} use the prefix of the given solution
Attribute Name
Value
Default
Description
{prefix}-run
boolean
true
Decides if the interaction is run on a given element, useful for binding to component props to let users decide if they want to use the interaction on a given element.
{prefix}-desktop
boolean
true
Decides if the interaction is run on the desktop breakpoint for a given element
{prefix}-tablet
boolean
true
Decides if the interaction is run on the tablet breakpoint for a given element
{prefix}-mobile
boolean
true
Decides if the interaction is run on the mobile landscape and portrait breakpoints for a given element
Solutions
The Library
accordion
click-active
count-up
cursor
hover-active
load
loop
marquee
modal
mouse-over
page-transition
parallax
scroll-in
scrolling
tabs-autoplay
text-scrub
