01
Prefix
As with all attributes in this library all attributes in used when implementing this solution start with the following prefix: if you see the tag {prefix} used on this page it refers to the following prefix:
02
Elements
The load solution is meant to create a set of related yet unique interactions for different types of elements across your entire site. As such, there are a lot of different element types with not as many options because the core of the animations are controlled in the script in order to keep them globally editable and easy to update across the entire site. The animations themselves will be customized for your specific site.
The wrap element will be the parent element (like the section or container), and all other elements should be inside the wrap. If you have multiple wraps on the page they will animate one after the other in order to stagger in everything consistently.
Attribute Name
Value
Default
Description
data-ix-load=wrap
wrap
boolean
The wrapper for all of the other load items, this is required in order for the load interaction to function.
note: the wrapper will be set to visibility:hidden before the page loads so if you want anything to be visible before the interaction leave it outside this element.
data-ix-load=item
wrap
boolean
The default load interaction, usually a simple fade up
data-ix-load=heading
wrap
boolean
Unique animation for headings
data-ix-load=image
wrap
boolean
Unique animation for images
data-ix-load=stagger
wrap
boolean
Will stagger in each child of this element. Useful for button groups.
03
Options
All options are applied to a data-ix-load element.
Attribute Name
Value
Default
Description
{prefix}-position
GSAP Position string
'<.2'
A GSAP Position parameter to dictate when the animation should start. You can use this to customize the delay between elements
04
Notes
Setup
When utilizing the load solution make sure to paste this into your global head tag so that elements don't flicker as visible before animating. It's important to note that if you don't have the script setup but do have this code in place any load element without a attribute of data-ix-load-run="false" will be invisible since nothing is animating them into view. So comment out this CSS if you haven't setup the load interaction script yet.
1/*Prevent flickering for page load elements*/
2html:not(.w-editor) [data-ix-load]:not([data-ix-load="stagger"], [data-ix-load-run="false"]) {
3 opacity: 0;
4}
5 html:not(.w-editor) [data-ix-load="stagger"]:not([data-ix-load-run="false"]) > * {
6 opacity: 0;
7}
