systaliko-ui

Collection of scroll triggered animations, Triggering the animation by scroll event.

Demo showing scroll-animation-combo component.

Demo showing how to use scroll animations.

Scroll Area component.

Displaying different content depending on order and scroll position.

Demo showing scroll-autoplay component.

Demo scroll animations component.

Demo showing how to use scroll rotate animations.

Demo showing how to use scroll rotate animations.

Demo showing how to use scroll rotate animations.

Collection of scroll rotation animations, Triggering the animation by scroll event.

Demo showing how to implement scroll triggred animations.

Demo showing how to implement scroll triggred animations.

Demo showing how to implement scroll triggred animations.

Demo showing how to implement scroll triggred animations.

Demo showing how to implement scroll triggred animations.

Scroll carousel on x axis, with optional progress indicator.

Demo showing how to use scroll x carousel component.

another Demo showing how to use scroll x carousel component in a reversed.

Select component with variants.

Demo showing how to use set-stagger-direction utility.

Shader component with two variants for gradient and hurricane both can be configured.

Demo showing shader component.

Demo showing hurricane shader component.

slider component with variants.

Display the active image and activate the next image with hovering the text indicator.

Demo showing how to use slideshow component.

Number value with splitted animation.

Demo showing Sliding number component.

spinner component with variants.

split text utility function, allows to split text into characters, words, returns (characters, words, characterCount, wordCount).

Spotlight list, when hovering an item it will highlight it by decreasing the visiblity of the other items.

Demo showing Spotlight list component.

Demo showing Spotlight list component.

Demo showing different usecase of Cards Stack component with smaller cards.

Demo showing different usecase of Cards Rotated Stack component.

Animated Block with orchestrated stagger animations, for your motion components, the animations are triggered by view.

Demo showing stagger container component.

stagger direction, Allow to animate in orchestrated order depending on the order, can animate from the start item, middle item, last item.

Demo of sticky cards stack.

Simillar to IG story, Story is a component that allows you to display a collection of components in a single view.

Demo showing how to use story component.

Svg globe path.

switch component with variants.

Demo showing team component.

Text component allows you to read the text by scrolling.

Demo showing Text scroll read component.

Splitted text animation with staggered effect triggered by hover gesture, You can easily customize by controlling the animation property (transform, opacity, blur), the stagger value, and the transition.