Animating individual letters on hover

[Dante Arceneaux]

Hello, 

 

I am trying to achieve the effect of only animating individual letters on hover.   I got the idea from this website: https://jacekjeznach.com/. 

 

I can achieve it by wrapping span tags around each letter, then giving the span tags their own classes but I thought there must be an easier way.  

I discovered blast.js which lets me split the letters of each word and assigns them a class (.blast).   The only thing is, on hover all the span tags are effected at the same time.  

I want only the letter to be effected on a hover.  Has anyone done this before or have any ideas?  

[mikel]

Hey @Dante Arceneaux,

 

Try GSAP SplitTextPlugin.

And then a loop or foreach for each letter ...

 

Happy splitting  and looping ...

Mikel

 

 

[mikel]

 

... and an example

 

See the Pen zYPEaPm?editors=1010 by mikeK (@mikeK) on CodePen

 

Nobody is perfect ...

Mikel

[Dante Arceneaux]

Thank you so much!  Took me so many hours trying to figure out how to do this.  Unfortunately I am eating ramen  noodles and mustard and can't afford the premium membership.  I'll purchase it if I ever find a job.  

[mikel]

Hey @Dante Arceneaux,

 

Good luck ...