data-ix-scrollin
scroll-in
Summary
This solution is for creating global interactions for when elements scroll into view. Unlike some solutions in the library the options are relatively limited in order to keep the interactions more consistent across your entire site. If these are in use its recommended to apply them to most elements on your site or to turn off this solution.
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 scroll-in 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-scrollin=item
wrap
boolean
The default scroll in interaction, usually a simple fade up
data-ix-scrollin=heading
wrap
boolean
Unique animation for headings
data-ix-scrollin=image
wrap
boolean
Unique animation for images
data-ix-scrollin=line
wrap
boolean
Unique animation for lines
data-ix-scrollin=stagger
wrap
boolean
Will stagger in each child of this element when the parent scrolls into view. Useful for lists with several items or card sections with multiple columns.
data-ix-scrollin=container
wrap
boolean
Will apply the default item animation to all the children of this parent and each one will trigger once the child scrolls into view. Useful for when you have a list of cms items or larger cards that you want to individually animate when they enter rather than all at once.
data-ix-scrollin=rich-text
wrap
boolean
Will take a rich text block and apply a heading animation to each heading and an item animation to any other element.
03
Options
All options are applied to a data-ix-scrollin element. Some options are only available for specific elements.
Attribute Name
Value
Default
Description
{prefix}-start
string
top 90%
A GSAP ScrollTrigger start parameter to dictate when the animation should start. Generally avoid using this if possible to keep all animations triggered at the same point
{prefix}-stagger
number
0.2
Customize the stagger amount between items in a stagger animation
{prefix}-clip-direction
left / right / top / bottom
left
customize what direction a line animation clips from, default is from the left.
04
Notes
Setup
When using the scrollin solution best to set it up at the beginning of the build so it can be setup in your starter components and easily built into the rest of the components on your sites as you duplicate components and create more layouts.
Options
Also, I'd highly recommend using the global run option (data-ix-scrollin-run), to make it easier for users to turn this interaction on or off as this is the interaction you'll most likely want to have specific control of on certain sections.
You can bind every element within a section to a single component property called Scroll In Interaction and set the default to true or false, whichever you prefer.
