Introduction

API Reference

The MPX (Marketpath Effects & Animations) package provides classes and additional functionality to make your website stand out.

Check out some of the provided code examples below or head over to our demo site to see our effects for yourself.

Setup

Show Full

// Add this inside your <head></head> element
{%- add_stylesheet '/marketpath/ux-effects/css/ux-effects.css' -%}
{%- add_javascript '/marketpath/ux-effects/js/ux-effects.js' position:'body' -%}

Parallax

Creates a pseudo-3D effect by fixing an element's background image in place. Simply add the .mpx-parallax class.

To create a full-screen image, use the .mpx-parallax class with .mpx-parallax-full to set the image height to fill the screen. Couple this effect with a child element that has a translucent background for even greater results.

See Demo

Full-Screen Parallax w/ Overlay

Show Full

<section class="mpx-parallax mpx-parallax-full" style="background-image: url('https://domain.com/myImage.png')">
    <div class="w-100 h-100 text-center d-flex align-items-center justify-content-center" style="background-color: rgba(183, 73, 73, 0.7)">
        My content here
    </div>
</section>

Fly In

Animates an element by making it "fly" into view. Simply add the .mpx-flyin class.

By default, an element with this effect will appear to "fly in" from a higher z-index, that is, its position will not change but instead its size will be affected.

For a directional fly-in effect, use the .mpx-flyin class with one of the following directional classes:

  • mpx-flyin-top
  • mpx-flyin-right
  • mpx-flyin-bottom
  • mpx-flyin-left

Using one of the above classes will cause the element to fly in from the specified direction. The element will not grow or shrink during the animation; instead, its position is affected.

See Demo

Standard Fly In

Show Full

<p class="flyin">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
Directional Fly In

Show Full

<p class="flyin flyin-bottom">
    This text will fly in from the bottom!
</p>
Staggered Card Fly In

Show Full

{% for post in entity.blogPreviewPosts %}
    {% include "blog preview card" post:post delay:forloop.index0 %}
{% endfor %}

<!-- Blog Preview Card Partial Template -->
<!-- 150ms Between Animations -->
<div class="col-4 mpx-flyin mpx-speed-4 mpx-delay-ms-{{ delay | times: 150 }}">
    <div class="card">
        Card Content
    </div>
</div>
Alternating Direction Fly In

Show Full

<ul>
    <li><span class="d-block mpx-flyin mpx-flyin-right mpx-speed-4">Cum autem in quo sapienter dicimus, id a primo rectissime dicitur.</span></li>
    <li><span class="d-block mpx-flyin mpx-flyin-left mpx-delay-ms-200 mpx-speed-4">Quamvis enim depravatae non sint, pravae tamen esse possunt.</span></li>
    <li><span class="d-block mpx-flyin mpx-flyin-right mpx-delay-ms-400 mpx-speed-4">Portenta haec esse dicit, neque ea ratione ullo modo posse vivi;</span></li>
    <li><span class="d-block mpx-flyin mpx-flyin-left mpx-delay-ms-600 mpx-speed-4">Quod si ita sit, cur opera philosophiae sit danda nescio.</span></li>
</ul>

Fade In

Like fly in, but elements fade into view.

Use the .mpx-fadein class for this effect.

See Demo

Standard Fade In

Show Full

<p class="fadein">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

Count Up

Counts up from zero to a specified number.

To use this effect, add the .mpx-countup class to any element that has just a number as its inner HTML.

See Demo

Count Up w/ Cards

Show Full

{% for card in entity.demoCards %}
<div class="col-12 col-md-6 col-lg-4 my-2">
    <div class="shadow">
        <div class="count-up-card rounded-top bg-light h-100">
            <i class="text-primary bi {{ card.icon }}"></i>
            <h5 class="mpx-countup">{{ card.number }}</h5>
            <h5>{{ card.label }}</h5>
        </div>
        <div class="card-accent bg-primary rounded-bottom"></div>
    </div>
</div>
{% endfor %}

Typing

Uses the Typed.js library to animate the typing of any string.

Use this effect by assigning the .mpx-typing class to a div. Set the child element(s) with the text to be displayed (see example). The type of child element(s) and any attributes they may have will be ignored. Only the inner HTML is read.

By default, if there is more than one child element, the typing animation will loop indefinitely. See the loop/noloop modifiers for more information.

See Demo

Typing Effect w/ One String

Show Full

<div class="mpx-typing">
    <p>I am a developer.</p>
</div>
Typing Effect w/ Multiple Strings

Show Full

<div class="mpx-typing">
    <p>I am a developer.</p>
    <p>I am an explorer.</p>
    <p>I am a father.</p>
</div>

Lottie Animations

Adding Lottie animations to your site is very easy. Lottie files are a JSON format and should be uploaded to your site's Documents. Or, you can reference external files hosted elsewhere.

To add your animation to an editable HTML area:

  1. Type the file name and/or description. This value will be replaced when the animation loads. E.g. "Marketpath Logo Animation"
     
  2. Highlight the text you just added and click the link action
     
  3. From the dropdown menu select Document (or Custom if externally hosted)

     
  4. And then choose your Lottie JSON file.
     
  5. In the Class field add the class name "mpx-lottie"

The Marketpath UX Effects script will detect the Lottie animation class, load the Lottie library and animation, and then run your animation. The anchor tag you just created will be replaced with the animation.

Optional Parameters

You can use the following optional parameters to fine tune your animation's size and behavior.

mpx-width Will apply the inline width style to the parent DIV container
mpx-height Will apply the inline height style to the parent DIV container
mpx-loop true | false (default is true)
mpx-autoplay true | false (default is true)
mpx-renderer canvas | html | svg (default is canvas)

 

Anchor Tag

Show Full


<a href="https://assets7.lottiefiles.com/packages/lf20_fxpddxrt.json" 
    class="mpx-lottie">Lottie Animation: Triangles</a>
Anchor Tag with Optional Params

Show Full


<a href="https://assets7.lottiefiles.com/packages/lf20_fxpddxrt.json" 
    class="mpx-lottie" 
    mpx-width="200px" mpx-height="200px"
    mpx-loop="true" 
    mpx-autoplay="true"
    mpx-renderer="canvas">Lottie Animation: Triangles</a>

Modifiers

Modifiers are a collection of classes for MPX effects that change behavior. They are used in conjunction with the effects listed above.

 

Speed

Show Full

<span class="d-block mpx-flyin mpx-flyin-left mpx-speed-4">Quod si ita sit, cur opera philosophiae sit danda nescio.</span>
Delay

Show Full

<span class="d-block mpx-flyin mpx-flyin-left mpx-delay-ms-600">Quod si ita sit, cur opera philosophiae sit danda nescio.</span>
Loop

Show Full

??