Loading video...

Video Failed to Load

Go Home

TIL multiple CSS transform functions of the same type are additive. I used it to add a turbulence effect that doesn't overwrite existing or in-progress transforms.

delba_oliveira's profile picture

Delba

80,180 subscribers

67,895 views • 1 year ago •via X (Twitter)

Science & TechnologyEducation
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

“The greater part of progress is the desire to progress.” ... And dreams come true when desire transforms into substantial action. Congratulations if you have the dream set in mind, it's now time to attempt and transform it into a concrete action! #Putinthework #streetwalker
0:13

“The greater part of progress is the desire to progress.” ... And dreams come true when desire transforms into substantial action. Congratulations if you have the dream set in mind, it's now time to attempt and transform it into a concrete action! #Putinthework #streetwalker

Twesigye Jackson Kaguri

64,065 views • 2 years ago

💡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,769 views • 8 months ago

The power of @ property Without it → CSS treats --progress as text → no animation With it → CSS knows it's percentage → smooth animation
0:13

The power of @ property Without it → CSS treats --progress as text → no animation With it → CSS knows it's percentage → smooth animation

Victor

20,744 views • 1 month ago

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 views • 1 month ago

“If you left I would be heartbroken. You add a lot to everything that goes on here. It might not be in the numbers or the leading man videos but you are an integral part to Barstool in my mind. That’s how I feel” -Big Cat “Same” -Dave Portnoy
0:18

“If you left I would be heartbroken. You add a lot to everything that goes on here. It might not be in the numbers or the leading man videos but you are an integral part to Barstool in my mind. That’s how I feel” -Big Cat “Same” -Dave Portnoy

Viva La Stool

989,446 views • 6 months ago

A Beverage that your gut will thank you for. BONE BROTH is simple to prepare. 1. Roast the Bones [ I have used Goat Trotters & Rear Leg Marrow Bones] 2. Add Apple Cider Vinegar or Vinegar. 3. Add Spices & Aromatics of your choice. 4. Add Water. 5. Pressure Cook or Slow Cook.
0:18

A Beverage that your gut will thank you for. BONE BROTH is simple to prepare. 1. Roast the Bones [ I have used Goat Trotters & Rear Leg Marrow Bones] 2. Add Apple Cider Vinegar or Vinegar. 3. Add Spices & Aromatics of your choice. 4. Add Water. 5. Pressure Cook or Slow Cook.

Anand Nagu

15,774 views • 7 months ago

cube w/ 3d css transform + a bit of motion for the eased drag
0:13

cube w/ 3d css transform + a bit of motion for the eased drag

daniel petho

36,771 views • 1 year ago

I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to Lea Verou, PhD for bringing it to CSS. The CodePen link is coming soon.
0:17

I and Jason are currently working on implementing the CSS `polygon() round` keyword in Chrome. This is one of my favorite CSS features! Thanks to Lea Verou, PhD for bringing it to CSS. The CodePen link is coming soon.

一丝

27,849 views • 2 months ago

Btw you can always add the top/bottom fadeout effect with a scrollable list just don't hardcore it Plus it does't need any Js just raw css and it works like charm
0:13

Btw you can always add the top/bottom fadeout effect with a scrollable list just don't hardcore it Plus it does't need any Js just raw css and it works like charm

Guri

183,752 views • 8 months ago

I did some old school front-end CSS transform practice this morning. Inspired by the good old WonderWall. No WebGL/WebGPU is used.
0:13

I did some old school front-end CSS transform practice this morning. Inspired by the good old WonderWall. No WebGL/WebGPU is used.

ᴇᴅᴀɴ ᴋᴡᴀɴ

11,748 views • 1 year ago

This video makes me nervous every time I watch it!!!..........The wake turbulence of the A380 would ruin your day in a heartbeat Turbulence can feel it
0:14

This video makes me nervous every time I watch it!!!..........The wake turbulence of the A380 would ruin your day in a heartbeat Turbulence can feel it

durvesh

1,881,386 views • 24 days ago

Crimson Desert has this surface shader.. It has a transformative effect on the game visuals and it's seemingly applied to every object in the game. It doesn't look like tessellation, it appears to have artifacts from a screen-space effect. I believe they are using the height maps from every PBR material in the game to create some sort of screen space displacement mapping.
0:12

Crimson Desert has this surface shader.. It has a transformative effect on the game visuals and it's seemingly applied to every object in the game. It doesn't look like tessellation, it appears to have artifacts from a screen-space effect. I believe they are using the height maps from every PBR material in the game to create some sort of screen space displacement mapping.

FR3NKD

202,856 views • 2 months ago

Hugo Gonzalez on the Celtics: “What can I say? This is the [winningest] franchise in the whole NBA. It’s a privilege to be part of a franchise like this. It’s more or less like where I used to be in Real Madrid, they are the most winningest club in Europe, too. So having that type of transition and similarities and everything is something that is going to be easier.”
0:19

Hugo Gonzalez on the Celtics: “What can I say? This is the [winningest] franchise in the whole NBA. It’s a privilege to be part of a franchise like this. It’s more or less like where I used to be in Real Madrid, they are the most winningest club in Europe, too. So having that type of transition and similarities and everything is something that is going to be easier.”

Justin Turpin

60,435 views • 1 year ago

Spent the whole day today to add the waterline effect (blurry black border at intersection of water plane with camera). The effect is subtle but it adds a lot of realism, IMO. Saw it in a few games and wanted to add this feature since years ago. #gamedev \( ﾟヮﾟ)/
0:16

Spent the whole day today to add the waterline effect (blurry black border at intersection of water plane with camera). The effect is subtle but it adds a lot of realism, IMO. Saw it in a few games and wanted to add this feature since years ago. #gamedev \( ﾟヮﾟ)/

Shoujo City Dev

33,598 views • 4 months ago

Polygon Decompose/Recompose VFX Since UE doesn't allow you to use Geometry Shader by default, I use Niagara to reproduce the same kind of effect ;)
0:13

Polygon Decompose/Recompose VFX Since UE doesn't allow you to use Geometry Shader by default, I use Niagara to reproduce the same kind of effect ;)

HeyYo

38,724 views • 11 months ago

That bit in Heaven Sent where they completely forget to add in the teleportation effect…
0:17

That bit in Heaven Sent where they completely forget to add in the teleportation effect…

PigginPetrolBreak

57,527 views • 1 year ago

I used ChatGPT to create the Matrix in 49 lines of HTML/CSS/JS. Hard to believe this took just 5 mins.
0:14

I used ChatGPT to create the Matrix in 49 lines of HTML/CSS/JS. Hard to believe this took just 5 mins.

Chris Stanchak

60,125 views • 2 years ago

after a few levels the system got either so pwned or so glitched that it kept repeating the same question, and since I had a successful output for that one already in the convo I just kept hitting the "check for harms" button til the end and it worked lol 🙃🤷‍♂️
0:19

after a few levels the system got either so pwned or so glitched that it kept repeating the same question, and since I had a successful output for that one already in the convo I just kept hitting the "check for harms" button til the end and it worked lol 🙃🤷‍♂️

Pliny the Liberator 🐉󠅫󠄼󠄿󠅆󠄵󠄐󠅀󠄼󠄹󠄾󠅉󠅭

65,785 views • 1 year ago