Animations

Animations Widget

Our Animations widget is an easy way to add controlled animations to elements on your site. Animation styles include slides, rotations, scaling, skewing and even opacity changes. Scroll options allow you to set the exact scroll position in which to animate elements. An Advanced mode allows you to target existing elements, making this widget entirely compatible with fully completed sites.

Demo: https://demo.wocode.com/animations

Tutorial Video

Version Log

  • 1.1: Added ability to add a link any animation. Icon color picker added (Design section). (10/16/2018)
  • 1.0 Beta: Initial Release

Setup

STANDARD/ADVANCED MODE CONSIDERATION

This widget has two primary modes of operation:

  1. Standard: This mode is great for animating text, icons or images.
  2. Advanced: This mode allows you to target and animate existing elements on your site. The advanced mode requires accessing an element’s HTML. We promise, it’s easy.

This documentation will cover both widget modes. Please note the (Standard Mode) and (Advanced Mode) notes on section titles below.

WIDGET PLACEMENT (STANDARD MODE)

  • Drop the Animations widget on your page.
  • The widget itself will represent the text, icon or image you wish to animate. So place the widget exactly where you wish the element to be on your page, respective to your page layout.

WIDGET OPTIONS (STANDARD MODE)

  • Open the widget option panel.
  • Unique ID: Set a unique ID immediately. Multiple Animation widgets on the same page will create conflicts. Since the widget default ID is “animations-1”, you will want to change this to something like “animations-2” now. Each time you add a new Animations widget, increase the ID number (“animations-3”, “animations-4”, and so on). This way, any time a new Animations widget is dropped on the page, no two widgets will ever share the same ID.
  • Enable Advanced Mode: Advanced Mode allows you to animate existing elements on your page. See details below.
  • Element Type: Select an element type to animate: Text, Icon, or Image. Once you’ve selected an element type, the widget will transform into a container for the chosen element. The default element type is Text.
  • After selecting an element type, you will see options specific to the element type; such as a text entry field, icon chooser or image chooser. Use these options to prepare your element.
  • Scroll Position: This setting determines the page position in which the element will animate. The number entered here is a percentage parameter, and represents the percentage of the page that has been scrolled. A setting 0f 25 means that once the user has scrolled 25% down the page, the element will animate. Keep in mind that the top of the element is what triggers the animation. So for example, if you are animating a large image, and the image loads near the center of the page, the top of the image may already be beyond 20% page height without scrolling. In this case, a minimal value should be used, such as 10%.
  • Initial Opacity: This setting allows you to set the opacity for an element before it animates. This is useful for elements you wish to hide until the moment they animate.
  • Type of Animation: There are a variety of animation styles available. Each selection modifies a base animation style. The base animation styles are:
    • Translate: “slides” element along the X or Y axis.
    • Rotate: “spins” the element in place, or along the X, Y or Z axis.
    • Scale: changes the element size in place, or along the X or Y axis.
    • Skew: warps/deforms the element along the X or Y axis.
  • Animation Stages: Our widget allows 4 stages of animation. Each stage has it’s own translation value, as well as time duration. Keep in mind that all stages follow the same Animation Style. This means that if you’ve chosen an Animation Style of “Rotate”, you can’t transition to a scale or skew in other stages. Only one Animation Style is available per element.
  • Translation Value: This represents the value applied to the particular Animation Style. You will likely want to experiment with values to achieve the desired result. Negative values ARE accepted.
  • Time Duration for Translation Value: As the names states, this value represents the amount of time for a stage of animation to complete.
  • Since there are 4 stages of animation, you may give the look of an element speeding up or slowing down as it animates.
  • Easing: Adjusts the easing of the animation (applies to each animation stage)
  • Elasticity:
  • Reset Animation when Scrolled to Top of Page: Enabling this setting allows the animation to reset when the user scrolls to the top of the page. To avoid performance issues, animations may only be instantiated twice.
  • Do Not Animate in Editor Mode: This prevents the animations from taking place while in Editor Mode. It is suggested that this setting stays toggled on.

WIDGET PLACEMENT (ADVANCED MODE)

  • Drop the Animations widget on your page.
  • Once you enable Advanced Mode, the widget will transition to a placeholder. the placeholder will not be seen when your page is published. Place the placeholder anywhere on your page.

ADDING A CLASS TO AN EXISTING ELEMENT (ADVANCED MODE)

In order to use Advanced Mode, you must update the HTML of an element on the page. This is a very simple process.

  • Right-click on an element (text, image, etc).
  • Select “Edit HTML/CSS”
  • An editor will open, showing the element’s HTML by default. Stay on the HTML tab. Locate the class. In this case, we see the h1 headline text class, which has the class name “dmNewParagraph”.
  • Add a space, and a bit of new text to this line, so that the class name now states “dmNewParagraph animateTitle”.
  • So all we’ve done is add “animateTitle” to the existing class name (with a space before our addition). Do not use additional spaces or special characters.
  • Copy the part you added. In this case, just “animateTitle” (do not include the space).
  • Click the Update button. You can confirm that the changes have been saved once you see the Undo link next to the Update button.

WIDGET OPTIONS (ADVANCED MODE)

  • Open the widget option panel.
  • Toggle Enable Advanced Mode on.
  • Paste the class name you copied in the steps above into the Class Name field. This allows our widget to link up to the element you’ve updated.
  • That’s it! Continue to customize all other settings as described above in the Widget Options (Standard Mode). You may animate as many elements as you like. Just be sure to use a new Animations widget and class name each time.

WIDGET OPTIONS (DESIGN)

In the Design section, you will find sections that control the styling for the Title Text, Spacing, Pagination Color and Arrow Color. The spacing settings are standard spacing settings you find in all widgets. The Title Text styling section parameters will not be explained in detail here, as the labels are self explanatory.