Text Animation Mask

[PaoloDoma]

Hi, i'm trying to replicate the animations of the texts of this site: https://designcanada.com/

 

For example, how can i replicate the animation of "Stuart Ash" or "Canada's heritage of graphic design" ?

 

It's seem that there is a mask over all. 

 

is there a particular function in GSAP? Now i only use a motion like this 

 

TitoloSezione1Tl.from($TitoloSezione1, 0.5, {x:100, delay:1, opacity:0, ease:Power1.easeOut});

 

Thank you all

Paolo

 

[mikel]

Hi @PaoloDoma

 

Are you looking for such an effect?

 

See the Pen XBJRrr by mikeK (@mikeK) on CodePen

 

And just for fun:

 

See the Pen OwPmEa by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

[PaoloDoma]

is perfect! what was missing me was the wrapper with hoverflow hidden

 

 

Thank's

Paolo