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

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

На главную

I used my holiday break to develop my new portfolio; depending on your browser it's 95% powered by the newest css techniques like scroll driven animations and view transitions! 💪 If you see the 🦖, it's (at least partly) powered by GSAP backup animations 😅

cydstumpel's profile picture

Cyd Stumpel

2,663 subscribers

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

LIVE

Anya Rossi• Live Now

Private livecam show

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

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

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

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

Probably old news now, but the CSS View Transition API is SUPER cool! Entry/exit layout animations like this used to be super complicated or require giant libraries. Now it's like 2 lines of JS, and a few lines of CSS if you want to customize the animation. Amazing! 🤯
0:29

Probably old news now, but the CSS View Transition API is SUPER cool! Entry/exit layout animations like this used to be super complicated or require giant libraries. Now it's like 2 lines of JS, and a few lines of CSS if you want to customize the animation. Amazing! 🤯

Devon Govett

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

I built a browser entirely powered by Nano Banana 🍌 It generates each website based only on the URL. You can even navigate to other links. A truly new kind of internet, generated on the fly, and it's super fun.
1:04

I built a browser entirely powered by Nano Banana 🍌 It generates each website based only on the URL. You can even navigate to other links. A truly new kind of internet, generated on the fly, and it's super fun.

Pietro Schirano

309,414 просмотров • 1 год назад

Want to see what’s new in ‘25? Join us for a deep dive on evolutionary features like Ambush Hitting, G.O.A.T. Difficulty, and player animations, powered by ShowTech™ Pre-order at Available March 18
2:51

Want to see what’s new in ‘25? Join us for a deep dive on evolutionary features like Ambush Hitting, G.O.A.T. Difficulty, and player animations, powered by ShowTech™ Pre-order at Available March 18

MLB The Show

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

Technology!! I'm not physically there with my guys,but I can see them, hear them, feel the vibe, and still communicate like I never left. Distance reduced to pixels. Presence powered by signal..... it's beautiful.😂😭
0:40

Technology!! I'm not physically there with my guys,but I can see them, hear them, feel the vibe, and still communicate like I never left. Distance reduced to pixels. Presence powered by signal..... it's beautiful.😂😭

epiphanyfarmltd 🦚🐐( Renegade Farmer)

12,729 просмотров • 1 год назад

Elon Musk: By the end of the day, my brain feels like a browser with 100 tabs open. “I've got so much going on in my mind when I try to go to sleep. It's like having a computer browser with 100 tabs open. By the end of the day, I got 100 tabs open, so I gotta close this browser. That's my brain. So then I'll listen to an audiobook and put it on a timer for 15 minutes. It's like being read a bedtime story by your phone. Podcasts and audiobooks are great at bedtime.” Tesla All-Hands, March 20, 2025
0:27

Elon Musk: By the end of the day, my brain feels like a browser with 100 tabs open. “I've got so much going on in my mind when I try to go to sleep. It's like having a computer browser with 100 tabs open. By the end of the day, I got 100 tabs open, so I gotta close this browser. That's my brain. So then I'll listen to an audiobook and put it on a timer for 15 minutes. It's like being read a bedtime story by your phone. Podcasts and audiobooks are great at bedtime.” Tesla All-Hands, March 20, 2025

ELON CLIPS

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

CSS Trick 🤙 You can use scroll-driven animations on the inline axis to create list animations like in these cards 🫶 article { animation: vibe; animation-timeline: view(inline); animation-range: cover 40% cover 60%; } @​keyframes vibe { 50% { scale: 1; filter: grayscale(0); }} Here you use a view() timeline with the inline axis set inside the function. This means you can hook into the horizontal scroll position of an element inside its scroller 🙌 In this demo, you set a default smaller scale and make each card grayscale 🤏 article { scale: 0.8; filter: grayscale(1); } Then the animation happens as each card enters from the right at 0% and leaves to the left at 100% 🎞️ 50% is the halfway point and in your keyframes you make each card grow and saturate at that point before returning to its original state ✨ scroll-snap provides a nice look-and-feel here and on mobile 🫰 It's really as straightforward as that but made so much easier with a few lines of CSS 💙 For the parallax effect, you can animate a background-position on the card or the object-position on an img depending on what you go with 🤙 Lastly, you can use this today with progressive enhancement by wrapping your scroll-driven animation code in @​supports and @​media ⚡️ Users without support still get a decent experience! CodePen.IO link below! 👇
0:45

