data-ix-scrolling
scrolling
Summary
This solution allows you to create create parallax animations where elements move or rotate based on scroll position. It's incredibly flexible as you get control over trigger elements, start and end values for each property, and more.
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 scrolling solution relies on two core layers of divs in order to function, with an optional third element that can be used for more precise control over the scrolltrigger start and end points.
Attribute Name
Value
Default
Description
data-ix-scrolling=wrap
wrap
boolean
This is the outermost element of the solution that will hold any layer elements within it. By default this will be used to define the start and end points of the ScrollTrigger animation.
data-ix-scrolling=layer
wrap
boolean
This is the element that will be transformed during the animation. Since there is no 'default' animation to make this solution more flexible you will need to apply attributes to define what properties you are updating over the scroll animation. There can be multiple layer elements inside each wrap.
data-ix-scrolling=trigger
wrap
boolean
This is an optional element inside the wrap that you can use to have more specific control over the start and end points of the ScrollTrigger. If this element is inside the wrap it will be used as the trigger, otherwise the wrap will be used.
03
Options
Since this solution does not have a default interaction it relies much more heavily on option attributes. The first list of options will be applied to the wrap element, and the second list must be applied to a layer element.
FOR WRAPS
Attribute Name
Value
Default
Description
{prefix}-start
string
top bottom
A GSAP ScrollTrigger start parameter to dictate when the animation should start.
{prefix}-end
string
bottom top
A GSAP ScrollTrigger end parameter to dictate when the animation should end.
{prefix}-scrub
number
0.5
Sets the ScrollTrigger scrub value for the timeline. Changes how much of a delay there is for the timeline to catch up to the windows scroll position.
{prefix}-tablet-start
string
null
A unique start parameter to dictate when the animation should start on the Tablet breakpoint (Will overwride desktop start value if the attribute is present.
{prefix}-tablet-end
string
null
A unique end parameter to dictate when the animation should end on the Tablet breakpoint (Will overwride desktop start value if the attribute is present.
{prefix}-mobile-start
string
null
A unique start parameter to dictate when the animation should start on the Mobile breakpoints (Will overwride desktop start value if the attribute is present.
{prefix}-mobile-end
string
null
A unique end parameter to dictate when the animation should end on the Mobile breakpoints (Will overwride desktop start value if the attribute is present.
FOR LAYERS
Attribute Name
Value
Default
Description
{prefix}-ease
string
none
The GSAP ease used for for this layer (will override the default ease).
{prefix}-position
string
<
A GSAP position parameter to dictate when the animation should start and end within the whole timeline (useful for having multiple layers within one wrap).
{prefix}-duration
number
1
The duration of this layer 's tween. Useful if you have multiple layers and want them to span different portions of the timeline.
{prefix}-opacity-start
number
null
Sets the start value for the gsap tween to animate opacity (eg 0)
{prefix}-opacity-end
number
null
Sets the end value for the gsap tween to animate opacity (eg 1)
{prefix}-x-start
string
null
Sets the start value for the gsap tween to animate translate X (eg 20%)
{prefix}-x-end
string
null
Sets the end value for the gsap tween to animate translate X (eg 0%)
{prefix}-y-start
string
null
Sets the start value for the gsap tween to animate translate Y (eg 3rem)
{prefix}-y-end
string
null
Sets the end value for the gsap tween to animate translate Y (eg 0rem)
{prefix}-scale-start
number
null
Sets the start value for the gsap tween to animate scale (eg 1.2)
{prefix}-scale-end
number
null
Sets the end value for the gsap tween to animate scale (eg 1)
{prefix}-scale-x-start
number
null
Sets the start value for the gsap tween to animate scale X (eg 1.2)
{prefix}-scale-x-end
number
null
Sets the end value for the gsap tween to animate scale X (eg 1)
{prefix}-scale-y-start
number
null
Sets the start value for the gsap tween to animate scale Y (eg 1.2)
{prefix}-scale-y-end
number
null
Sets the end value for the gsap tween to animate scale Y (eg 1)
{prefix}-width-start
string
null
Sets the start value for the gsap tween to animate width (eg 100%)
{prefix}-height-start
string
null
Sets the start value for the gsap tween to animate height (eg 50%)
{prefix}-height-end
string
null
Sets the end value for the gsap tween to animate height (eg 50%)
{prefix}-rotate-x-start
number
null
Sets the start value for the gsap tween to animate x rotation (eg 0)
{prefix}-rotate-x-end
number
null
Sets the end value for the gsap tween to animate x rotation (eg 180)
{prefix}-rotate-y-start
number
null
Sets the start value for the gsap tween to animate y rotation (eg 0)
{prefix}-rotate-y-end
number
null
Sets the end value for the gsap tween to animate y rotation (eg 180)
{prefix}-rotate-z-start
number
null
Sets the start value for the gsap tween to animate z rotation (eg 0)
{prefix}-rotate-z-end
number
null
Sets the end value for the gsap tween to animate z rotation (eg -90)
{prefix}-radius-start
string
null
Sets the start value for the gsap tween to animate border radius (eg 0vw)
{prefix}-radius-end
string
null
Sets the end value for the gsap tween to animate border radius (eg 20vw)
{prefix}-clip-start
string
null
Sets the start value for the gsap tween to animate a clipping mask — can use a clip mask value like a polygon with percent values, or the following keywords:
- full
- top
- bottom
- left
- right
{prefix}-clip-end
string
null
Sets the end value for the gsap tween to animate a clipping mask — can use a clip mask value like a polygon with percent values, or the following keywords:
- full
- top
- bottom
- left
- right
