Scroll RevealDocs on GitHub

Demos


Moving the element when going left

Flipping the element when going left

Infinite loop animation

Moving the element when going top

Add class .demo-sr-active when element becomes visible

Scale effect

API


Scroll Reveal

import ScrollReveal from '@uixkit.react/components/ScrollReveal/index.tsx';
PropertyTypeDefaultDescription
configJSON Object Literals-Detailed animation parameters, using JSON string format.
default value:
{"from": {"opacity":0,"x":70},"to":{"opacity":1,"x":0},"ease":"Power2.easeOut","duration": 0.4,"delay": 0,"infinite" : false,"viewport" : '100%'}
other:
{"viewport":"100%","from":{"opacity":0,"x":100},"to":{"opacity":1,"x":0},"ease":"Power2.easeOut","duration":0.8,"delay":0,"infinite":false}
{"viewport":"100%","from":"","to":".demo-sr-active","infinite":true}

It accepts all props(include data-* attributes) which native div support.

JSON configuration properties of the config:

PropertyTypeDefaultDescription
viewportstring100%This attribute expands/contracts the active boundaries of the viewport when calculating element visibility. The default value is 100%. 20% means 20% of an element must be visible for its reveal to occur.
fromJSON Object Literals{"opacity":0,"x":70}Starting config using JSON string format, will transition from these values. Follow the parameter style of GSAP 2+. Eg. {"opacity":0,"scale":0.5,"transform":"translateX(50px) rotate(30deg)"}
toJSON Object Literals | string{"opacity":1,"x":0}Ending config using JSON string format, will transition from these values. Follow the parameter style of GSAP 2+. Eg. {"opacity":1,"scale":1,"transform":"translateX(0) rotate(0deg)"}
Can be a pure string, this style will be enabled when the viewport is specified, for example .demo-sr-active
easestringPower2.easeOutAccepts any valid GSAP 2+ easing, e.g. Power2.easeOut, etc.
durationnumber0.4This attribute controls how long animations take to complete.
delaynumber0This attribute is the time before reveal animations begin.
infinitebooleanfalseThis attribute enables/disables elements returning to their initialized position when they leave the viewport. When true elements reveal each time they enter the viewport instead of once.