Download Now

DAWS – Dinamic Animation When Scrolling

Want to improve your site?

Make it more modern?

Then try this plugin.

The plugin has detailed documentation.

For the convenience of creating animations, use the constructor

I never welcomed adding a whole framework to my projects for the sake of a single feature, therefore, when developing this animation plugin, I used the generation of style sheets with animation options. Moreover, generation occurs with all vendor prefixes, which makes it completely cross-browser.

Using this plugin, you will not only add animation to your website with ease, but also make it original and cool. You can design your own animation as you like in the animation designer.

Features

  • Original effects of the appearance of elements.
  • A large list of animation effects, each of which can be changed to your liking.
  • A large list of various settings.
  • Animation constructor where you can add, edit and test your own animation effects.
  • Auto delay will save you from manually adding a delay to the appearance of elements, but you can also manually add a delay.

Installation

First, you must download the minimized plug-in file – daws.min.js which is located in the build folder in the directory of your site. for example to a js folder

Include the file in the head tag or before the closing body tag

  <script type="text/javascript" src="/js/daws.min.js"></script>

Then you need to initialize the plugin. It is advisable to do this before the closing body tag

<script>
    Daws.init({
        repeat: true
    });
</script>

It remains to set the attributes of the elements you want to animate

<h1 data-daws="animation: fade-in">Hello World</h1>

Main files

Pay attention that there are examples in the example folder

DAWS.zip
│
│
├ DAWS App
│ │
│ ├ css
│ │ │
│ │ └ app.css
│ │
│ │
│ ├ img \ images folder
│ │
│ ├ js
│ │ │
│ │ └ app.js
│ │
│ └ index.html // application
│
│
├ DAWS Plugin
│ │
│ ├ build // production
│ │ │
│ │ ├ daws.js
│ │ └ daws.min.js // use this plugin file
│ │
│ │
│ ├ examples
│ │ │
│ │ ├ daws.min.js
│ │ └ index.html
│ │
│ │
│ ├ src
│ │ │
│ │ └ daws.js // plugin development file
│ │
│ │
│ ├ .eslintrc.json
│ ├ gulpfile.js // development config
│ ├ webpack.config.js
│ ├ .babelrc
│ ├ .eslintrc.json
└ └ package.json

Future Plans

A small list of what is planned to be done in the next version

  • Many new animation effects will be added. It is also planned to make a convenient filter on them.
  • The ability to add animation steps will be added, which will make it possible to do even more interesting effects.
  • Letters animation will be implemented.
------------------------------------------------------------------------
Date: 09/02/2020
Version: 1.1.4
------------------------------------------------------------------------

Download Now