SVG Text Path Animation is SWEET! NO LIBRARIES!

No video

SVG Text Path Animation is SWEET! NO LIBRARIES!

Рет қаралды 36,362

Күн бұрын

Visit linode.com/desi... for a $20 credit on your new linode account.
-- In this tutorial, we're going to check out several different cool things to help spice up a landing page. We're going to create an SVG-based text animation that animates on scroll along a custom path, then we will use the IntersectionObserver API to animate various elements in and out of the viewport.
Check out for another approach to SVG text, which includes using SVG filters:
tympanus.net/c...
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

Пікірлер: 40

@DesignCourse 4 жыл бұрын

How's everyone doing with the pandemic so far? Have you been laid off? Is it business as usual? For me, it's pretty much business as usual. The kids are already homeschooled -- but my wife is an RN who works in a pediatric environment. But fortunately, she's not exposed to patients as she's on the phone doing triaging all day.

@alexlytle089 4 жыл бұрын

great! business as usual as I work remote. It must be hard for some folks right now

@DesignCourse 4 жыл бұрын

@@alexlytle089 It's going to get very hard for those who lost jobs. It's estimated to be in the millions in the US alone.

@alexlytle089 4 жыл бұрын

@@DesignCourseit's really hard. Thank you for providing such value to people's lives during these hard times. Being a developer is such a great to skill have during a disastrous time due to the flexible nature of this profession

@LabhamJain 4 жыл бұрын

Lots Of Love FROM India....

@ArtemCheberyak 4 жыл бұрын

WFH mode, but for the rest - business as usual

@ArtemCheberyak 4 жыл бұрын

So effing cool, I just imagine how complex one can get with these, so darn cool

@heavygustav 4 жыл бұрын

2:57 Yeah Tell that to girls these days.

@Jean-gp2ce 4 жыл бұрын

Awesome content, i'm still learning the basics but it's good to try these more advanced concepts already.

@jezreel4868 4 жыл бұрын

Awesome to learn something specially with this pandemic. A lot of time for learning. Been following u sir. Thank6 u inspired me to learn more.

@avneet12284 4 жыл бұрын

What an amazing video explained so well without hurrying it up which I found uncanny. Excellent - 2 bad I can't give it 10 likes.

@jmsyou1 3 жыл бұрын

Thanks for this tutorial this svgomg was very usfull too... 👍🏻

@janvincentpanes4545 4 жыл бұрын

Thank you for this amazing tutorial!

@jordandunton3029 4 жыл бұрын

I love watching all these fun tutorials especially being an aspiring Web Dev myself I'm not sure if college is necessary though. Do you have any thoughts on that? Please let me know :) Love your stuff, can't wait for more!

@AH-cf9cv 4 жыл бұрын

I like your guitar behind you.😊😊😊

@maasnicolas 4 жыл бұрын

It looks really cool but both examples you gave are really hard to read. I think it would be better (especially the example of codrops) to slow down the animation because it's bad UX in my opinion. But it's a great tutorial and I'll probably play with it to try and make it more UX friendly :) Just wanted to point that out.

@heavygustav 4 жыл бұрын

Shit Talker?

@maasnicolas 4 жыл бұрын

Dixon why? Read the full comment, I said its a good tutorial

@YaZha46 4 жыл бұрын

I see Doom Eternal on the top left icon :D

@sashatv138 4 жыл бұрын

Cool! Thanks!

@webmetaverso Жыл бұрын

Great

@jeromesnail 4 жыл бұрын

You should do more videos like this, animations without libraries FTW

@shahadm1710 3 жыл бұрын

Nice i really love it!

@R_Samnan 4 жыл бұрын

Awesome thing dude

@AnnaJCA 4 жыл бұрын

Will this work in all web browsers, or will it only be supported by some? Awesome tutorial, will definitely try it out myself. Thanks!

@LSTA24 4 жыл бұрын

Interesting and clear thanks Gary! How does this fare with browser compatibility and mobile? It looks like an alternative to using one of those scrollmagic-type libraries for the appearing titles