How to make the text appear letter by letter?
Hi everyone, I came across this website https://www.au-charme-rabelaisien.com/ and I liked how the logo appears progressively in a handwritten style for the splash screen. Do you know how to achieve this effect? Thank you!
Hôtel Au Charme Rabelaisien ** | Site Officiel
Au Charme Rabelaisien vous acceuille dans son hotel 4 étoiles à deux pas du Château d'Amboise. Espace détente & SPA. Meilleurs tarifs garantis.
16 Replies
I don't have access to my dev tools so I'm just guessing but maybe it's some svg animation. can you just check if the logo is an svg?
check the logo for this website. https://svgartista.net/
SVG Artista - SVG Drawing Animation Generator
SVG Artista is a free tool that helps you easily create amazing SVG drawing animations by animating stroke and fill properties of your SVG graphics.
seems like they're doing the same thing with their logos so I am fairly certain with my previous assessment.
I don't think it's using an svg...
looking at the dev tools, it's an SVG
Can you tell me please where did you see that @ghostmonkey ? When I open my dev tools, it's already too late to inspect this particular element...thanks
look for the loading-banner div class
and then change the translate from -100% to 0% and you can freeze it on screen
Do you know how to create your own logo in svg ?without calculating all the letters' paths.
use something like inkscape or another piece of software that supports svgs
Typed.js is what you want.
I think there is a javascript library for everything now 😭😂
I was thinking to use the svg and add some css animations to make it scroll over the screen in a handwritten manner. What is typed.js @majkl ?
it's just for the typewriter effect as far as I can tell, not for handwriting
Framer motion can animate the path length of an svg. I suspect it's something like that https://m.youtube.com/watch?v=ILxNdOtKbNQ
Net Ninja
YouTube
Framer Motion (for React) #15 - Animating SVG's
Hey gang, in this framer motion tutorial we'll see how to animate an svg logo.
🐱👤🐱👤 JOIN THE GANG -
https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join
----------------------------------------
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript
+ Vue JS & Firebase - http://www.then...
It can be done without framer, too. With CSS you can target the path and animate - https://css-tricks.com/svg-line-animation-works/
Chris Coyier
CSS-Tricks
How SVG Line Animation Works | CSS-Tricks
I bet all of you have seen that little trick where an SVG path is animated to look like it's drawing itself. It's super cool. Jake Archibald pioneered the