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

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

На главную

shared element transitions [text] deceptively simple but extremely hard to get right - font morphing is always a fun (frustrating) challenge. had to dive deep into UIKit to get this one smooth, especially with the changing font sizes and line breaks.

k_wagner's profile picture

Kristian Wagner

2,295 subscribers

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

Наука и технологииОбразование
LIVE

Anya Rossi• Live Now

Private livecam show

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

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

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

Get artistic with KineMaster's video templates! This black and white one is a great way to dive into video design!
0:11

Get artistic with KineMaster's video templates! This black and white one is a great way to dive into video design!

KineMaster

21,498 просмотров • 2 лет назад

I've said it before and I'll say it again... I love a spinny shot!! This one especially felt important to get right. Had a lot of fun working on this ❤️ #helluvaboss
0:12

I've said it before and I'll say it again... I love a spinny shot!! This one especially felt important to get right. Had a lot of fun working on this ❤️ #helluvaboss

Aven (they/them) 🦇🌙

436,285 просмотров • 1 год назад

Seems like a good opportunity to share a trick I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. 🎉
0:15

Seems like a good opportunity to share a trick I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. 🎉

Devon Govett

48,276 просмотров • 2 месяцев назад

dino immediately about to dive into someone's arms but finding no one close so he had to go all the way to mingyu to get his celebratory cuddle
0:10

dino immediately about to dive into someone's arms but finding no one close so he had to go all the way to mingyu to get his celebratory cuddle

🦑

51,475 просмотров • 1 год назад

been willing to make this kind of "perspective stack" component for a while it was a fun little challenge to orchestrate the transitions just right built with Motion
0:17

been willing to make this kind of "perspective stack" component for a while it was a fun little challenge to orchestrate the transitions just right built with Motion

Maxime

15,557 просмотров • 7 месяцев назад

Font morphing [orbit] Last month I spent a lot of time creating sphere projections. I wanted to take this further by extending UILabel and mapping each glyph, making it possible for letters to spin in space. Love this as a metaphor for the text 'thinking'.
0:10

Font morphing [orbit] Last month I spent a lot of time creating sphere projections. I wanted to take this further by extending UILabel and mapping each glyph, making it possible for letters to spin in space. Love this as a metaphor for the text 'thinking'.

Kristian Wagner

60,838 просмотров • 1 год назад

🚨THIS IS WILD🚨 #PATRIOTS WR STEFON DIGGS HAD TO WAIT OUTSIDE ON A LINE WITH NORMAL PEOPLE ATTEMPTING TO GET INTO THE CLUB AFTER LOSING THE SUPER BOWL. It has been an extremely rough week for Diggs with the SB loss and allegedly breaking up with Cardi B.
0:14

🚨THIS IS WILD🚨 #PATRIOTS WR STEFON DIGGS HAD TO WAIT OUTSIDE ON A LINE WITH NORMAL PEOPLE ATTEMPTING TO GET INTO THE CLUB AFTER LOSING THE SUPER BOWL. It has been an extremely rough week for Diggs with the SB loss and allegedly breaking up with Cardi B.

MLFootball

951,445 просмотров • 4 месяцев назад

🚨 This is one of those things I hope FSD improves with It’s okay to touch the yellow line; the hesitation it seems to portray here is understandable considering traffic laws, but it should just go around and get into the turning lane, especially if there’s no hazards around
0:12

🚨 This is one of those things I hope FSD improves with It’s okay to touch the yellow line; the hesitation it seems to portray here is understandable considering traffic laws, but it should just go around and get into the turning lane, especially if there’s no hazards around

TESLARATI

29,078 просмотров • 1 месяц назад

Welcome your viewers with a polaroid! 📸 ⟡ includes test mode ⟡ customize sizes, colors, font and sound ⟡ add your own image, description and schedule ⟡ for twitch and youtube Get it →
0:14

Welcome your viewers with a polaroid! 📸 ⟡ includes test mode ⟡ customize sizes, colors, font and sound ⟡ add your own image, description and schedule ⟡ for twitch and youtube Get it →

beni 🌷

17,496 просмотров • 7 месяцев назад

