Adding animation while navigating in Visual Builder

You can add animation to you pages while navigating similar to this JET Cookbook example. Here’s how it can be done.

Navigation animation

oj-vb-content element accepts animation property which is passed down to oj-module internally.

Creating animation object

Open you shell page JS and define the module function as below. The getAnimation function returns the animation object based on the current path.

define(['ojs/ojmoduleanimations'], function(ModuleAnimations) {
  'use strict';
var PageModule = function PageModule() {};
  
  
  PageModule.prototype.getAnimation = function() {
    if(this.current.path === 'shell/main/main-start'){
      return ModuleAnimations['coverStart']
    }else{
      return ModuleAnimations['revealEnd']
    }
  }
return PageModule;
});

Assigning animation

Go to your shell html/design time and locate the oj-vb-content element, look for the animation property in the property inspector.

animation property

The function call looks complicated because we want to pass the current page to our module function so that we can add the correct animation. In our example the main-start page would be the landing or home page, so if you move to some other page we’ll animate coverStart. while at other pages, we’ll animate revealEnd to mimic ‘go back’.

$functions.getAnimation.bind({current:$application.currentPage})()

Versions

VB: 20.10

JET: 9.0.5