vue-scroll-motion v0.0.25

vue-scroll-motion

Demo Link

install

npm install vue-scroll-motion

Import components

import VueScrollMotion from 'vue-scroll-motion'

Example

<template>
  <VueScrollMotion
    disable_multiple_animation
    :animation="[
      { opacity: 0, translate: '0 100', rotate: 180 },
      { opacity: 1, translate: '0 0', rotate: 0 },
      { opacity: 0, translate: '0 -100', rotate: -180 },
    ]"
  >
    ...
  </VueScrollMotion>
</template>

<script lang="ts">
import { defineComponent } from "vue"

import VueScrollMotoin from 'vue-scroll-motion'

export default defineComponent({
  components: {
    VueScrollMotion,
  },
})
</script>

Options

Animation Prop Example

[
  { opacity: 0, translate: '0 100' },
  { opacity: 1, translate: '0 0' },
  { opacity: 0, translate: '0 -100' },
]

Explain

If the component is located at the top of the document, the scroll percentage starts at 50%.

Supported Animation Type

opacity, translate, rotate, scale

Support for custom animation features will be provided

Support

• (!) Vue3
• Chrome >= 104
• Safari >= 14.1
• IOS Safari >= 14.5