Animating Page Color on Scroll With Lumos V1
Add to before </body> tag in page or project settings
Apply the required attributes
Required Elements
When this element enters view, animate the page color
Select which color mode to animate to in the attribute value
Name
colorscroll-mode
Value
2
Optional settings for this element
Name
Value
Name
Value
Name
Value
Name
Value
Name
Value
Optional Elements
Optional Settings
Set speed attribute on the #lumos-colors style tag
Name
colorscroll-speed
Value
0.4
Optional settings for this element
Name
Value
Name
Value
Name
Value
Name
Value
Name
Value
Set ease attribute on the #lumos-colors style tag
Uses GSAP ease options
Name
colorscroll-ease
Value
power1.out
Optional settings for this element
Name
Value
Name
Value
Name
Value
Name
Value
Name
Value
Set offset attribute on the #lumos-colors style tag
Animates when triggers are X% from top of screen
Name
colorscroll-offset
Value
50
Optional settings for this element
Name
Value
Name
Value
Name
Value
Name
Value
Name
Value
Set breakpoint attribute on the #lumos-colors style tag
Animations only apply to X screen size and larger
Name
colorscroll-breakpoint
Value
0
Optional settings for this element
Name
Value
Name
Value
Name
Value
Name
Value
Name
Value