SAppearFeature

This feature allows you to make some elements appear when it enter the viewport with different apparition animation as well as custom one depending on your needs.

Platform  
js
   â”‚    Support  
Chromium supported
Firefox supported
Safari supported
Edge supported
Since  2.0.0
   â”‚   
Olivier Bossel
Olivier Bossel
   â”‚   
beta

  Preview

Bottom

I'm the appear element
 

Loading code example. Please wait...

Top

I'm the appear element
 

Loading code example. Please wait...

Right

I'm the appear element
 

Loading code example. Please wait...

Left

I'm the appear element
 

Loading code example. Please wait...

  Import

  Install

  Interface

  1. in
    bottom
    String

    Specify the animation you want to use to display your element

  2. out
    String

    Specify the animation you want to use to hide your item

  3. delay
    [500]
    Array<Number>

    Specify a delay before animation in or out your element. Can be an array of two number that define the min delay and the max delay. The real delay will be random between these two numbers

  4. duration
    [500]
    Array<Number>

    Specify the duration of the animation in ms. Can be an array of two number that define the min delay and the max duration. The real duration will be random between these two numbers

  5. distance
    [100,120]
    Array<Number>

    Specify the distance that your element will move if you have set an "in" direction. Can be an array of two number that define the min delay and the max distance. The real duration will be random between these two numbers

  6. appear
    false
    Boolean

    Specify if the element has to appear. This is usually setted automatically when needed

Bugs
are not our friends...

Don't hesitate to declare an issue if something does not works as expected.

Declare my issue on Github Talk about it on Discord

The more we are,
the stronger we become.

Don't hesitate to tell some words to you friends about us. The goal is to became more and more each days to help each others...

Support us on Patreon! Share on Facebook! Make a tweet!

The more we are,
the stronger we become.

Don't be afraid to join us on Discord.

Join us on discord!

We love,
Open source!

All of our codebase can be found on Github. We hope that you may contribute to help us make our tools even better!

Discover our codebase!

Welcome on