Building a 3D Card Flip Animation with CSS Houdini

In this article, we will explore the features of Houdini by creating a 3D card flip animation. This will help you understand the core concepts of Houdini and guide you through implementing practical code. By using CSS Houdini, you can enhance your development workflow and create cutting-edge CSS animations, giving you more control over the animation process. Traditional CSS animations have limitations, but Houdini, with its collection of experimental browser APIs, breaks these limitations and allows developers to create custom visual experiences that were previously unimaginable, pushing the boundaries of web design.

Table of Contents
Key Concepts Covered in this Article

Here’s a breakdown of the key concepts covered in this article:

How to Work with Houdini’s Major Triad
CSS Houdini is a collection of browser APIs that empower developers to extend and enhance the capabilities of the browser’s rendering engine. With Houdini, developers can create custom animations, effects, and styles, pushing the boundaries of web design. In the upcoming sections, we’ll delve into a detailed explanation of the three primary APIs, unlocking their potential and understanding how they can elevate your web design and development capabilities.

Note: to enable Houdini on your browser, enter chrome://flags/ in the address bar, then search for experiments and activate it.

Worklets
Houdini worklets are JavaScript modules that operate within the browser’s rendering engine, allowing developers to define custom paint, layout, and animation behaviors, thereby extending the capabilities of CSS. With worklets, you can do the following:

Create dynamic animations.
Imagine animating the stroke width of a path based on user interaction or dynamically controlling the speed of an animation based on scroll position. These are some of the possibilities that can be achieved with Houdini worklets.

Craft interactive effects.
Create custom effects like particle systems, ripple animations, or even interactive text manipulation, all powered by worklet logic.

Extend visual styles.
Generate custom gradients, patterns, or even textures based on complex algorithms, all within the worklet environment.

Bridge the gap with JavaScript.
Integrate your existing JavaScript libraries and functionalities seamlessly into your CSS styles using worklet communication channels.

Getting Started with Worklets
As mentioned, worklets enable developers to create more complex and customizable effects in real-life applications. To illustrate further, let’s build a starry night effect using Houdini worklets:

<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”styles.css”>
<title>Starry Night Sky</title>
</head>
<body>
<section id=”night-sky”>
</section>
<script>
CSS.paintWorklet.addModule(‘./app.js’);
</script>
</body>
</html>

In the code snippet above, we prepare a dedicated section in the HTML, ready to accommodate the worklet effect when it’s implemented:

The line CSS.paintWorklet.addModule(‘./app.js’) tells the browser to grab the JavaScript code defining our paint worklet.

body {
margin: 0;
background-color: #000;
}

#night-sky {
width: 100vw;
height: 100vh;
background-image: paint(starrySky);
}

In the CSS code above, background-image: paint(starrySky) tells the #night-sky element to use our registered paint worklet named starrySky to generate the background instead of an image.

The JavaScript code below directly employs a standard loop and canvas drawing techniques to generate a varied starry sky effect with customizable colors, sizes, and random star positions:

class Star {
paint(ctx, geom, properties) {
const numStars = 100;
const starColors = properties.get(‘–star-colors’) || [‘white’, ‘grey’, ‘darkorange’];
const sizeRange = properties.get(‘–star-size-range’) || ‘2,3’;

for (let i = 0; i < numStars; i++) { const randomColor = starColors[Math.floor(Math.random() * starColors.length)]; const minSize = parseFloat(sizeRange.split(',')[0]); const maxSize = parseFloat(sizeRange.split(',')[1]); const starSize = Math.random() * (maxSize - minSize) + minSize; const x = Math.random() * geom.width; const y = Math.random() * geom.height; ctx.fillStyle = randomColor; ctx.beginPath(); ctx.arc(x, y, starSize, 0, 2 * Math.PI); ctx.fill(); ctx.closePath(); } } } registerPaint('starrySky', Star); Here are some things to note in the code above: - class Star: This defines our paint worklet, a blueprint for drawing a single star. - paint(ctx, geom, properties): This is the core of the worklet. ctx provides drawing tools, geom gives information about the element's size, and properties accesses our custom CSS properties for star colors and size. - Loop and randomness: We draw multiple stars in a loop, choosing their position and color randomly for a natural starry effect. - registerPaint('starrySky', Star): This registers our Star class as a paint worklet named starrySky, making it accessible from CSS. CSS Houdini Custom Properties Custom properties in CSS Houdini are advanced variables that offer enhanced control in web development. They go beyond traditional CSS variables, providing features like type checking, syntax definition, and custom logic for dynamic styling. A circular progress bar with custom rendering Let's dive into a practical example that showcases the power of paint worklets in creating visually captivating progress bars. This example focuses on a simple circular progress bar. The simple HTML structure below establishes the foundation for our progress bar. A

element with the class progress serves as the canvas, while the data-progress attribute dynamically stores the current progress value:

<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Moving Circular Progress Bar</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”progress” data-progress=”0″></div>
<script src=”app.js”></script>
</body>

The CSS snippet below utilizes Houdini’s custom properties to create a circular progress bar. The @property rule introduces –progress with a syntax, initialized at 0% and ensuring non-inheritance. The .progress class styles the circular container, utilizing a conic gradient to depict progress dynamically. This concise code harnesses the flexibility of Houdini custom properties for creating visually engaging circular progress elements in web development:

@property –progress {
syntax: ‘<percentage>’;
inherits: false;
initial-value: 0%;
}

.progress {
–progress: 0%;
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(rgb(255, 58, 255) 0%, rgb(255, 58, 255) var(–progress), transparent var(–progress), transparent 100%);
position: relative;
overflow: hidden;
}

.progress::before {
content: attr(data-progress);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
font-weight: bolder;
color: purple;
text-align: center;
}

Next, we have the custom property definition (@property rule):

@property –progress {
syntax: ‘<percentage>’;
inherits: false;
initial-value: 0%;
}

Some things to note in the code above:

– The @property rule is part of the Houdini CSS Typed

Source link