Pure CSS content animation IS HERE 😱🎉💯
Safari TP 136 came out yesterday and brought some amazing updates. Lots of big wins for CSS… one in particular I'm super excited about and I think you will be too.
Discrete animation of the `content` property. I'll explain…
🧵 (1/8)
Safari TP 136 came out yesterday and brought some amazing updates. Lots of big wins for CSS… one in particular I'm super excited about and I think you will be too.
Discrete animation of the `content` property. I'll explain…
🧵 (1/8)
So this has technically been around a while. I released a @CodePen example of this years back, but browser support was limited to Chrome. Firefox followed suit, & now the Safari folks at Apple have added it to TP ✨
Safari TP 136 notes 📒
webkit.org/blog/12137/rel…
🧵 (2/8)
Safari TP 136 notes 📒
webkit.org/blog/12137/rel…
🧵 (2/8)
Here is my original tweet and CodePen example:
Safari TP 136 release notes here:
webkit.org/blog/12137/rel…
HUGE shout out to @jensimmons for pushing this through for me and @oantoinehv for implementing it!
BUT WAIT… there's more 👀
🧵 (3/8)
https://twitter.com/branmcconnell/status/1123382348907798528
Safari TP 136 release notes here:
webkit.org/blog/12137/rel…
HUGE shout out to @jensimmons for pushing this through for me and @oantoinehv for implementing it!
BUT WAIT… there's more 👀
🧵 (3/8)
Not only is animated text on the verge of being possible across all modern browsers, but it's also ACCESSIBLE, which is HUGE 🦻🏼
This is thanks to the addition of alt text for the content property. More on that here: stefanjudis.com/today-i-learne…
🧵 (4/8)
This is thanks to the addition of alt text for the content property. More on that here: stefanjudis.com/today-i-learne…
🧵 (4/8)
HUGE shout out to @jensimmons for pushing this through and @oantoinehv for implementing it! This has been at the top of my wish list for quite some time, so it truly means a lot to me that it's inches from being universally supported.
This opens so many doors. 🚪☀️
🧵 (5/8)
This opens so many doors. 🚪☀️
🧵 (5/8)
The trifecta of modern browsers—Safari, Chrome, & Firefox—now support accessible, animated text.
Of course, you can…
(a) figure out all the percentages manually,
(b) generate them dynamically, or
(c) … 👇🏼👇🏼👇🏼 👀 🔥
🧵 (6/8)
Of course, you can…
(a) figure out all the percentages manually,
(b) generate them dynamically, or
(c) … 👇🏼👇🏼👇🏼 👀 🔥
🧵 (6/8)
What if… you could generate dynamic animated text in one line of SCSS?
Introducing Typed.css #WIP
Multi-line support, directional pausing, per-string styles, config options, and much more…
Repo: github.com/brandonmcconne…
Demo: typedcss.com
🧵 (7/8)
Introducing Typed.css #WIP
Multi-line support, directional pausing, per-string styles, config options, and much more…
Repo: github.com/brandonmcconne…
Demo: typedcss.com
🧵 (7/8)
Lots more coming soon! Follow me on Twitter and GitHub for project updates and front-end tips and magic like this 🪄
Can't wait to see what y'all come up with!
Interested in working on this project with me? Dm me to join in the fun 👋🏼
github.com/brandonmcconne…
🧵 (8/8)
Can't wait to see what y'all come up with!
Interested in working on this project with me? Dm me to join in the fun 👋🏼
github.com/brandonmcconne…
🧵 (8/8)
• • •
Missing some Tweet in this thread? You can try to
force a refresh
