DEV Community

Cover image for 8 Creative Text Animations for Your Website's Hero Area ๐Ÿ˜๐ŸŽ‰
Madza
Madza Subscriber

Posted on โ€ข Originally published at madza.hashnode.dev

175 36 1 1 1

8 Creative Text Animations for Your Website's Hero Area ๐Ÿ˜๐ŸŽ‰

Modern web development is about grabbing the visitors' attention. There are several ways of making your website more eye-catching and engaging. One of the most appealing methods is adding animated hero text to your landing page.

In this article I have compiled some of the most creative effects I've seen, to inspire you for your own projects in the future.

For each animation, I will provide a direct link, an interactive preview so you can get an initial impression on the fly as well as the author links, so you can explore more of their work, too.

1. Hover slider (dark/light)

By: Ivan Grozdic

2. Fluid text hover

By: Robin Delaporte

3. CSS Perspective Text Hover

By: James Bosworth

4. Apple TV - Word Rotation

By: Steven Lei

5. Spotlight Cursor Text

By: Caroline Artz

6. SVG Text Mask w/ Video Fill

By: Dudley Storey

7. SVG Text Animation w/ Stroke Offset

By: Mack Ayache

8. Shattering Text Animation

By: Arsen Zbidniakov


Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on Twitter, LinkedIn and GitHub!
Visit my Blog for more articles like this.

Sentry image

See why 4M developers consider Sentry, โ€œnot bad.โ€

Fixing code doesnโ€™t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (42)

Collapse
 
sehgalspandan profile image
Spandan Sehgal โ€ข

I just wanted to know if there is any way to get custom domain like .com , .in, etc for free .

Collapse
 
madza profile image
Madza โ€ข

I created a discussion about this a while ago ๐Ÿ˜‰
If you are interested, you can check here ๐Ÿ˜‰

Collapse
 
sehgalspandan profile image
Spandan Sehgal โ€ข โ€ข Edited

Thanks for responding.
I read your post and visited both sites I wanted a name techwithspandy with any domain but when I checked for availability the all of the domains aren't available..
Kindly help me thru it.
Thanks

Thread Thread
 
sehgalspandan profile image
Spandan Sehgal โ€ข

Also I read that .tk .cf domains are not good for seo.
So any way to get good domain like .com, .tech, .xyz, etc for free with seo.

Thread Thread
 
madza profile image
Madza โ€ข

Instead of searching just for a second level name, try including the top level name as well (.tk, .ml, .ga, .cf or .gq). So, instead of "techwithspandy" search for "techwithspandy.tk", etc.

Thread Thread
 
sehgalspandan profile image
Spandan Sehgal โ€ข

ok , will check it
Thanks

Thread Thread
 
Sloan, the sloth mascot
Comment deleted
 
madza profile image
Madza โ€ข โ€ข Edited

You can get some really cheap ones (other than .tk, .ml, .ga, .cf or .gq), just pick a registrar and check their prices. I would suggest namecheap.com, but here is discussion with more alternatives ๐Ÿ˜‰

Thread Thread
 
sehgalspandan profile image
Spandan Sehgal โ€ข

See my main problem is that i am 14 yrs old and i cant spend money on this thing so i need some alternative for this.
namecheap.com also requires money.
Kindly guide me thru this .

Thread Thread
 
sehgalspandan profile image
Spandan Sehgal โ€ข

And also if it is possible thru freenom.com
then kindly make a post on full procedure of it from getting the domain to adding it in vercel .
Thanks
You are awesome :)

Thread Thread
 
marissab profile image
Marissa B โ€ข

Hey dude, just a heads up: it's not really appropriate to derail someone's post with begging them to hold your hand through an unrelated process and asking for their private contact info. Go look at the discussion they've linked and do some research on your own.

Thread Thread
 
sehgalspandan profile image
Spandan Sehgal โ€ข

Ohk I am sorry for that and also thankz Mazda for the post I have figured out how to use it. I have now domain for free for a year.
Check it out :- techwithspandy.tk

Thread Thread
 
madza profile image
Madza โ€ข

Glad you got it figured out, pleasure to help ๐Ÿ’ฏ๐Ÿ‘

Collapse
 
guscarpim profile image
Gustavo Scarpim โ€ข

Nice job!

Collapse
 
madza profile image
Madza โ€ข

Thank you so much, Gustavo ๐Ÿ’ฏ๐Ÿ‘โœจ

Collapse
 
kachidk profile image
Nwanguma Victor โ€ข

Madza shoots ... and he scores. Seriously your posts are simple and aesthetic. Nice one

Collapse
 
madza profile image
Madza โ€ข

Thank you so much, Victor! โœจ๐Ÿ’ฏ๐Ÿ‘

Collapse
 
lukasw12v profile image
lukas โ€ข

gsap is just pure love

Collapse
 
madza profile image
Madza โ€ข

Awesome to hear you liked it ๐Ÿ‘๐Ÿ’ฏโœจ

Collapse
 
yurimutti profile image
Yuri Mutti โ€ข

Amazing effects

Collapse
 
madza profile image
Madza โ€ข

Thank you so much ๐Ÿ‘๐Ÿ˜‰

Collapse
 
miracleio profile image
Miracleio โ€ข

Awesome list here @madza
Thanks for sharing โค

Collapse
 
madza profile image
Madza โ€ข

My pleasure! ๐Ÿ‘๐Ÿ’ฏ

Collapse
 
nxmxgoldxx profile image
Calentรฉ Cardwell โ€ข

Very cool, thanks for sharing these great ideas!

Collapse
 
madza profile image
Madza โ€ข

My pleasure ๐Ÿ‘๐Ÿ’ฏ๐ŸŽ‰

Collapse
 
xarop_pa_toss profile image
Ricardo Giro โ€ข

Wow mate, just wow. This whole thing seems like magic to me. The designs the animations, the creativity. This is too cool :D

Collapse
 
madza profile image
Madza โ€ข

Thanks for checking them out ๐Ÿ˜‰๐Ÿ‘

Collapse
 
jesseyeboah8 profile image
Jesse Yeboah โ€ข

This is craaaaazy๐Ÿคฏ

Collapse
 
madza profile image
Madza โ€ข

Hopefully it helped ๐Ÿ‘โœจ๐Ÿ’ฏ

Collapse
 
ryannerd profile image
Ryan Jentzsch โ€ข

I really like the SVG Text Mask w/ Video Fill. Nice job. Thanks for sharing!

Collapse
 
madza profile image
Madza โ€ข

Awesome to hear โœจ๐Ÿ‘

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay