Gasptrigger and Animation challenge with variable rows

[Nextleveles]

I am trying to get an effect with greensock for the text in a slider were letters come from bottom to top like in "rocersa_com" homepage.

 

The challenge is that admin will add the text in the wordpress panel, so I dont know in prior if there will be, 1, 2, 3, 4 or more lines, that comes with this structure.

 

I will launch this effect with the gasptrigger, but need some help in getting the effect work.

 

<h1 class="animate-fade">
<span class="color-white fnt-dmsans">LOREM</span>
<span class="color-white fnt-newyork">IPSUM</span>
<span class="color-white fnt-dmsans">SIT AMET</span>
<span class="color-red fnt-newyork">Whenever</span>
</h1>

 

 

[mvaneijgen]

Could you create a minimal demo, this really helps people give you better answers.

 

I don't see what effect you are talking about on rocersa.com, there are multiple, but what your describing sounds a lot like a tutorial @Carl made

 

Also the Stagger property doesn't care how many or how little elements there are, so if you do the following each `span` will animate in `0.2` seconds after each other.

gsap.form(document.querySelectorAll('.animate-fade span'),{opacity: 0, stagger: 0.2})

 

[Nextleveles]

Thanks @mvaneijgen,

 

The effect I want to get is the way 

Next
Ceramic
Generation

 

is showing.... 

[Cassie]

That demo that @mvaneijgen posted should give you what you need to attempt this animation!

here's the split text docs https://greensock.com/docs/v3/Plugins/SplitText
And some demos - https://codepen.io/collection/XMoeqD

Good luck, if you get stuck, pop back here with a minimal demo showing what you've tried.