You can animate any element to trigger on scrolling.

Element appears from the Right as you scroll down, then hides as you continue scrolling down.

There are four animations settings here

• Scroll down:
  Init state: opacity:0;transform:translateX(-30px);
  Step 1: opacity:1;transform:translateX(0px);
  Scroll direction: Down
  Scroll offset: 450px
• Scroll down:
  Step 1: opacity:0;transform:translateX(30px);
  Scroll direction: Down
  Scroll offset: 50px
• Scroll up:
  Step 1: opacity:1;transform:translateX(0px);
  Scroll direction: Up
  Scroll offset: 60px
• Scroll up:
  Step 1: opacity:0;transform:translateX(30px);
  Scroll direction: Up
  Scroll offset: 500px

You can add scroll trigger on any element but you can effect another element by setting the target and animate the target when event triggered.

When you scroll down the element appear from the bottom, and when you keep scrolling down the element will hide.

There are four animations settings here

• Scroll down:
  Target: .example-2-popup
  Init state: bottom:-100px;
  Step 1: bottom:10px;
  Scroll direction: Down
  Scroll offset: 0px
• Scroll down:
  Target: .example-2-popup
  Step 1: bottom:-100px;
  Scroll direction: Down
  Scroll offset: -500px
• Scroll up:
  Target: .example-2-popup
  Step 1: bottom:10px;
  Scroll direction: Up
  Scroll offset: -450px
• Scroll up:
  Target: .example-2-popup
  Step 1: bottom:-100px;
  Scroll direction: Up
  Scroll offset: 10px

You can animate any element when its clicked, or even animate a totally separate element instead.

The Button element will slide down when the button first clicked, then slide up on the second click

There is one animation setting here

• Click:
  Target: .click-block-container
  Init state: height:0px;
  Step 1: height:auto;
  Second Click:
  • Step 1: height:0px;

You can add click trigger on any element and animate it or animate another element when event triggered.

When you click on the button the sidebar will slide-in-left, and when you click anywhere in the page the sidebar will slide-out-right.

On the button there are twp animations settings

• Click:
  Target: .sidebar
  Init state: right:-400px;
  Step 1: right:0px;
  Second Click:
  • Step 1: height:0px;
• Click:
  Target: .sidebar-bg
  Add classes: open
  Second Click:
  • Add classes: open

Hi There! ;)

You can now animate any element by hovering over it, or cause another element to animate instead

When you hover over the image, icons, text and gradient will appear, and when you hover out they will disappear.

There are three animations settings here

• Hover:
  Target: > .fa the icons inside current element
  Init state: transform:rotate(30deg) scale(0.9);
  Step 1: transform:rotate(0)scale(1);
  Hover out:
  • Step 1: transform:rotate(30deg) scale(0.9);
• Hover:
  Target: > h3 the heading inside current element
  Init state: transform:translateY(40px);
  Step 1: transform:translateY(0px);
  Hover out:
  • Step 1: transform:translateY(40px);
• Hover:
  Target: > .img-overlay the .img-overlay inside current element
  Init state: opacity:0;
  Step 1: opacity:1;
  Hover out:
  • Step 1: opacity:0;

• Tab 1
• Tab 2
• Tab 3

You can now animate any element inside tabs and carousel

When you click on a tab, the text inside that tab will be animated.

There are three animations settings here

• Class Added:
  Target: > h3 the tab title
  Duration: 1000 1 second
  Init state: transform:translateY(30px);opacity:0;
  Step 1: transform:translateY(0px);opacity:1;
  Class removed:
  • Step 1: transform:translateY(30px);opacity:0;
• Hover:
  Target: > p the paragraph inside the tab
  Duration: 1000 1 second
  Init state: transform:translateX(30px);opacity:0;
  Step 1: transform:translateX(0px);opacity:1;
  Class removed:
  • Step 1: transform:translateX(30px);opacity:0;