All About DMS’ Built-In Animations

Posted · Add Comment

View the Demo

There are 7 CSS classes available throughout PageLines sections’ drop-downs (only available to upgraded versions of DMS):

  • no-anim
  • pla-fade
  • pla-scale
  • pla-from-left
  • pla-from-right
  • pla-from-bottom
  • pla-from-top
PageLines DMS Animation Options

From dms/editor/editor.functions.php#L218

View the LESS CSS for each option

There’s also pl-appear

Another available CSS class that can be used manually is pl-appear.

Don’t forget pl-animation

When manually assigning animation CSS classes (i.e. not using a section’s drop-down option) make sure to add the pl-animation class as well in order for the animation to take effect.

Examples:

<p class=”pl-animation pl-appear”>This text has an effect similar to pla-scale but is a little different.</p>

You can also add animation to entire sections by using the Standard Options box that shows up for every section, like this:

PageLines DMS Sections Animations Example -- pl-animation pl-appear

Settings applied to the first (and not the second) PopThumbs section shown below

Also Available, pl-animation-group

For multiple animation items to be grouped together, the pl-animation-group CSS class can also be used (typically only needed when building your own section), like this:

<div class="pl-animation-group">
<div class="pl-animation pla-from-left">
your content one
</div>
<div class="pl-animation pla-from-right">
your content two
</div>
</div>

Browser Support

The PageLines animation CSS properties work fine in most browsers.

Comments are closed.