Nth Permutation Mathematics

    @neeravp/vue-3-animate-in-view
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    A simple Vue3 directive and a wrapper component to animate elements as they appear in viewport with TypeScript

    Installation

    npm install @neeravp/vue-3-animate-in-view
    # or
    yarn add @neeravp/vue-3-animate-in-view

    Setup

    Import to your Vue application

    Directive

    import { createApp } from "vue";
    import { AnimateInViewDirective } from "@neeravp/vue-3-animate-in-view";
    
    const app = createApp({
      /*** options */
    });
    app.directive("animate-inview", AnimateInViewDirective);
    
    app.mount("#app");

    Directive can then be used normally on any element

    <div
      v-animate-inview="'fadeInSlide'"
      class="w-1/2 h-96 bg-gray-500 mx-auto opacity-0"
    ></div>

    Component

    import { createApp } from "vue";
    import { AnimateInViewComponent } from "@neeravp/vue-3-animate-in-view";
    
    const app = createApp({
      /*** options */
    });
    app.component("animate-in-view", AnimateInViewComponent);
    
    app.mount("#app");

    Component can be used anywhere in the app now

    <animate-in-view animation="fadeInSlide">
      <div class="w-1/2 h-96 bg-red-500 mx-auto"></div>
    </animate-in-view>

    Usage

    Say we have declared two animations and classes to apply the animations

    <style>
      .fadeInSlide {
        animation: fadeInSlide 1s ease forwards 0.3s;
      }
      @keyframes fadeInSlide {
        from {
          opacity: 0;
          transform: translate3d(10%, 10%, 0);
        }
        to {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }
      }
    
      .fade {
        animation: fade 1s ease forwards;
      }
    
      @keyframes fade {
        to {
          opacity: 0.25;
        }
      }
    </style>

    Pass the desired class as a string literal (in single quotes) in your Vue template:

    <div v-animate-inview="'fade'">Animate me once upon scroll</div>

    Scroll Direction

    To apply animation only on specific scroll direction,

    Directive: pass the value as object

    Component: pass an object to the animation prop.

    On Downward scroll: the animation will only trigger the first time when scrolling down while element comes into the viewport.

    <!-- Directive -->
    <div v-animate-inview="{down: 'fade'}">
      Animation will be triggered once while scrolling down when the element enters
      the viewport
    </div>
    
    <!-- Component -->
    <animate-in-view :animation="{down: 'fade'}">
      <div>
        Animation will be triggered once while scrolling down when the element
        enters the viewport
      </div>
    </animate-in-view>

    On upward scroll: the animation will only trigger the first time when scrolling up while element comes into the viewport.

    <!-- Directive -->
    <div v-animate-inview="{up: 'fadeInSlide'}">
      Animation will be triggered once while scrolling up when the element enters
      the viewport
    </div>
    
    <!-- Component -->
    <animate-in-view :animation="{up: 'fadeInSlide'}">
      <div>
        Animation will be triggered once while scrolling up when the element enters
        the viewport
      </div>
    </animate-in-view>

    Repeat Modifier and Prop

    Note that by default the animation will only trigger once: the first time the element scrolled into view.

    To repeat animation everytime the element is scrolled into view:

    Directive: use the repeat modifier

    Component: pass the repeat prop

    <!-- Directive -->
    <div v-animate-inview.repeat="'fade'">Animate me upon scroll forever</div>
    
    <!-- Component -->
    <animate-in-view animation="'fade'" repeat>
      <div>Animate me upon scroll forever</div>
    </animate-in-view>

    To repeat the animation everytime while scrolling down

    Directive: add the repeat modifier

    Component: pass repeat as prop

    <!-- Directive -->
    <div v-animate-inview.repeat="{down: 'fade'}">
      Animation will be triggered while scrolling down when the element enters the
      viewport
    </div>
    
    <!-- Component -->
    <animate-in-view :animation="{down: 'fade'}" repeat>
      <div>
        Animation will be triggered while scrolling down when the element enters the
        viewport
      </div>
    </animate-in-view>

    Multiple animations

    Different animations can be used for each direction:

    <!-- Directive -->
    <div v-animate-inview="{down: 'fade', up: 'fadeInSlide' }">
      Animation will be triggered whenever element enters the viewport, scrolling in
      any direction
    </div>
    
    <!-- Component -->
    <animate-in-view :animation="{down: 'fade', up: 'fadeInSlide' }">
      <div>
        Animation will be triggered whenever element enters the viewport, scrolling
        in any direction
      </div>
    </animate-in-view>

    Note that by providing both up and down directions,

    Directive: the repeat modifier is implicitly set.

    Component: value of repeat prop is set to true implicitly

    License

    The MIT License (MIT). Please see License File for more information.

    Install

    npm i @neeravp/vue-3-animate-in-view

    DownloadsWeekly Downloads

    9

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    21.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • neeravpandya