Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieBildung
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 7 Monaten

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 Aufrufe • vor 1 Jahr

🚨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 Aufrufe • vor 4 Monaten

🚨 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 Aufrufe • vor 1 Monat

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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 3 Monaten

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,498 Aufrufe • vor 4 Monaten

The line to get into EDC is insane
0:16

The line to get into EDC is insane

Las Vegas Locally 🌴

322,549 Aufrufe • vor 2 Jahren

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

164,987 Aufrufe • vor 21 Tagen