GreenShift
GreenShift
is Page Builder
is Page Builder

This effect is based on Clip path feature and option in the Animation container Block to add animations to CSS variables. It’s described in details in this video

Tricky part of this effect is to add also background letters. For this, you need to place the same text layer twice. One will be animated, second will be as background, we leave it without animation and set opacity of layer as 10-20%.

We also added on scroll interpolation. In our case, our effect is on top of page, so we must animate it once user start to scroll. So, we added 0 as start point and +=200 as end point of animation. For second layer we set 100 as a starting point. If your layer is not visible on page loading, then, you need to remove start point. In this way, the animation will start once layer will be visible on page