Horizontal Fold Animation in Visual Builder

The new Redwood user experience from Oracle is winning awards, and with Oracle Visual Builder you can leverage the same experience in your apps. One of the cool effects we use in the Redwood apps we build is a folding animation used in pages with multiple panels of data.

In the video below we show how to add this animation to your pages to make them pop more for your customers. This is based on the Oracle JET cookbook horizontal fold example. Check out some of the other animation that JET includes in that section of the cookbook.

(Update 2023 – you can now use the horizontal and vertical foldout patterns directly if you start your application with the Redwood Starter Application tempalte).

Adding a fold-out/fold-in animation

We'll add a couple of new style classes to our app’s app.css file:

  .demo-panel {
    display: inline-block;
    transition: transform 233ms;
    transform: perspective(2000px) rotateY(0deg);
    transform-origin: left;
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
  
  .demo-panel.demo-closed {
    transform: perspective(2000px) rotateY(90deg);
  }

We then assign both of these classes to each one of the panels that we will animate. We also make sure each panel has a unique id so we can refer to it form JavaScript code. A panel HTML code will look like this:

We add a couple of JavaScript method to our page. The _animate function adds or removes the demo_close class to a panel using a specific delay that it gets as a parameter.

  PageModule.prototype._animate = function (selector, open, delay) {
    var el = document.getElementById(selector);
    el.style.transitionDelay = delay;
    if (open) {
      el.classList.remove('demo-closed');
    } else {
      el.classList.add('demo-closed');
    }
  }

The fold method will open or close the three panels in a specific sequence with a specified delay for each of them – creating the folding animation illusion.

  PageModule.prototype.fold = function () {
    var self = this;
    var el = document.getElementById('p1');
    if (el.classList.contains('demo-closed')) {
      self._animate('p1', true, '0ms');
      self._animate('p2', true, '217ms');
      self._animate('p3', true, '417ms');
    } else {
      self._animate('p3', false, '1ms');
      self._animate('p2', false, '217ms');
      self._animate('p1', false, '467ms');
    }
  }

Now call this function from a VB action chain when you need the panels to show up. Call it again when you need to hide them.