- You can add data-delay="X" after the class of your element to delay when it appears. Replace X by amount of pixels ex: data-delay="100" to delay the animation by an additional 100px of scroll.
Color
Revealing Effect
Change --td (total duration) on parent element to increase/decrease the time of the effect in HTML panel.
Change --bc (background color) for the desired color
Change --d (delay) to increase the delay before animation starts
Dont forget to add a "js-inscreen-x" class so the element appears when percentage of the height is visible within viewport.
Fade up / down / left / right
Add class ".fade-up" / ".fade-down" / ".fade-left" / ".fade-right" to add a fade-in effect from the direction you choose. You need to also add a ".js-inscreen-X" to make it appear when a percentage of the height is visible within viewport.
Animation using clip path to reveal element from left to right. Can be customized in SCSS.
Add --d in style if you want to delay the animation ex: style="--d: 0.8s;"
Lorem ipsum sit amet this is an inline block
You can add a delay by using the --d, ex: style="--d: 0.8s;"Ridiculus justo conubia inceptos placerat enim curae duis, vel dictum consequat auctor porta primis massa, magna neque tincidunt euismod nec non. Eleifend dui lacus taciti platea feugiat commodo ac praesent hac euismod