Animate text from bottom to top by character with delay

[petrosmani]

Hello,

i want to create a text that animates from bottom to top seperate by each character. 
Something similar to the first animate on this site https://dashdigital.studio/ .

I have already seperate my words with span but the animate works only if i select my whole h1 element, not my h1 > span. 
Any advice?

See the Pen ExpwBxV by pmakos (@pmakos) on CodePen

[mvaneijgen]

Hi @petrosmani welcome to the forum!

 

The best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in.

 

I've moved your tween to a timeline, because that way you can easily add new tweens and personally I find it a lot easier when working with ScrollTrigger to have the tweens separate from the ScrollTrigger logic. 

 

I've removed your forEach() loop and just feed in the titleSpans variable directly, then I've changed your delay to a stagger and feed in a some value. Now each letter takes 0.3 seconds after the previous one too animate. With a stagger you can do some really powerful things, take a look at the docs.

 

I've also changed your y: '100%' to yPercent: 100, when you want to work with percentages, this is much more performant.

 

Also just a heads up GSAP has a plugin for splitting text aptly named SplitText , this fixes a lot of inconsistencies between browsers and also fixes the spaces that are removed from your example. You can also easily split by characters, words or lines. Hope it helps and happy tweening! 

 

See the Pen gOjGNQZ?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[petrosmani]

Thank you very much! You were very informative