Hi Forum, we want to create an animation similar to https://codepen.io/GreenSock/pen/LEYqezo the one shown here. I just can not find any way to add a Line Wrapper when setting SplitText to Lines.
Hmmmm…I’m not really sure that animation could be replicated exactly in bricksforge. Not all codepens GSAP js could be easy translate into bricksforge animation panel: some are pretty straightforward, others reqire some tweaks, another group are not possible.
Personally when I feel that some code is too much for the editor I add it in the node editor under custom JS.
Try something like this:
Assuming you have a basic text element with a class of split_text-anim
Create a timeline with 2 animations:
First Animation:
Selector to animate: .split_text-anim
No actual animation at all, a duration of 0 or 0.1 and split text enabled
Second Animation:
Selector to animate: .split_text-anim > .brf-split-lines
Animation however you want it like FROM Y 50px and opacity 0, split text enabled as well and position to start at the end of the previous animation
Lastly, in your text elements custom css, add:
%root% > .brf-split-lines {
overflow: hidden;
}
This will set the overflow of the direct .brf-split-lines children to hidden, making it possible to emulate that masked kinda line reveal
Obviously you can make it a lot prettier and smoother than my example by adjusting the timing and easings n stuff 
1 Like