Vue3_ScrollAnimation

vue3 scroll animation component

scroll-components

Package Install

npm install zion-scroll-animation

Import in project

import  ZionScrollAnimation from 'zion-scroll-animation'

Use in project

<template>
  <div id="app">
    <zion-scroll-animation :animation="animation" :duration="duration" :delay="delay" :offset="offset">
      <div class="box"></div>
    </zion-scroll-animation>
  </div>
</template>

Options

| Option | Type | Default | Required | Description | |-------------------|--------|---------|----------|--------------------------------------------------------------------------------------------------------------------------------------------| | once | Bool | false | true | Every intersecting called animation | | animation | String | 'fade' | true | animation name (e.x 'fade','from-left','from-right','from-top','from-bottom', 'flip-top', 'flip-right', 'flip-bottom','flip-left, 'scale', | | animationDelay | Number | 0 | false | animation duration | | animationDuration | Number | 1000 | false | animation duration | | animationEasing | String | ease | false | animation duration | | animationOffset | Number | 0 | false | animation offset |

Animation

| Animation Name | Description | |----------------|-------------| | fade | fade in | | from-left | from left | | from-right | from right | | from-top | from top | | from-bottom | from bottom | | flip-top | flip top | | flip-right | flip right | | flip-bottom | flip bottom | | flip-left | flip left | | scale | scale | |

Example

<template>
  <div id="app">
    <zion-scroll-animation
        :animation="animation"
        :animationDelay="0"
        :animationDuration="1000"
        :animationEasing="ease"
    >
      <div class="box"></div>
    </zion-scroll-animation>
  </div>
</template>

Demo

Demo