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

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

На главную

I’m creating a playground of CSS easing functions 🌟 Each animation will include an SVG preview, along with a ready-to-copy Tailwind CSS class. Launching next week 🔥

pacovitiello's profile picture

Pasquale Vitiello

10,828 subscribers

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

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

Anya Rossi• Live Now

Private livecam show

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

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

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

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

My SVG icons won't be boring anymore 🤯 → Microanimations → Ready-to-copy components → CSS and Tailwind supported So simple, so impressive 🔥 #buildinpublic
0:15

My SVG icons won't be boring anymore 🤯 → Microanimations → Ready-to-copy components → CSS and Tailwind supported So simple, so impressive 🔥 #buildinpublic

Bart ⚡

132,998 просмотров • 1 год назад

its out! +50 Tailwind CSS buttons ready for use: free, no js, easy to integrate with a simple copy-paste This will be my evolving collection, I will add new styles and micro-interactions soon. Feel free to star the GitHub repo for updates
0:13

its out! +50 Tailwind CSS buttons ready for use: free, no js, easy to integrate with a simple copy-paste This will be my evolving collection, I will add new styles and micro-interactions soon. Feel free to star the GitHub repo for updates

Ibelick

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

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!
0:16

💡CSS Tip! Create a tooltip that follows an anchor with modern CSS! No JavaScript is used to control the position of the tooltip or its tail. It's 100% CSS magic!

CSS by T. Afif

57,924 просмотров • 9 месяцев назад

Pretty excited about this one :) Just a plain html file, css file, and a handful of lines of hand-rolled JS code. No build process. No frameworks. No libraries. Launching next week! 🚀
0:19

Pretty excited about this one :) Just a plain html file, css file, and a handful of lines of hand-rolled JS code. No build process. No frameworks. No libraries. Launching next week! 🚀

Drew Wilson

25,117 просмотров • 1 год назад

Interactive SVG Animations launches in full on December 27th! This course is a super deep dive into all things SVGs, from its syntax to its animation primitives—and more! No previous animation experience required, just a bit of HTML and CSS.
0:13

Interactive SVG Animations launches in full on December 27th! This course is a super deep dive into all things SVGs, from its syntax to its animation primitives—and more! No previous animation experience required, just a bit of HTML and CSS.

nanda

63,774 просмотров • 1 год назад

hear me out you don’t need js to create a marquee animation just a couple of lines of css and duplicated children with `aria-hidden`
0:11

hear me out you don’t need js to create a marquee animation just a couple of lines of css and duplicated children with `aria-hidden`

dmytro

159,814 просмотров • 1 год назад

finally got around to updating my site to Next.js 15 + Tailwind CSS v4. finally added a dark mode which was quite nice with oklch() + v4 theme vars. i made it greenish to complement my warm light mode. also used View Transition API + svg filter for this theme reveal effect.
0:10

finally got around to updating my site to Next.js 15 + Tailwind CSS v4. finally added a dark mode which was quite nice with oklch() + v4 theme vars. i made it greenish to complement my warm light mode. also used View Transition API + svg filter for this theme reveal effect.

Stammy

72,402 просмотров • 1 год назад

DialKit now has css easing curve support for transitions, a number of other minor improves. And thanks to Kit Langton now works with SolidJS in addition to React. Over 25,000 weekly installs already! npm install dialkit
0:16

DialKit now has css easing curve support for transitions, a number of other minor improves. And thanks to Kit Langton now works with SolidJS in addition to React. Over 25,000 weekly installs already! npm install dialkit

joshpuckett

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

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h
0:17

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

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

I've worked with Kylan O'Connor to put together a little dedicated Replicate model that gives you: - all the face images - a sprite/grid of all the faces - vanilla HTML, JS and CSS to render the effect - a preview video
0:13

