Getting to grips with MoJS

Sam Wood
By Sam WoodSenior Web Developer
5 minutes to read

User interface is a fundamental part of how we interact with the web and the better the user experience, the better the website. Animations and transitions can enrich a user's experience but we don't want to saturate our websites with unnecessary weight.

CSS3 introduced transitions and animations which allow us to wow the user and ultimately improve their experience. However, too much use can slow down the performance of a website therefore creating a poor user experience.

That's where MoJS comes in. This lightweight motion graphics toolkit uses Javascript to add that extra bit of flair to your website without slowing it down.

Here we'll show you just a few simple effects we've created with MoJS.

Shape and Burst effect

The Shape module is the foundation of MoJS. It creates basic geometric shapes which can be manipulated to produce many different effects.

Clicking within the search box will trigger the search icon to appear. This uses a combination of two shapes: circles and lines. In order to create the effect of a circle being drawn, we use the strokeDelay and strokeOffset properties. This is also applied to the line shape but with a slight delay added.

const circle = new mojs.Shape({
    parent: searchBlock,
    top: 24,
    left: 275,
    radius: 9,
    shape: 'circle',
    fill: 'none',
    stroke: '#00aef0',
    strokeWidth: 3,
    strokeDasharray: '100%',
    strokeDashoffset: { '-100%' : 0 },
    duration: 500,
    angle: 60,
    isShowStart: false,
    isShowEnd: true
});
const line = new mojs.Shape({
    parent: searchBlock,
    top: 34,
    left: 283,
    radius: 3,
    shape: 'line',
    fill: 'none',
    stroke: '#00aef0',
    strokeWidth: 3,
    strokeDasharray: '100%',
    strokeDashoffset: { '-100%' : 0 },
    duration: 300,
    delay: 500,
    angle: 230,
    isShowStart: false,
    isShowEnd: true
});

Burst is a handy module that creates, you guessed it, burst effects. In their simplest form they look like fireworks, but with a little tinkering with module options, we can add feedback to user input.

By clicking within the search box, sparks are produced to indicate that the user has clicked within the area.

const topLeftCornerBurst = new mojs.Burst ({
    parent: searchBlock,
    top: 0,
    left: 0, 
    radius: {0: 50},
    count: 3,
    angle: { '-60': '-90' },
    degree: {0: 30},
    children: {
        shape: 'circle',
        fill: 'white',
        strokeWidth: 5,
        duration: 400,
        stroke: 'white'
    }
});

Let's get this all working by binding the click event. play() is an MoJS method along with replay, playBackward, and reset to name a few.

$('input').on('click', function(e) {
    searchBurst.play();
});

See the Pen ED Draw demo by Sam Wood (@samed89) on CodePen.

Head over to our github and check out the search box demo code!

Dust effect using ShapeSwirl

ShapeSwirl moves shapes over sine trajectories which gives the effect of dust floating away.

To create a dust effect we've used multiple ShapeSwirls on varying paths. With more time to experiment, we could utilise the Burst module to create a similar effect. This is because the shapes created using Burst (see above) are individually customisable.

Here's a snippet of one of the ShapeSwirls:

const swirlR1 = new mojs.ShapeSwirl({
    parent: searchWrapper,
    top: '100%',
    left: '5%',
    fill: 'rgba(255,255,255,0.75)',
    y: { 0: -100 },
    radius: 30,
    swirlSize: 5,
    swirlFrequency: 1, 
    duration: 500,
    direction: -1,
    degreeShift: 90
});

We want the dust to appear as the SearchWrapper hits the bottom of the window. We know the transition duration of the SearchWrapper is 200ms so we're going to get the Burst to trigger after 180ms of hitting the Toggle button.

See the Pen ED Dust Demo by Sam Wood (@samed89) on CodePen.

Or head over to our github and check out the dust demo code.

Ripple effect using Shape

Now we're going to use the Shape module to create a simple ripple effect.

Here we have 3 circle shapes which scale up and disappear, relative to the user's mouse pointer. Incorporating the delay property gives the effect of multiple ripples appearing on click.

const ripple3 = new mojs.Shape({
    parent: searchWrapper,
    top: 0,
    left: 0,
    shape: 'circle',
    fill: 'none',
    strokeWidth: 2,
    stroke: 'rgba(0,0,0,0.3)',
    scale: { 0: 1},
    radius: 80,
    opacity: { 1: 0},
    delay: 400,
    duration: 1000
});

After a user clicks within the blue area of the SearchWrapper, a ripple effect will begin. Let's take a look at the binding for this:

searchWrapper.on("click", function(e) {
    ripple
        .tune({ x: e.pageX, y: e.pageY })
        .replay();
    ripple2
        .tune({ x: e.pageX, y: e.pageY })
        .replay();
    ripple3
        .tune({ x: e.pageX, y: e.pageY })
        .replay();
});

By passing the event into the function, we can use the tune method to set the X and Y values of the shapes to match the pointer.

See the Pen ED Ripple demo by Sam Wood (@samed89) on CodePen.

Or head over to our github and check out the ripple demo code!

These are just a few simple effects that can be achieved with a little code and a powerful tooklkit. We've only just scratched the surface of MoJS and hope to explore it further in the near future!

comments powered by Disqus

Articles by Sam Wood

Chief front-end bod and conductor of ELO - ED Light Orchestra.