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>

Option	Description	Default
data-animated	Which effect will be used	none
data-animated-delay	Delay in ms after which the effect will start	0
data-animated-duration	Duration in ms that the animation will take	1000

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>