Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

the trick to this css card glow/shine effect is blurring a duplicated layer that moves around 👨‍🍳 the og post mentions feGaussianBlur but you can use css filter blur too (there's a toggle 👇) filter: blur(28px) saturate(5) brightness(1.3) jus' need to test what plays best!

103,744 Aufrufe • vor 5 Monaten •via X (Twitter)

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

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

While I have premium I definitely want to do a long post breaking down the main scene from this show that I obsess with. There's so much that I feel could be learned from it. Not just for expansion animators either. There's honestly a LOT that can be learned from how this show directed its expansion scenes that can be applied to even safe for work animations. Obviously yes, the expansion alone is really good. What makes it so good though is just the fact that there's things you pick up on that you likely don't even realize until you re-watch. I'm using this scene as an example as it's not AS good I would say, but it still has a lot going for it. One thing I've always loved from it that I want to use in my own animations someday is that the expansion sort of comes in waves as opposed to one consistent growth. In a way, it makes it feel more natural while also selling how tight the top is getting. It could have been accompanied by showing the knot getting tighter or smaller with each growth. It's a small part of the animation but just that one thing already adds another layer to appreciate. It's not like most expansion scenes where there's very little outside of just "growing" on its own. There's a bunch of little things that subtly improve it without being obnoxious. The first expansion scene has WAY more that I want to talk about honestly. Far more than this one has. It will probably be a really long post now that I think about it...

FancyPlanks 🐀

16,420 Aufrufe • vor 8 Monaten