Save this for the next time your typography feels weird and you can’t explain why. Nine times out of ten, it’s line-height - the vertical space between lines of text that decides whether type feels confident or clumsy, readable or tiring. Headlines Compress them. ~1.05–1.25 is usually right. Headlines aren’t meant to be read carefully line by line. They’re meant to land as a shape. Tighter leading pulls words into a single visual block and makes the headline feel confident and intentional. One hard rule: ascenders and descenders should never touch. If your t’s and l’s are colliding with g’s and y’s, you’ve gone too far. Body text Do the opposite. Give it air. ~1.4–1.7, depending on the typeface, its x-height, and the line length. Body text is about endurance. Your reader shouldn’t notice the typography at all. If they’re aware of the type, something’s off. The goal is that they just keep going, paragraph after paragraph, without friction. In Framer, you can find the Line-height settings in the Text Panel > Line. And yes, this applies even if you’re using the same font for headlines and body text! Same font, same page, but they have completely different jobs - and different line height. Sometimes, choosing a good type isn’t enough - you need to know how much space to give letters so they can do their work.
0:18

Save this for the next time your typography feels weird and you can’t explain why. Nine times out of ten, it’s line-height - the vertical space between lines of text that decides whether type feels confident or clumsy, readable or tiring. Headlines Compress them. ~1.05–1.25 is usually right. Headlines aren’t meant to be read carefully line by line. They’re meant to land as a shape. Tighter leading pulls words into a single visual block and makes the headline feel confident and intentional. One hard rule: ascenders and descenders should never touch. If your t’s and l’s are colliding with g’s and y’s, you’ve gone too far. Body text Do the opposite. Give it air. ~1.4–1.7, depending on the typeface, its x-height, and the line length. Body text is about endurance. Your reader shouldn’t notice the typography at all. If they’re aware of the type, something’s off. The goal is that they just keep going, paragraph after paragraph, without friction. In Framer, you can find the Line-height settings in the Text Panel > Line. And yes, this applies even if you’re using the same font for headlines and body text! Same font, same page, but they have completely different jobs - and different line height. Sometimes, choosing a good type isn’t enough - you need to know how much space to give letters so they can do their work.

charlota

21,862 просмотров • 4 месяцев назад

The Tastiest Giveaway 🚨 The Bath Of #FRI Giveaway 🛀🍟 is now ON! Complete simple tasks and get up to 800 #FRI 💥 Dive into that pile of #FRI right now! 🪄👉
0:12

The Tastiest Giveaway 🚨 The Bath Of #FRI Giveaway 🛀🍟 is now ON! Complete simple tasks and get up to 800 #FRI 💥 Dive into that pile of #FRI right now! 🪄👉

Chainers

33,472 просмотров • 3 лет назад

This animation has so many frames that I had to split it up into two spritesheets! This stage is also always the most awkward one to show to playtesters; I always feel inclined to clarify that they shouldn't get the wrong idea, and that there is a reason for these visuals, lol
0:14

This animation has so many frames that I had to split it up into two spritesheets! This stage is also always the most awkward one to show to playtesters; I always feel inclined to clarify that they shouldn't get the wrong idea, and that there is a reason for these visuals, lol

Sini

2,280,389 просмотров • 6 месяцев назад

The purpose of #NFL Replay Assist is to get calls right-especially calls that can impact a game The old "they always catch the second guy" is tired & lazy Trent Wiliams was ejected?! Initiator gets fined but make this reviewable & get the call right NFL
0:11

The purpose of #NFL Replay Assist is to get calls right-especially calls that can impact a game The old "they always catch the second guy" is tired & lazy Trent Wiliams was ejected?! Initiator gets fined but make this reviewable & get the call right NFL

Scott Pioli

358,821 просмотров • 1 год назад

This is exactly it. If there's a lesson to take from the Seahawks, it's get yourself an elite DT duo and versatile DL but it'll be extremely hard to replicate what the Seahawks do.
0:16

This is exactly it. If there's a lesson to take from the Seahawks, it's get yourself an elite DT duo and versatile DL but it'll be extremely hard to replicate what the Seahawks do.

Ted Nguyen

145,080 просмотров • 4 месяцев назад

Over in London, England working on a project. Figured I'd pop over to the Canadian bar for pucks in deep. Looks like hundreds had the same idea. Line-up to get in is two city blocks long to get into the Maple Leaf.
0:10

Over in London, England working on a project. Figured I'd pop over to the Canadian bar for pucks in deep. Looks like hundreds had the same idea. Line-up to get in is two city blocks long to get into the Maple Leaf.

Arash Madani

359,509 просмотров • 4 месяцев назад

The line to get into EDC is insane
0:16

The line to get into EDC is insane

Las Vegas Locally 🌴

322,549 просмотров • 2 лет назад

when animating variable font weights remember to include tighter optical sizing to maintain the width of the text
0:12

when animating variable font weights remember to include tighter optical sizing to maintain the width of the text

؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜؜lochie

165,555 просмотров • 25 дней назад