In elementor there is a feature called “dynamic text” which lets you animate a changing word (among other more complex things). I know there probably isn’t a native way to do this in Bricks: but I’d love to hear if there is a way to achieve this with BricksForge?
There are many use-cases for this, and it’s a great way to showcase how versatile your offerings are, etc.
Thanks in advance for any feedback here.
I need this to and would love to know if this is possible to achieve in BricksForge.
For anyone who comes across this like I did, I made this effect in a simple way using just CSS alone.
It’s not going to be a Bricks component or anything.
First is your heading element. Add a class to a span and some child spans for each word:
I love <span class="text-swap"><span>Donuts</span><span>Tacos</span><span>Shakes</span><span>Chips</span><span>Chocolate</span><span>Kittens</span></span>
There are 6 words here, so you’ll have to calculate your animation. I want each word to cycle in, pause, then cycle out, this will be 3 seconds total, so 18 seconds for the whole animation.
Use this for CSS:
.text-swap {
display: inline-grid;
position: relative;
vertical-align: baseline;
}
.text-swap > span {
grid-area: 1/1;
white-space: nowrap;
opacity: 0;
transform: translateY(.35em);
will-change: opacity, transform;
/* 6 words * 3s per word = 18s total */
animation: textSwap 18s infinite;
}
/* stagger */
.text-swap > span:nth-child(1) { animation-delay: 0s; }
.text-swap > span:nth-child(2) { animation-delay: 3s; }
.text-swap > span:nth-child(3) { animation-delay: 6s; }
.text-swap > span:nth-child(4) { animation-delay: 9s; }
.text-swap > span:nth-child(5) { animation-delay: 12s; }
.text-swap > span:nth-child(6) { animation-delay: 15s; }
@keyframes textSwap {
0% { opacity: 0; transform:translateY(.35em); }
5.555% { opacity: 1; transform:translateY(0); }
14.444% { opacity: 1; transform:translateY(0); }
16.666% { opacity: 0; transform:translateY(.35em); }
100% { opacity: 0; transform:translateY(.35em); }
}
If you want to use reduce animation, something like this could be added which will just show the first word:
@media (prefers-reduced-motion: reduce) {
.text-swap > span { animation: none !important; opacity: 0; transform: none; }
.text-swap > span:first-child{ opacity: 1; }
}
With more or less words, you’ll have to adjust the stagger delays. And for a per-word animation more or less than 3 seconds, the keyframes should be adjusted. There is timing for coming in, for pausing, and for leaving.
If you want words to overlap a little as they come in and out, adjust the delays etc.
I don’t know how to make this a component in Bricks, I just added this to a code block on the same page, but if you use this multiple times and they have different number of words, you’ll have to separate them and duplicate it.
It’s basic but gets the job done for a one-off need.
I suspect you could use Forge for this by latching on to the wrapper span and doing some stagger child techniques, but maybe that’s overkill for this one-off.