Artwork

เนื้อหาจัดทำโดย David East and Adam Argyle เนื้อหาพอดแคสต์ทั้งหมด รวมถึงตอน กราฟิก และคำอธิบายพอดแคสต์ได้รับการอัปโหลดและจัดหาให้โดยตรงจาก David East and Adam Argyle หรือพันธมิตรแพลตฟอร์มพอดแคสต์ของพวกเขา หากคุณเชื่อว่ามีบุคคลอื่นใช้งานที่มีลิขสิทธิ์ของคุณโดยไม่ได้รับอนุญาต คุณสามารถปฏิบัติตามขั้นตอนที่แสดงไว้ที่นี่ https://th.player.fm/legal
Player FM - แอป Podcast
ออฟไลน์ด้วยแอป Player FM !

The View Transition API is amazing... but we're bad at it

51:06
 
แบ่งปัน
 

Manage episode 379618498 series 3520094
เนื้อหาจัดทำโดย David East and Adam Argyle เนื้อหาพอดแคสต์ทั้งหมด รวมถึงตอน กราฟิก และคำอธิบายพอดแคสต์ได้รับการอัปโหลดและจัดหาให้โดยตรงจาก David East and Adam Argyle หรือพันธมิตรแพลตฟอร์มพอดแคสต์ของพวกเขา หากคุณเชื่อว่ามีบุคคลอื่นใช้งานที่มีลิขสิทธิ์ของคุณโดยไม่ได้รับอนุญาต คุณสามารถปฏิบัติตามขั้นตอนที่แสดงไว้ที่นี่ https://th.player.fm/legal

View Transitions are a brand new totally rad cutting edge feature in the browser. They allow you to specify animation states from one state to another a lot easier than ever before. But guess what? We’re still bad at them. In this episode Adam explains how awesome View Transitions are by explaining the difficulties of the FLIP animation technique. Adam then discusses how he struggled, but finally succeeded, to build a morphing button with View Transitions. Oh and we also discuss how Adam isn’t a TypeScript fan, but you’ll have to listen to the end for that part.

Links:

Morphing Button - https://youtu.be/N2BKAKwGP6M

View Transition Pseudos Visualized - https://codepen.io/bramus/full/xxQKvJP

View Transitions like isotope.js - https://codepen.io/argyleink/pen/VwBKjwj

Chapters:

0:00 We are bad at CSS

0:54 Why are we talking about View Transitions?

4:03 Adam sings MMMBop

4:24 What problem are View Transitions solving?

5:29 Adam’s Mickey Mouse impression

5:44 Using FLIP to explain what View Transitions solve

6:27 Adam’s amazing getBoundingClientRect() joke

6:45 Using FLIP to explain what View Transitions solve

9:00 Tweening was easier in Flash

10:45 View Transitions simplify the amount calculations needed to animate

12:54 David is plugged into the Matrix

13:40 MPA View Transitions require no work! (but need a flag)

14:20 We are going to see some of the most wild transitions

16:35 What is Adam bad at with View Transitions?

22:04 What is a functional pseudo selector and why is it so fun to say?

23:50 Adam continues to be bad at View Transitions

25:35 Adam gets to talk to browser engineers to tell him why he’s bad

26:33 A rare case where height 100% did something

29:10 Adam gets even worse at View Transitions

30:00 Understanding view transition image pair and view transition group

35:29 David is bad at Sesame Street

37:55 An amazing visual of View Transition Groups and Pairs

39:52 Can you use other properties than transform and opacity?

40:27 Adam’s leaves to go tend to his kids

42:00 We’re finally wrapping up

45:33 Fun fact: Adam is not a TypeScript fan

47:12 View Transitions like isotope.js

49:32 Stay humble or CSS will humble you

Video moments

23:10 - functional pseudo selector

30:00 Understanding view transition image pair and view transition group

34:00 Especially here

37:55 An amazing visual of View Transition Groups and Pairs

47:12 View Transitions like isotope.js

  continue reading

14 ตอน

Artwork
iconแบ่งปัน
 
Manage episode 379618498 series 3520094
เนื้อหาจัดทำโดย David East and Adam Argyle เนื้อหาพอดแคสต์ทั้งหมด รวมถึงตอน กราฟิก และคำอธิบายพอดแคสต์ได้รับการอัปโหลดและจัดหาให้โดยตรงจาก David East and Adam Argyle หรือพันธมิตรแพลตฟอร์มพอดแคสต์ของพวกเขา หากคุณเชื่อว่ามีบุคคลอื่นใช้งานที่มีลิขสิทธิ์ของคุณโดยไม่ได้รับอนุญาต คุณสามารถปฏิบัติตามขั้นตอนที่แสดงไว้ที่นี่ https://th.player.fm/legal

View Transitions are a brand new totally rad cutting edge feature in the browser. They allow you to specify animation states from one state to another a lot easier than ever before. But guess what? We’re still bad at them. In this episode Adam explains how awesome View Transitions are by explaining the difficulties of the FLIP animation technique. Adam then discusses how he struggled, but finally succeeded, to build a morphing button with View Transitions. Oh and we also discuss how Adam isn’t a TypeScript fan, but you’ll have to listen to the end for that part.

Links:

Morphing Button - https://youtu.be/N2BKAKwGP6M

View Transition Pseudos Visualized - https://codepen.io/bramus/full/xxQKvJP

View Transitions like isotope.js - https://codepen.io/argyleink/pen/VwBKjwj

Chapters:

0:00 We are bad at CSS

0:54 Why are we talking about View Transitions?

4:03 Adam sings MMMBop

4:24 What problem are View Transitions solving?

5:29 Adam’s Mickey Mouse impression

5:44 Using FLIP to explain what View Transitions solve

6:27 Adam’s amazing getBoundingClientRect() joke

6:45 Using FLIP to explain what View Transitions solve

9:00 Tweening was easier in Flash

10:45 View Transitions simplify the amount calculations needed to animate

12:54 David is plugged into the Matrix

13:40 MPA View Transitions require no work! (but need a flag)

14:20 We are going to see some of the most wild transitions

16:35 What is Adam bad at with View Transitions?

22:04 What is a functional pseudo selector and why is it so fun to say?

23:50 Adam continues to be bad at View Transitions

25:35 Adam gets to talk to browser engineers to tell him why he’s bad

26:33 A rare case where height 100% did something

29:10 Adam gets even worse at View Transitions

30:00 Understanding view transition image pair and view transition group

35:29 David is bad at Sesame Street

37:55 An amazing visual of View Transition Groups and Pairs

39:52 Can you use other properties than transform and opacity?

40:27 Adam’s leaves to go tend to his kids

42:00 We’re finally wrapping up

45:33 Fun fact: Adam is not a TypeScript fan

47:12 View Transitions like isotope.js

49:32 Stay humble or CSS will humble you

Video moments

23:10 - functional pseudo selector

30:00 Understanding view transition image pair and view transition group

34:00 Especially here

37:55 An amazing visual of View Transition Groups and Pairs

47:12 View Transitions like isotope.js

  continue reading

14 ตอน

모든 에피소드

×
 
Loading …

ขอต้อนรับสู่ Player FM!

Player FM กำลังหาเว็บ

 

คู่มืออ้างอิงด่วน

ฟังรายการนี้ในขณะที่คุณสำรวจ
เล่น