I've worked with Kylan O'Connor to put together a little dedicated Replicate model that gives you: - all the face images - a sprite/grid of all the faces - vanilla HTML, JS and CSS to render the effect - a preview video

fofr

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

Preview of the Finals theme, arriving next week. OKC punched its ticket, and Chet will get a PWR update to go with it.
0:11

Preview of the Finals theme, arriving next week. OKC punched its ticket, and Chet will get a PWR update to go with it.

NBA 2K Mobile

58,975 просмотров • 1 год назад

🌊 Get ready to catch some waves with this new hat! Make a splash and a difference 💙 ✨ 50% of each purchase will be donated to support real-world ocean cleanup efforts. ✨ Purchases made on the Sky Web Store will include an extra 10% donation!
0:16

🌊 Get ready to catch some waves with this new hat! Make a splash and a difference 💙 ✨ 50% of each purchase will be donated to support real-world ocean cleanup efforts. ✨ Purchases made on the Sky Web Store will include an extra 10% donation!

Sky: Children of the Light

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

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️
0:19

This one CSS property will fix your z-index headache. In CSS, a child element with z-index will overlap with any fixed or floating elements outside its container. Instead of stacking higher and higher values to fix it. Use this instead: .card-container { isolation: isolate; } With that, any elements with z-index inside the container will be contained. If you found this useful, follow for more. ❤️

Ali

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

The PEPE EXPLORERS team keeps creating fun and unique accessories, each more exciting than the last🚀 👉 We’re taking things to the next level with a collection of 10,000 NFTs at just $2. Launching in a few weeks — we’re taking the time to make everything perfect. More announcements coming soon 👀 With 5 to 15 accessories per Pepe, millions of combinations are possible. Get ready for a one-of-a-kind space exploration vibe and an immersive astronaut universe 🐸🌌
0:10

The PEPE EXPLORERS team keeps creating fun and unique accessories, each more exciting than the last🚀 👉 We’re taking things to the next level with a collection of 10,000 NFTs at just $2. Launching in a few weeks — we’re taking the time to make everything perfect. More announcements coming soon 👀 With 5 to 15 accessories per Pepe, millions of combinations are possible. Get ready for a one-of-a-kind space exploration vibe and an immersive astronaut universe 🐸🌌

Trystan

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

I’m posting something new every night this week. What’s cumming tonight!? A few j/o videos and a preview of my release next Friday with the sexy Jordan Seb
0:10

Sensitive content

I’m posting something new every night this week. What’s cumming tonight!? A few j/o videos and a preview of my release next Friday with the sexy Jordan Seb

Coach Jeeves X

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

Claude Sonnet 3.7 Coding Test Prompt: Create a single HTML file containing CSS and JavaScript to generate an animated weather card. The card should visually represent the following weather conditions with distinct animations: Wind: (e.g., moving clouds, swaying trees, or wind lines) Rain: (e.g., falling raindrops, puddles forming) Sun: (e.g., shining rays, bright background) Snow: (e.g., falling snowflakes, snow accumulating) Show all the weather card side by side The card should have a dark background. Provide all the HTML, CSS, and JavaScript code within this single file. The JavaScript should include a way to switch between the different weather conditions (e.g., a function or a set of buttons) to demonstrate the animations for each.
0:19

Claude Sonnet 3.7 Coding Test Prompt: Create a single HTML file containing CSS and JavaScript to generate an animated weather card. The card should visually represent the following weather conditions with distinct animations: Wind: (e.g., moving clouds, swaying trees, or wind lines) Rain: (e.g., falling raindrops, puddles forming) Sun: (e.g., shining rays, bright background) Snow: (e.g., falling snowflakes, snow accumulating) Show all the weather card side by side The card should have a dark background. Provide all the HTML, CSS, and JavaScript code within this single file. The JavaScript should include a way to switch between the different weather conditions (e.g., a function or a set of buttons) to demonstrate the animations for each.

Delusionals

866,048 просмотров • 1 год назад