CSS Trick 🤙 You can use scroll-driven animations on the inline axis to create list animations like in these cards 🫶 article { animation: vibe; animation-timeline: view(inline); animation-range: cover 40% cover 60%; } @​keyframes vibe { 50% { scale: 1; filter: grayscale(0); }} Here you use a view() timeline with the inline axis set inside the function. This means you can hook into the horizontal scroll position of an element inside its scroller 🙌 In this demo, you set a default smaller scale and make each card grayscale 🤏 article { scale: 0.8; filter: grayscale(1); } Then the animation happens as each card enters from the right at 0% and leaves to the left at 100% 🎞️ 50% is the halfway point and in your keyframes you make each card grow and saturate at that point before returning to its original state ✨ scroll-snap provides a nice look-and-feel here and on mobile 🫰 It's really as straightforward as that but made so much easier with a few lines of CSS 💙 For the parallax effect, you can animate a background-position on the card or the object-position on an img depending on what you go with 🤙 Lastly, you can use this today with progressive enhancement by wrapping your scroll-driven animation code in @​supports and @​media ⚡️ Users without support still get a decent experience! CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

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

I found an AI browser that is actually awesome FlowithOS is a web browser COMPLETELY powered by AI You give it tasks, the agents work for you in the background It's like an army of AI agents working for you 24/7 Here's a guide on how it works and how you can get started today
12:09

I found an AI browser that is actually awesome FlowithOS is a web browser COMPLETELY powered by AI You give it tasks, the agents work for you in the background It's like an army of AI agents working for you 24/7 Here's a guide on how it works and how you can get started today

Alex Finn

25,490 просмотров • 8 месяцев назад

CSS Trick 📜 You can trigger text highlights on scroll with scroll-driven animations 😎 mark { animation: highlight; animation-timeline: view(); } @​keyframes highlight { to { --lit: 1; }} mark span { background-position: calc(var(--lit) * -110%) 0; transition: background 1s; } The trick is using a scroll-driven animation to flip a custom property on a element 🎚️ You flip the value between 0 and 1, and that transitions the background position of the element mark { --lit: 0; animation: highlight steps(1) both; animation-timeline: view(); animation-range: entry 100% cover 10%; } The background has to be applied on a child of the mark to see the change in the custom property 👀 mark span { background: linear-gradient( 120deg, yellow 50%, transparent 50%) 110% 0 / 220% 100% no-repeat; background-position: calc(var(--lit) * 110%) 0; transition: background-position 1s; } The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙 And the property flips fills in the color 🫶 That's it! If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎 Cool example of using CSS as an IntersectionObserver! CodePen.IO link below 👇
0:36

CSS Trick 📜 You can trigger text highlights on scroll with scroll-driven animations 😎 mark { animation: highlight; animation-timeline: view(); } @​keyframes highlight { to { --lit: 1; }} mark span { background-position: calc(var(--lit) * -110%) 0; transition: background 1s; } The trick is using a scroll-driven animation to flip a custom property on a element 🎚️ You flip the value between 0 and 1, and that transitions the background position of the element mark { --lit: 0; animation: highlight steps(1) both; animation-timeline: view(); animation-range: entry 100% cover 10%; } The background has to be applied on a child of the mark to see the change in the custom property 👀 mark span { background: linear-gradient( 120deg, yellow 50%, transparent 50%) 110% 0 / 220% 100% no-repeat; background-position: calc(var(--lit) * 110%) 0; transition: background-position 1s; } The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙 And the property flips fills in the color 🫶 That's it! If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎 Cool example of using CSS as an IntersectionObserver! CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

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

Currently working on a new interaction for my swimsuit. It's in the early stages for now, I need to polish up the animations and include different breast sizes.
0:24

Currently working on a new interaction for my swimsuit. It's in the early stages for now, I need to polish up the animations and include different breast sizes.

