Загрузка видео...

Не удалось загрузить видео

На главную

Interactive SVG Animations is now live! Everything I know about SVGs, distilled into five modules covering everything from syntax, advanced SVG features, peformance characteristics and more! You can preview the first lesson right here (desktop-only atm!)

177,334 просмотров • 1 год назад •via X (Twitter)

Комментарии: 11

Фото профиля nanda
nanda1 год назад

The course is built on a bespoke learning platform that has visuals and interactivity at its core. Each lesson comes with various visuals that change with the text and animations that respond to your input:

Фото профиля nanda
nanda1 год назад

Each lesson also comes with interactive sandboxes that let you apply the topic we just covered in code. In one exercise, we animate a chart from (h/t to @tcosta_co and @brotzky_ here):

Фото профиля nanda
nanda1 год назад

You can get the course for $119 today and get full access to all the modules right away! The price will jump to $199 USD come the new year.

Фото профиля Anima
Anima1 год назад

📢It is live! @figma design to @MUI_hq or @AntDesignUI "Whether your design is well organized or a bit chaotic, using standard components or none, Anima takes it all and translates it into high-quality #MUI or #AntDesign code."-->

Фото профиля T. Costa
T. Costa1 год назад

Unreal! Congrats on the launch 🖤

Фото профиля nusu
nusu1 год назад

Amazing stuff, insta-buy!

Фото профиля Brotzky
Brotzky1 год назад

Amazing <3

Фото профиля James Clements
James Clements1 год назад

🥂

Фото профиля Gustav Ekerot
Gustav Ekerot1 год назад

great stuff! can't wait to dig into the animation part

Фото профиля Jimmy Lee
Jimmy Lee1 год назад

Excellent stuff!!

Фото профиля Andrew Schmelyun
Andrew Schmelyun1 год назад

Working with svgs has always been like black magic, this is going to be an instant buy

Похожие видео

007/100 Buttons. This button was way more complex than I first thought. I love the page transition on the Truus site that Dennis Snellenberg and Jordan Gilroy worked on. So I wanted to use that drawing SVG Path idea somehow and fit it into a button. In best case with a mask effect. The idea was to have an SVG path in the background that fills the button. At the same time, this path should also be used as a mask to reveal the differently colored text. The SVG should also be replaceable and work with other SVGs. For the path animation, I can use the DrawSVGPlugin from GSAP. Sounds like a solid plan. I built the button so far, and it worked great in Chrome and Firefox. In Safari, nope. I used an SVG mask that I referenced through CSS. But Safari can’t handle that properly when the path inside the mask is animated, so the animation lags. There was no simple solution for that. At least I didn’t find something. So I had to rebuild the button in another way. What I found was that the SVG mask animation works in Safari when the mask is placed on the desired element inside the SVG. That’s where foreignObject comes in, it allows you to use normal HTML elements inside an SVG. Using that, I rebuilt the hover text inside the SVG. I then referenced the mask on the foreignObject with a bit of JavaScript. And it worked! The button’s structure looks more complicated than I wanted it to be, but that happens quite often when you need to make something work across different browsers 😃 Crafting 100 Buttons with Osmo ⏳ Total time: 96h

Eduard Bodak

67,348 просмотров • 3 месяцев назад