Page 1 of 1

how make it different animation for letters?

Posted: Fri Oct 07, 2022 10:24 am
by manuel_songokuh
hi

i wish to use in WWB: animation for each letter (but different animation)..
see this code html:
<quadro>
<principale>O<span>rientamento</span>P<span>rofessionale</span>E<span>mpowerment</span>N<span>ews</span></principale>
</quadro>

file css:
@keyframes shrinkHide {
0% {
opacity: .5;
width: 172px;
}
20% {
width: 186px;
}
100% {
opacity: 0;
width: 0;
}
}

principale {
font-size:2rem;
color:#00b3ff;
font-weight:600;
letter-spacing:-.025em;
line-height:1.2;
font-family:Bellota;
margin:0 0 24px
}
quadro {
font-family:sans-serif;
padding-bottom:16px;
text-align:center
}
quadro principale span {
animation:shrinkHide 4s cubic-bezier(.175,.885,.32,1.275) 2s forwards;
display:inline-block;
font-weight:300;
opacity:.5
}

but i wish convert in WWB original with STYLE or CSS ANIMATION MANAGER, but is impossible, because
<span> </span> has not this in wwb different..

there is idea for trick ?

Re: how make it different animation for letters?

Posted: Fri Oct 07, 2022 11:34 am
by Pablo

Re: how make it different animation for letters?

Posted: Fri Oct 07, 2022 12:42 pm
by manuel_songokuh

Re: how make it different animation for letters?

Posted: Fri Oct 07, 2022 1:01 pm
by Pablo
For that, you will need a custom script.

Re: how make it different animation for letters?

Posted: Fri Oct 07, 2022 2:20 pm
by BaconFries
Maybe the following script will be of interest...Note some knowledge of HTML/jQuery is needed to implement into WWB.
https://textillate.js.org/

Re: how make it different animation for letters?

Posted: Fri Oct 07, 2022 2:58 pm
by manuel_songokuh
I used script html but I wish try in wwb original, then wwb cannot do it, I'm right?

Re: how make it different animation for letters?

Posted: Fri Oct 07, 2022 3:25 pm
by Pablo
There is no standard solution for this, so you will needs custom script.