Text Animation for Non-Coder

Solved
SMCPVD
New Member
2 0 0

Hi everyone! Let me start by saying, I don't know code, although I have somehow been figuring a few things out as I go. That said, I really want to add animation to my site. Right now I have Brooklyn but I'm not opposed to switching to another theme if that would be beneficial. My first thought was adding text animation on the main page slideshow. I'd like the text to either mimic my handwriting or the type I've chosen. Haven't been able to easily figure this out on my own. Please let me know whether you have any tutorials in mind that a beginner like me could learn from or whether there's a simple way of doing this. I have followed instructions from another Shopify discussion for a separate coding issue and was able to troubleshoot enough to work it out and get my desired result, so I can understand some of it, just not enough. Thanks in advance!!!

 

Eventually, I'd love to add in scroll-driven animation...but that's for another day.

0 Likes
Ninthony
Shopify Partner
1637 224 615

This is an accepted solution.

There's not really any animation that can mimic handwriting that you can do directly through code. You can animate SVG files however with CSS, but it will probably be a little difficult if you're new to css or graphics programs in general. Here's a resource on that:

https://css-tricks.com/svg-line-animation-works/

There are many CSS properties that you can easily animate though. You'll want to look into the transition property and the animation property, learn the difference between them and how to implement them:

https://www.w3schools.com/css/css3_transitions.asp

https://www.w3schools.com/css/css3_animations.asp

 

When you understand those, scroll based transitions arent such a big todo but to require knowledge of Javascript. I highly recommend going through w3schools "How to" section that has quite a few useful examples of HTML, CSS, and JS implementations:

https://www.w3schools.com/howto/default.asp

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
SMCPVD
New Member
2 0 0

Thank you so much @Ninthony ! I will definitely start working through this. Appreciate your guidance!

0 Likes
Ninthony
Shopify Partner
1637 224 615

Not a problem, feel free to reach out if you have any questions about anything.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes