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.
Attribute Name
Value
Default
Description
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}
