Example Custom Motion Effects

Animations are added by the WPGet Common plugin

Important!

At the time of this writing, Elementor does not have a way to animate Entrance Animations on every entry to the viewport. 

Our plugin addresses this by using the browsers IntersectionObserver API. 

For any Entry Animation to replay on every entrance, you need to add a class to the Widget : ‘repeat-entrance-animation’

Do not use ‘repeat-entrance-animation’ on sliding animations. Currently this does not work properly on iPads. I will work on this when I get time.

Note: All Entrance effects respect the Motion Effects UI settings for.
* Animation Duration
* Animation Delay

Highlighters

Red Highlighter

Yellow Highlighter

Primary Highlighter

Secondary Highlighter

Accent Highlighter

Block Reveal

The following Block Reveals default to the Global Primary color.

To change the color, add one of the following classes to thesame element with the Entrance Animation.

  • bg-color-primary
  • bg-color-secondary
  • bg-color-accent

Default to Primary

Block Reveal Left

Block Reveal Right

Block Reveal Top

Block Reveal Top

Default to Secondary

Block Reveal Left

Block Reveal Right

Block Reveal Top

Block Reveal Top

Default to Accent

Block Reveal Left

Block Reveal Right

Block Reveal Top

Block Reveal Top

Clipping

Clip Reveal Bottom

Animate Fast

Animate Normal

Animate Slow

Clip Reveal Top

Animate Fast

Animate Normal

Animate Slow

Slide and fade

Small Fade Left

Animate Fast

Animate Normal

Animate Slow

Small Fade Right

Animate Fast

Animate Normal

Animate Slow

Small Fade Up

Animate Fast

Animate Normal

Animate Slow

Small Fade Down

Animate Fast

Animate Normal

Animate Slow

Animista

Tilt in TR

Animate Fast

Animate Normal

Animate Slow

Tilt in TL

Animate Fast

Animate Normal

Animate Slow

Tilt in BR

Animate Fast

Animate Normal

Animate Slow

Tilt in BL

Animate Fast

Animate Normal

Animate Slow

Tilt in Right

Animate Fast

Animate Normal

Animate Slow

Tilt in Left

Animate Fast

Animate Normal

Animate Slow

Slit in Vertical

Animate Fast

Animate Normal

Animate Slow

Slit in Horizontal

Animate Fast

Animate Normal

Animate Slow

Slit in Diag 1

Animate Fast

Animate Normal

Animate Slow

Slit in Diag 2

Animate Fast

Animate Normal

Animate Slow

Single Character animate

Note: Elementor currently does not fire a JS event when animation classes are added. For these individual character Entry Animations to work, each Widget needs to have the class “split-characters”. This results in a JavaScript running which splits the characters into <span> elements. We use the splittingJS library.

From the Widget down, all ‘p’,’h1′,’h2′,’h3′,’h4′ elements will get split to <span>’s with single characters and animated individually. The text in these elements should not contain any <span> elements, or it will break. This is due to the way SplittingJS separates the text into <span> elements.

Additional classes may also be added be added to make either “odd”,”even”,”first” or “last” words a global colour. Use the following classes.

  • word-color-even-primary
  • word-color-even-secondary
  • word-color-even-accent
  • word-color-odd-primary
  • word-color-odd-secondary
  • word-color-odd-accent
  • word-color-first-primary
  • word-color-first-secondary
  • word-color-first-accent
  • word-color-last-primary
  • word-color-last-secondary

The first example below “Char Drop & Rotate” will demonstrate using these classes.

Char Drop & Rotate

+ Classes to change colour of "Even" words

Animate Fast

Animate Normal

Animate Slow

Char Drop & Rotate

+ Classes to change colour of "Odd" words

Animate Fast

Animate Normal

Animate Slow

Char Drop Down

Animate Fast

Animate Normal

Animate Slow

Char Drop Up

Animate Fast

Animate Normal

Animate Slow

Char In Right

Animate Fast

Animate Normal

Animate Slow

Char In Left

Animate Fast

Animate Normal

Animate Slow

Char Zoom Pop

Animate Fast

Animate Normal

Animate Slow

Char Spin

Animate Fast

Animate Normal

Animate Slow

Char Y Flip

Animate Fast

Animate Normal

Animate Slow

Char X Flip

Animate Fast

Animate Normal

Animate Slow

Char Rotate TR

Animate Fast

Animate Normal

Animate Slow

Test Text Editor

Lorem ipsum dolor sit amet,

consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Only caveat is you cannot use SPAN here, or it will break