wakeworks/elemental-animator

Adds animation options to your elements

1.0.1 2022-06-07 10:55 UTC

Requires

• dnadesign/silverstripe-elemental: ^4
• silverstripe/framework: ^4.4

Requires (Dev)

• phpunit/phpunit: ^5.7
• squizlabs/php_codesniffer: ^3

BSD-3-Clause

• silverstripe
• Animations
• elemental

README

Introduction

Introduces easily integratable animations for your elemental blocks

Requirements

• silverstripe/framework ^4.4
• silverstripe/elemental ^4

This module was only tested on >= 4.10.

Installation

composer require wakeworks/elemental-animator

Then dev/build?flush=1.

How does it work? / Setup

To introduce animations into your elements, you'll have to which animation you want to each element.

<div
    data-scroll
    data-animated="fadeIn">

    $HTML
</div>

There are multiple options available

<div
    data-scroll
    data-animated="fadeIn"
    data-animated-delay="100"
    data-animated-duration="100">

    $HTML
</div>

Available effects

• fadeIn
• fadeInUp
• fadeInDown
• fadeInLeft
• fadeInRight

Control animations from CMS

You can control your animations in cms by enabling the animations for all elements or specific ones. This will add input fields to your element's settings tab.

# Enable for all
DNADesign\Elemental\Models\BaseElement:
    animated: true

# Enable for specific one
Your\Specific\Element:
    animated: true

<div
    data-scroll
    data-animated="$Animation"
    data-animated-delay="$AnimationDelay"
    data-animated-duration="$AnimationDuration">

    $HTML
</div>