ssfx
v0.0.2-fix
Published
A set of componets that apply css keyframe animation on scroll action.
Downloads
5
Maintainers
Readme
Svelte_Scroll_FX
There are element wrapers that you can import to use in you website for scroll animations.
There is only one element curently.
<script>
import {ScrollShow} from "ssfx";
</script>
ScrollShow hase a few attributes:
animation - enter the global css keyframes animation you want to use along with other animation functions like: duration, easeing, daley, etc...
<ScrollShow animation="keyframename 1s ease-in"> ... </ScrollShow>
fromTopShowAtPercent - a number that determans at witch persentage from top of screen to show the animation.
// Show the animation as soon as the animated element enter the screen. <ScrollShow animation="keyframename 1s ease-in" fromTopShowAtPercent={100} > ... </ScrollShow> // Show the element anim. as soon as it reaches half way on the screen <ScrollShow animation="keyframename 1s ease-in" fromTopShowAtPercent={50} > ... </ScrollShow>
fromTopHideAtPercent - this is simular as fromTopShowAtPercent but it determan the persentage at witch to reset the element anim to be played again.
// resets the element anim as soon as it exits on the bottom of the screen. <ScrollShow animation="keyframename 1s ease-in" fromTopShowAtPercent={50} fromTopHideAtPercent={100} > ... </ScrollShow>
defaultStyle - the default style attrib. value that the element return to after the anim is reset. The default is
opacity: 0;
animate_just_once - if this value is set the fromTopHideAtPercent attrib. is no loger needed and the element animation wont reset after exiting the screen and it will play only once.