How do animation so that the text appears in parts

[Gustavo Scarpim]

How to make animation below with Gsap?

[GreenSock]

Welcome to the forums, @Gustavo Scarpim. 

 

That looks like a pretty simple staggered animation. You could use SplitText to break apart the text, or just manually wrap each letter in a <span> and animate them that way. I'd encourage you to give it a shot and if you run into any trouble, post back here with a minimal demo and we'd be glad to offer some advice. 

 

Happy tweening!

[Gustavo Scarpim]

[Gustavo Scarpim]

My code: 
 

 

export function transformTitle(array) {
array.map((_, index) => {
return tl.from("#title" + index, {
opacity: 0,
ease: SlowMo.easeOut,
duration: 0.04,
});
});
}

export function transformSubtitle(array) {
array.map((_, index) => {
return tl.from("#subTitle" + index, {
opacity: 0,
ease: SlowMo.easeOut,
duration: 0.04,
});
});
}

var tl = gsap.timeline();
const ititle = "Mega man";
const result = ititle?.split("");
setTitle(result);

const isubtitle = "Nintendo";
const result2 = isubtitle?.split("");
setSubTitle(result2);

tl.from("#card1", {
opacity: 0,
duration: 0.8,
rotationY: 180,
stagger: 0.2,
}).from("#titulo1", {
opacity: 0,
duration: .5,
onStart: function () {
transformTitle(result);
},
}).from("#subtitulo1", {
opacity: 0,
duration: 1,
onStart: function () {
transformSubtitle(result2);
},
});

[GreenSock]

Hi @Gustavo Scarpim. Please provide a minimal demo - it's far more efficient when we can see the issue in the proper context (HTML, CSS, and JS). 

 

Here's a simple demo: 

See the Pen c7085fe5918fa6fa74c1785c28d8a5e2?editors=0010 by GreenSock (@GreenSock) on CodePen