Framed-animation-on-scroll

Examples for demo

Masking Section

When It's scrolling at 40%~90% progress in the 100vh height section,

clip-path value will be changed from 0% to 100%

Scroll progress in this section(threshold:0.5): 0.00%

The value of clip-path: 0.00

Opacity Gradient

Gradient weight: -100.00

Scroll progress (threshold: 0.5): 0.00%

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam itaque, consequatur, quasi ipsam nesciunt neque sunt placeat sit est omnis quos fuga eum dignissimos voluptates reiciendis quidem dolores! Animi, atque!

Animated Pictures

In 20~100 progress of scroll, frame will be change from 1 to 36.

Scroll progress (threshold: 0.5): 0.00%

Frame: 1

SQUARE

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum, vero, esse consequuntur placeat pariatur nostrum, nemo provident ea officia tenetur hic quo iure? Ratione molestias, nemo ipsam reprehenderit error dolorum?