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
![](https://cdn.prod.website-files.com/63972ff51e93d52ba190d204/64d792140d28836501eaef77_Screenshot%202023-08-12%20at%209.06.57%20AM.webp)
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
![](https://cdn.prod.website-files.com/63972ff51e93d52ba190d204/64d80ce24c758e0313391b1b_Screenshot%202023-08-12%20at%205.50.54%20PM.webp)
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
![](https://cdn.prod.website-files.com/63972ff51e93d52ba190d204/64d80ce24c758e0313391b1b_Screenshot%202023-08-12%20at%205.50.54%20PM.webp)
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
![](https://cdn.prod.website-files.com/63972ff51e93d52ba190d204/64d80ce24c758e0313391b1b_Screenshot%202023-08-12%20at%205.50.54%20PM.webp)
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
![](https://cdn.prod.website-files.com/63972ff51e93d52ba190d204/64d80ce24c758e0313391b1b_Screenshot%202023-08-12%20at%205.50.54%20PM.webp)
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