HUB - Using Custom Inview Animations

Hub comes with a really powerful animations system. It is built in rows, columns and some other elements such as carousel, liquid text etc.

By enabling custom animations on each element, you can animate elements inside of that.

1. Rows: Custom animations on rows will animate columns.
2. Columns: Custom animations on columns will animate the content inside it.
3. Fancy Headings: Based on Splitting option, it'll animate lines, words or each character or the whole element if Splitting is not enabled. We'll explain more later.
4. Carousel: Custom animations will animate each cell.

And so on.

Let's start with rows. Consider this layout, let's add some scaling animation to those boxes

First, enable the animations option on the row, or inner row.

Now let's tweak some of the animation sliders. We will change the initial scale and opacity under Animate From tab.

And that's all! Now check the animations.

You can also check the duration, stagger delay (the delay between each items animation), starting delay or more controls right in Animations tab

Or if you're not into playing with sliders, just use animation presets

Let's talk about Liquid Text element.

You can enable custom animations on Liquid Text by enabling Split Animations. Altho, if you added animations to its parent column, it will animate alongside the other elements. Unless you added a separate animation on this element.

So, by enabling Split Animations you can animate the different parts of the text inside the element. 

And one thing to remember is, if you have animations on an element, e.g. Liquid Text, its parent animations won't have effect on that element.