Download the PHP package swdevelopment/animate without Composer
On this page you can find all versions of the php package swdevelopment/animate. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download swdevelopment/animate
More information about swdevelopment/animate
Files in swdevelopment/animate
Package animate
Short Description This will animate HTML elements using the AOS library.
License MIT
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Rated 4.75 based on 4 reviews
Informations about the package animate
Animate plugin for Craft CMS 3.x | 4.x | 5.x
This will animate elements using AOS from https://github.com/michalsnik/aos
Requirements
This plugin requires Craft CMS 3.0.0-beta.23 or later.
Installation
To install the plugin, follow these instructions.
-
Open your terminal and go to your Craft project:
cd /path/to/project -
Then tell Composer to load the plugin:
composer require swdevelopment/animate -
In the Control Panel, go to Settings → Plugins and click the “Install” button for animate.
or
./craft plugin/install animate
Animate Overview
Animate save you time by loading the files needed to run the Animate On Scroll library and allows you add animation elements in your templates.
Configuring Animate
To start using Animate, just navigate to the Control Panel and click on the Animate plugin.
- To activate be sure to make sure you turn the Activate Animate lightswitch on.
- To use a CDN with the library, be sure to turn the Use CDN lightswitch on. It is good practice to use a CDN in production environments. If you are developing locally, there is no need to turn it on.
Using Animate
To use Animate inside of a template, simply add the data-aos tags to any element. Full usage of the library is completely up to you.
- animations are used with the attribute data-aos
-
settings can be overridden with the attribute **data-aos-***
- delay
- duration
- offset
- easing
- anchor
- anchor-placement
Animation Options ( Fade )
| Animation Effect | Usage |
|---|---|
| fade | data-aos="fade" |
| fade-up | data-aos="fade-up" |
| fade-down | data-aos="fade-down" |
| fade-left | data-aos="fade-left" |
| fade-right | data-aos="fade-down" |
| fade-up-right | data-aos="fade-up-right" |
| fade-up-left | data-aos="fade-up-left" |
| fade-down-right | data-aos="fade-down-right" |
| fade-down-left | data-aos="fade-down-left" |
Example code of a "flip-up":
<div class="content" data-aos="flip-up">
<h1 data-aos="slide-right" data-aos-delay="200" data-aos-duration="400">Welcome</h1>
</div>For all animations, animation types and settings options, please refer to Animate's settings page.
Animate Roadmap
Future features:
- Add the ability to edit animation inside the CP on any field.
Brought to you by Tim Strawbridge