Qro💙

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

Possible good news!! It "seems" like Borderlands 4 respawn time has been reduced by about 3 seconds on the newest build of the game. It's hard to say if animations were purposefully sped up or if the newer build is just loading the game slightly better.
0:23

Possible good news!! It "seems" like Borderlands 4 respawn time has been reduced by about 3 seconds on the newest build of the game. It's hard to say if animations were purposefully sped up or if the newer build is just loading the game slightly better.

JoltzDude139

118,020 просмотров • 1 год назад

Hey Guys! It's me Kombo and you're about to meet a whole new side of me!! As *The PlaySeer,* I will be bringing a whole new world of Football to your screens powered by TECNO AI! Breaking down tactics, probabilities, and outcomes with Ella! This is football foresight, powered by ELLA! #PowerAfconMomentNaija #TECNOAFCON2025 #TECNOAI #EllaMatchDecoder #EllaStarCam
0:48

Hey Guys! It's me Kombo and you're about to meet a whole new side of me!! As *The PlaySeer,* I will be bringing a whole new world of Football to your screens powered by TECNO AI! Breaking down tactics, probabilities, and outcomes with Ella! This is football foresight, powered by ELLA! #PowerAfconMomentNaija #TECNOAFCON2025 #TECNOAI #EllaMatchDecoder #EllaStarCam

KOMBO™

26,095 просмотров • 8 месяцев назад

Today, Tari Universe unlocks a new superpower! 💪 Bridge $XTM to Ethereum (and more soon) powered by @layerzero_core OFT 🤯 $wXTM Contract on Ethereum: 0xfD36fA88bb3feA8D1264fc89d70723b6a2B56958 See you in the Tari Universe👇
0:45

Today, Tari Universe unlocks a new superpower! 💪 Bridge $XTM to Ethereum (and more soon) powered by @layerzero_core OFT 🤯 $wXTM Contract on Ethereum: 0xfD36fA88bb3feA8D1264fc89d70723b6a2B56958 See you in the Tari Universe👇

Tari

74,753 просмотров • 1 год назад

Hey Brett Cooper ... if you're gonna quote me at least acknowledge my name like you did your other sources. It's Verbal Riot by the way... or just Dante. I'm cool with either one.
0:49

Hey Brett Cooper ... if you're gonna quote me at least acknowledge my name like you did your other sources. It's Verbal Riot by the way... or just Dante. I'm cool with either one.

Verbal Riot

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

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.
0:32

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.

Robin

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

Recently, I tried to explain the concept of “subspace simulation” during a convo, and realized that my words sound like a salad To redeem myself, I’ve directed an interactive article about that! It will introduce you to the topic and help you train a real subspace solver right in your browser, powered by WebGPU Hope you enjoy
0:43

Recently, I tried to explain the concept of “subspace simulation” during a convo, and realized that my words sound like a salad To redeem myself, I’ve directed an interactive article about that! It will introduce you to the topic and help you train a real subspace solver right in your browser, powered by WebGPU Hope you enjoy

Lucky Iyinbor

12,232 просмотров • 27 дней назад

From LA to London. New York to Glasgow. 🌎 Every meetup is powered by the people who show up, connect, and make Twitch feel like home — IRL. 💜 See you at the next one. RSVP at
0:30

From LA to London. New York to Glasgow. 🌎 Every meetup is powered by the people who show up, connect, and make Twitch feel like home — IRL. 💜 See you at the next one. RSVP at

Twitch

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

If you're a crypto holder, I invite you to take 10 minutes to watch this video. This crypto crash has nothing to do with the 4-year cycle, at least not in my view. Back in January I shared a chart and a thesis for exactly the move we're seeing right now. It's an alternative perspective to the 4-year cycle theory, backed by data, and I think it's worth your consideration.
14:38

If you're a crypto holder, I invite you to take 10 minutes to watch this video. This crypto crash has nothing to do with the 4-year cycle, at least not in my view. Back in January I shared a chart and a thesis for exactly the move we're seeing right now. It's an alternative perspective to the 4-year cycle theory, backed by data, and I think it's worth your consideration.

Dan Gambardello

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