Add-ons

Installation Instructions

1. Unzip this file in your site's packages/ directory.
2. Login to your site as an administrator.
3. Find the "Add Functionality" page in your dashboard.
4. Find this package in the list of packages awaiting installation.
5. Click the "install" button.

Animation Settings

1. Login to your site as an administrator.
2. Find the "Add animation Settings" page in your dashboard.
3. Click "question-circle".

animation settings.png

 

4. Click "Launch Guide"
5. Check out the guide

For more information, please visit - AOS

Generate animation code

After setting parameters such as:
- animation type
- Anchor placement
- Easing functions
- Offset
- Duration
- Delay
- Anchor
- Once

click red button "Generate".

Screenshot from 2017-10-13 21-42-13.png

Press Ctrl +C to copy OR click button below " Copy & Close"

Add animation to the block

- click "Edit This Page" in the upper right corner (Pencil icon).
- click left mouse button the block, to which you want to add the animation
- from the pull-down menu select "Design & Custom Template"
- click "Cog" icon
- paste the previously obtained code into the field under the label "Custom Element Attribute"
- click "Save"

For more information, please visit - Concrete5 Design.

Add animation to content

- click "Edit This Page" in the upper right corner (Pencil icon)
- click block "Content" and select "Edit Block"
- select the text you want to animate (Heading, paragraph, etc.)
- click  red icon "cog" (Insert Animation)
- in the modal window, in the "code" field, paste the previously received code. Click "OK".
- close edit block - click Save.

Animations are disabled in edit mode

Animation Demo

 

 

Fade

Fade-left

Fade-up-left

Fade-up

Fade-right

Fade-down-right

Fade - down

Fade-up-right

Fade-down-left

Flip animations

Flip-up

Flip-right

Flip-down

Flip-left

Slide animations

Slide-up

Slide-right

Slide-down

Slide-left

Zoom animations

Zoom-in

Zoom-in-left

Zoom-out-up

Zoom-out-right

Zoom-in-up

Zoom-in-right

Zoom-out-down

Zoom-in-down

Zoom-out

Zoom-out-left