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

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

На главную

Here it is with DevTools open 👀 Can slow down those cross-document View Transitions and see the network requests coming in 🤙 Could totally spend time tweaking different parts of the transition, timing, etc. ✨

33,944 просмотров • 2 лет назад •via X (Twitter)

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

Фото профиля @shikkhar_
@shikkhar_2 лет назад

I would love to see a video tutorial on this bro…. It works amazing

Фото профиля trebleszn
trebleszn2 лет назад

How do you fetch the individual subscription data for each service for the customer

Фото профиля Ayan Patel
Ayan Patel2 лет назад

Massss 💥

Фото профиля Makisuo
Makisuo2 лет назад

Crazy how good browsers are getting

Фото профиля Satyajit
Satyajit2 лет назад

how are you making that chart? i am stuck with svg implmentation

Фото профиля Brayan 👾
Brayan 👾2 лет назад

i’m more curious on how you use the dev tools for css animations like this

Фото профиля Palatium • Portfolio designer
Palatium • Portfolio designer2 лет назад

The icon animation is ✨

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

CSS Trick 🍏 You can create that Apple-style blowout text effect with CSS scroll animations and fixed positioning ⚡️ .word { animation: blowout; animation-timeline: --section; } @​keyframes blowout { 0%, 95% { background: transparent; } to { transform: translateZ(99vh); background: #000; } } The trick here is to fix the position of some things in your layout and then animate them based on their non-fixed containers ⭐️ The .word is position: fixed within a that has a height of 200vh section { view-timeline: --section; } section:first-of-type { height: 200vh; } Every section has a view-timeline: --section that creates a scoped ViewTimeline for each section's children 🤙 As that first section scrolls out of view, you increase its opacity and move it on the z-axis towards you. That gives it the impression of scaling up 🆙 .word { animation: blowout, fade-in; animation-timing-function: ease-in; animation-fill-mode: both; animation-timeline: --section; animation-range: exit-crossing 10% exit 0%; } You can use the exit-crossing range combined with the exit range to get a timing you like ✨ Definitely experiment with these ranges to see how they play. The timing function creates interesting effects too! At the same time as the text scales up, you need to fade in the video and the text that goes with it. Again, you can use the parent container's ViewTimeline --section p, video { animation: fade-in, fade-out; animation-timing-function: ease-in; animation-fill-mode: both; animation-timeline: --section; } p { animation-range: entry 10% entry 35%, exit 0% exit 25%; } video { animation-range: entry 0% entry 25%, exit 10% exit 35%; } The timings are slightly different here. Again, you can play with them to get something that feels right for you! @​keyframes fade-in { to { opacity: 1; }} @​keyframes fade-out { to { opacity: 0; }} Theoretically, you should be able to do something with animation-direction: reverse/alternate like yesterday's demo video { animation: fade 2 both linear alternate-reverse; } The trick with this effect is all about timing and creating containers that are bigger than the content and using them to drive the animations 🏎️ The scroll-driven signature is a bonus! ✍️ Perhaps a follow-up on that one 🤙 As always, any questions, requests, etc. Hit me up! With this demo, the GreenSock ScrollTrigger code is included where the CSS scroll-driven animations API is not supported 🙌 That means you could use this demo today! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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