RC3 | Animation

Beta
#1

Working on a few very simple scroll effects and noticed that (unless I’m bonkers) Fade In XXXX and Fade In XXXX Big are identical.

#2

@DoncoMarketing, thanks for writing in! All of the pre-built animations are based on the following library:

Looking at the source code, the Standard and Big animations differ like so…

Standard:

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

Big:

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

So Standard translates in from a value of 100% and Big translates in from a value of 2000px. This is important to keep in mind, as % values for transforms are relative to the size of the Element being transformed. This means that if you used Fade In Left on an Element that was 500px wide, it would start from 500px to the left, and then translate back to the starting point. But if your Element was 40px wide, it would only start from 40px to the left, then translate in. Fade In Left Big on the other hand will always translate in from 2000px out. Keep this in mind when working with these animations, and feel free to review that library’s source code if you have any questions about how something is functioning.

Cheers!

1 Like