Start position for fade-in-left animation?

How To
1

The Fade-in-Left entry-animation starts the element off-screen, so it travels the full distance to it’s actual position. How can the animation position START just 50px left, rather than off-screen?

2

I didn’t see any controls for this, but I also wanted to make the fade-in-x animations more subtle. Bricks adds a class to animation elements, which then inherits a CSS animation. So, I redefined animations for the classes I wanted to modify. Here’s what I did for the fade-in-x animations, changing the travel distance to 3em in this case:

.brx-animate-fadeInUp {
  animation-name: fadeInUpMod !important;
}
.brx-animate-fadeInDown {
  animation-name: fadeInDownMod !important;
}
.brx-animate-fadeInLeft {
  animation-name: fadeInLeftMod !important;
}
.brx-animate-fadeInRight {
  animation-name: fadeInRightMod !important;
}


@keyframes fadeInUpMod {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes fadeInDownMod {
  0% {
    opacity: 0;
    transform: translateY(-3rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes fadeInRightMod {
  0% {
    opacity: 0;
    transform: translateX(3rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes fadeInLeftMod {
  0% {
    opacity: 0;
    transform: translateX(-3rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
1 Like
3

Thanks for your help! I’m actually using another solution that I really like. Sharing here for others.
I’m using it for a 2 column grid, where the left items fade-in from the left, and the right items fade-in from the right along with a slight delay for a stagger effect.

Each element gets an interaction: enter viewport, set attribute, key = class, value = fade-center.
And i have this custom css:

root .test-anim:nth-child(odd){
	opacity: 0;
	transform: translateX(-50px);
	transition: all 1s ease-in-out;
}
root .test-anim:nth-child(even){
	opacity: 0;
	transform: translateX(50px);
	transition: all 1s ease-in-out;
  transition-delay: 250ms;
}
root .test-anim.fade-center { 
	opacity: 1;
	transform: translateX(0px);
}
4

I like this, @kyle-gs

It overrides just the selected settings of just selected animations, while obeying Animation duration and Animation delay settings in Bricks interaction editor.

For global use, I put these in my Bricks > Settings > Custom CSS.

1 Like
5

@yalcin glad it could help you!