Building a 3D Card Flip Animation with CSS Houdini — SitePoint

html lang="en">
head>
meta charset="UTF-8">
meta title="viewport" content material materials="width=device-width, initial-scale=1.0">
title>Shifting Spherical Progress Bartitle>
hyperlink rel="stylesheet" href="sorts.css">
head>
physique>
div class="progress" data-progress="0">div>

script src="app.js">script>
physique>

The CSS snippet beneath employs Houdini’s custom-made properties to craft a spherical progress bar. The @property rule introduces --progress with a syntax, initialized at 0%, ensuring non-inheritance. Subsequently, the .progress class sorts the spherical container, utilizing a conic gradient to depict progress dynamically. This concise code harnesses the pliability of Houdini custom-made properties for creating visually collaborating spherical progress elements in web enchancment:

@property --progress {
 syntax: '';
 inherits: false;
 initial-value: 0%;
}

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

.progress::sooner than {
 content material materials: attr(data-progress);
 place: absolute;
 prime: 50%;
 left: 50%;
 rework: translate(-50%, -50%);
 font-size: 24px;
 font-weight: bolder;
 coloration: purple;
 text-align: coronary heart;
}

Subsequent, we have got the custom-made property definition (@property rule):

@property --progress {
 syntax: '';
 inherits: false;
 initial-value: 0%;
}

Some points to note inside the code above:

• The @property rule is part of the Houdini CSS Typed OM specification.
• It defines a custom-made CSS property named --progress with the syntax of .
• inherits: false; specifies that the custom-made property doesn’t inherit its value from its dad or mum elements.
• initial-value: 0%; models the preliminary value of the custom-made property to 0%.

Subsequent, let’s sort the spherical progress bar:

.progress {
 --progress: 0%;
 width: 200px;
 peak: 200px;
 border-radius: 50%;
 background: conic-gradient(#ccc 0%, #ccc var(--progress), clear var(--progress), clear 100%);
 place: relative;
 overflow: hidden;
}

Some points to note above:

• --progress: 0%; initializes the custom-made property to 0%.
• The .progress class sorts the spherical progress bar.
• width and peak set the scale of the spherical container.
• border-radius: 50%; creates an excellent circle.
• background makes use of a conic gradient to create the spherical progress impression, with the progress determined by the --progress property.
• place: relative; and overflow: hidden; are used for positioning and overflow administration.

Subsequent, we’ll create our paint worklet.

Our spherical progress bar springs to life by the use of the dynamic partnership of CSS Houdini and JavaScript. Leveraging CSS Houdini, we define a custom-made property, --progresswhereas the paint worklet takes price of custom-made painting. This synergy permits real-time updates to our progress bar based mostly totally on the evolving value of the custom-made property. This collaboration not solely enhances flexibility however as well as provides a potent avenue for creating distinctive rendering outcomes, resulting in a gorgeous and visually charming spherical progress bar for our web utility:

class PaintWorklet {
 paint(ctx, { width, peak, progress }) {
 ctx.clearRect(0, 0, width, peak);
 ctx.beginPath();
 ctx.arc(width / 2, peak / 2, width / 2, 0, (Math.PI * 2 * progress) / 100);
 ctx.fillStyle = '#42f445';
 ctx.fill();
 }
}

Listed under are some components to not inside the code above:

• class PaintWorklet is a JavaScript class representing a paint worklet, part of the Houdini Paint API.
• The paint method defines the custom-made painting logic for the spherical progress bar.
• ctx is the 2D rendering context, and it’s used to draw the spherical progress.

Subsequent, we register the paint worklet and customised property:

CSS.paintWorklet.addModule('paint-worklet.js');
const progressElements = doc.querySelectorAll('.progress');
progressElements.forEach(ingredient => {
 const paintWorklet = new PaintWorklet();
 CSS.registerProperty({
 title: '--progress',
 syntax: '',
 inherits: false,
 initialValue: '0%',
 paint: (ctx, geometry, properties) => {
 paintWorklet.paint(ctx, {
 width: geometry.width,
 peak: geometry.peak,
 progress: parseFloat(properties.get('--progress').toString()),
 });
 },
 });
});

Some components to note inside the code above:

• CSS.paintWorklet.addModule('paint-worklet.js'); lots the paint worklet module.
• CSS.registerProperty registers the custom-made property --progress and associates it with the paint worklet.
• The paint method generally known as to supply the custom-made painting logic based mostly totally on the current value of --progress.

Now let’s set the progress over time:

let currentProgress = 0;
function updateProgress() {
 currentProgress += 0.1; 
 if (currentProgress > 100) {
 currentProgress = 0;
 }
 progressElements.forEach(ingredient => {
 ingredient.dataset.progress = currentProgress.toFixed(2);
 ingredient.sort.setProperty('--progress', `${currentProgress.toFixed(2)}%`);
 });

 requestAnimationFrame(updateProgress);
}

updateProgress();

Some components to note inside the code above:

• currentProgress is incremented over time to simulate the progress.
• ingredient.dataset.progress and ingredient.sort.setProperty exchange the DOM and customised property to reflect the progress.
• requestAnimationFrame ensures simple animation by requesting the next physique.

Introducing the Paint API

The Paint API is integral to CSS Houdini, and it revolutionizes web painting by enabling dynamic and customised seen sorts. It empowers builders to create on-the-fly designs using user-defined custom-made properties. Uncover its secrets and techniques and methods to unleash unparalleled potential.

Simplified foundations

Listed under are some Paint API choices:

• Paint worklet. A JavaScript function that acts as your ingenious genie, conjuring up visuals primarily based in your instructions.
• Personalized properties. Variables you define using CSS’s var() syntax, holding values that could be dynamically referenced and manipulated.
• The paint() function. The magic wand that calls upon your paint worklet to weave its seen enchantment onto elements.

Painting with code: a wise occasion

For instance “painting with code” in movement, let’s dive proper into a wise occasion that showcases the power of the CSS Paint API.

This code snippet beneath demonstrates how builders can create dynamic and customizable patterns that break free from the constraints of static photographs, respiration life into web experiences:

html lang="en">
head>
meta charset="UTF-8">
meta title="viewport" content material materials="width=device-width, initial-scale=1.0">
hyperlink rel="stylesheet" href="sorts.css">
title>Paint API Demotitle>
head>
physique>
half id="show display screen">
half>

script>
CSS.paintWorklet.addModule('./app.js');
script>
physique>
html>

Linking the paint worklet

CSS.paintWorklet.addModule('./app.js') registers the custom-made paint worklet outlined in app.jsenabling its use in CSS.

The CSS snippet provided beneath exemplifies the utilization of the Paint API in CSS Houdini. The background-image: paint(awesomePattern) property integrates the awesomePattern paint worklet, exemplifying the power and ease of dynamically producing visuals:

physique {
  margin: 0px;
  padding: 0px;
}

#show display screen {
  box-sizing: border-box;
  margin: 10px;
  padding: 0px;
  width: calc(100vw - 20px);
  peak: calc(100vh - 20px);
  background-color: #111;
  background-image: paint(awesomePattern);
}

Making use of the paint worklet

background-image: paint(awesomePattern) applies the registered paint worklet as a background image to the #show display screen ingredient, showcasing CSS Houdini’s functionality to create dynamic visuals.

CSS properties can administration the pattern’s look:

• --numShapes: number of circles
• --shapeSize: measurement of circles
• --colors: coloration palette

Throughout the JavaScript code beneath, the Type class takes coronary heart stage. Its paint method, fueled by user-defined properties like --numShapes, --shapeSize and --colorsorchestrates the creation of a canvas adorned with randomized shapes. The registration of the awesomePattern paint worklet solidifies the mix of CSS and JavaScript, delivering a seamless synergy of dynamic seen elements:

class Type {
paint(ctx, geom, properties) {
  
  const numShapes = properties.get('--numShapes') || 30;
  const shapeSize = properties.get('--shapeSize') || 50;
  const colors = properties.get('--colors') || ['#F28500', '#00FFFF', 'limegreen'];
  
  const getRandomColor = () => colors[Math.floor(Math.random() * colors.length)];
  for (let i = 0; i  numShapes; i++) {
    const x = Math.random() * geom.width;
    const y = Math.random() * geom.peak;
    const radius = Math.random() * shapeSize;
    const coloration = getRandomColor();
    ctx.fillStyle = coloration;
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.closePath();
    }
  }
}

registerPaint('awesomePattern', Type);

Defining the paint worklet

• class Type { ... } defines a class with a paint() method, the core of the Paint API.
• properties.get() retrieves customization selections from CSS, demonstrating Houdini’s integration with CSS properties.
• The paint() method makes use of canvas-like drawing directions to create the dynamic circle pattern, highlighting Houdini’s functionality to extend CSS with custom-made rendering capabilities.
• registerPaint('awesomePattern', Type) registers the Type class as a paint worklet, making it obtainable for use in CSS.

Crafting Interactive 3D Animations with CSS Houdini

That’s our technique of establishing a captivating 3D card flip animation using CSS Houdini, worklets, Paint API, and customised Houdini properties. CSS Houdini permits for the creation of custom-made paint worklets, enabling a further versatile and dynamic technique to styling. The animation is triggered by a hover event, showcasing the power of Houdini in seamlessly combining every the seen and interactive factors of web enchancment.

Throughout the code beneath, you’ll uncover the whole code, with concise explanations of the CSS Houdini elements:

html lang="en">
head>
meta charset="UTF-8">
meta title="viewport" content material materials="width=device-width, initial-scale=1.0">
hyperlink rel="stylesheet" href="sorts.css">
script kind="module" src="app.js" defer>script>
head>
physique>
div class="card" id="flip-card">
div class="card-inner" id="flip-card-inner">
div class="card-front">

Entrance Content material materials

div>
div class="card-back">

Once more Content material materials

div>
div>
div>
physique>
html>

The CSS code beneath establishes the foundational development for a card ingredient in a web-based enterprise. The format services contained in the viewport using Flexbox properties, and the cardboard itself is printed with specific dimensions and a three-dimensional perspective.

Notably, the Houdini attribute, paint: card-flip;applies a custom-made paint worklet to the .card-inner ingredient, introducing a dynamic flip impression on hover. The transition is managed by the rework property, simply animating a 180-degree rotation. Styling particulars embody vibrant background colors, font properties, and border-radius for a refined look on every front and back faces. The code achieves a visually fascinating and interactive card design:

physique {
  present: flex;
  align-items: coronary heart;
  justify-content: coronary heart;
  peak: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.card {
  width: 200px;
  peak: 300px;
  perspective: 1000px;
}

.card-inner {
  --card-rotation: 0deg;
  paint: card-flip;
  paint-order: common;
  width: 100%;
  peak: 100%;
  transform-style: preserve-3d;
  transition: rework 0.6s;
  rework: rotateY(var(--card-rotation));
}

.card:hover .card-inner {
  --card-rotation: 180deg;
}

.card-front,
.card-back {
  width: 100%;
  peak: 100%;
  place: absolute;
  backface-visibility: hidden;
  present: flex;
  align-items: coronary heart;
  justify-content: coronary heart;
  font-size: 20px;
  coloration: white;
  border-radius: 10px;
}

.card-front {
  background-color: #3498db;
}

.card-back {
  background-color: #e74c3c;
  rework: rotateY(180deg);
}

Throughout the JavaScript code beneath — from app.js — the script checks if the browser helps the paintWorklet attribute, and if that is the case, it supplies a paint worklet module named paintWorklet.js. Furthermore, an event listener is related to the ingredient with the ID flip-cardtoggling the flipped class on a click on from time to time:

if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('paintWorklet.js')
  .catch(error => console.error('Did not register paint worklet:', error));
}

doc.getElementById('flip-card').addEventListener('click on on', function () {
  this.classList.toggle('flipped');
});

The paintWorklet.js file extends the JavaScript efficiency by registering a custom-made paint worklet named card-flip with CSS. This worklet, seamlessly built-in with the prevailing code, dynamically paints the flipping animation of the cardboard ingredient using canvas operations.

The --card-rotation property controls the rotation angle. Together with the interactive click on from time to time listener, this modular technique enhances the final seen attraction of the web enterprise.

paintWorklet.js

class CardFlipPainter {
  static get inputProperties() {
    return ['--card-rotation'];
  }

  paint(ctx, geom, properties) 
}

registerPaint('card-flip', CardFlipPainter);

• class CardFlipPainter { ... } defines the custom-made paint worklet.
• static get inputProperties() { ... } accepts the --card-rotation property.
• paint(ctx, geom, properties) { ... } performs the custom-made painting logic using canvas operations.
• registerPaint('card-flip', CardFlipPainter); registers the worklet with CSS.

Rising upon the Card Flip

Proper right here’s how the cardboard flip, created with Houdini, may very well be included into a company website online. Allow me to present a real-project scenario:

html lang="en">
head>
meta charset="UTF-8">
meta title="viewport" content material materials="width=device-width, initial-scale=1.0">
hyperlink rel="stylesheet" href="sorts.css">
script kind="module" src="app.js" defer>script> 
head>
physique>
div class="flex-container">
div class="card" id="flip-card"> 
div class="card-inner" id="flip-card-inner">
div class="card-front">
div class="image">
div>
div>
div class="card-back">
div class="content material materials">

p>John Doep>
p> Promoting and advertising and marketing Lead p>

div>
div>
div>
div>

div class="card" id="flip-card">
div class="card-inner" id="flip-card-inner">
div class="card-front">
div class="image">
div>
div>

div class="card-back">
div class="content material materials">

p>Jane Doep>
p> Senior Dev. p>

div>
div>
div>
div>

div class="card" id="flip-card">
div class="card-inner" id="flip-card-inner">
div class="card-front">
div class="image"> 
div>
div>

div class="card-back">
div class="content material materials">

p>Mike Doep>
p>Dev Opsp>

div>
div>
div>
div>
div>
physique>
html>

I’ve designed a workers half for the website online the place the cardboard flip is utilized to indicate the workers members’ photographs as a result of the doorway content material materials, with their job title and title revealed on the once more.

Let’s endure just some of the changes I made to the code.

Manage all the enjoying playing cards inside a flex container:

div class="flex-container">
div>

Throughout the card entrance half, I’ve included an image div, the place you’ll merely mix any image of your various through the use of a background image inside the CSS.

div class="card-front">
  div class="image">
  div>
div>

Throughout the card once more half, you’ll uncover a content material materials div that options specific particulars similar to the workers member’s title (“Mike Doe”) and job title (“Dev Ops”). These elements have been assigned the class content material materials for ease of CSS styling. Be at liberty to personalize this information to align alongside along with your specific content material materials requirements.

div class="card-back">
  div class="content material materials">
    p>Mike Doep>
    p>Dev Opsp>
  div> 
div>

The forthcoming CSS code snippet showcases smart changes to show the making use of of the CSS card flip in an precise web enterprise. Regulate these sorts in line with your preferences:

physique {
  present: flex;
  align-items: coronary heart;
  justify-content: coronary heart;
  peak: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.card {
  width: 200px;
  peak: 300px;
  perspective: 1000px;
}

.card-inner {
  --card-rotation: 0deg;
  paint: card-flip;
  paint-order: common;
  width: 100%;
  peak: 100%;
  transform-style: preserve-3d;
  transition: rework 0.6s;
  rework: rotateY(var(--card-rotation));
}

.card:hover .card-inner {
  --card-rotation: 180deg;
}

.card-front,
.card-back {
  width: 100%;
  peak: 100%;
  place: absolute;
  backface-visibility: hidden;
  present: flex;
  align-items: coronary heart;
  justify-content: coronary heart;
  font-size: 20px;
  coloration: white;
  border-radius: 10px;
}

.card-front {
  background-color: #3498db;
}

.card-back {
  background-color: #e74c3c;
  rework: rotateY(180deg);
}

.flex-container {
  present: flex;
  gap: 2rem;
} 

.content material materials {
  text-align: coronary heart;
}

.image {
  peak: 120px;
  width: 120px;
  border-radius: 50%;
  background-color: #fff;
  
}

Throughout the container that encompasses all the enjoying playing cards, the CSS code makes use of flex present and models a distinct segment of two rem between the enjoying playing cards. Regulate the opening value in line with your design preferences.

.flex-container { 
  present: flex; gap: 2rem;
}

The CSS code for the content material materials class services the textual content material inside the required ingredient. Regulate as very important to comprehend the required alignment to your content material materials:

.content material materials {
  text-align: coronary heart;
}

The CSS code for the image class inside the entrance card content material materials models a spherical image with a peak and width of 120px, a border-radius of fifty%, and a white background coloration. Furthermore, there is a commented-out line for a background image; you’ll uncomment this line and provide the appropriate URL for the image it’s good to use. Regulate the scale and background properties as wished to suit your design preferences:

.image { 
  peak: 120px; 
  width: 120px; 
  border-radius: 50%; 
  background-color: #fff; 
   
}

Conclusion

In summary, the article explores the transformative choices of Houdini, specializing in a 3D card flip animation. It highlights the power of worklets for dynamic animations, interactive outcomes, and rising seen sorts. Personalized properties and the Paint API provide further flexibility and creative prospects.

The smart examples, along with a spherical progress bar and the mix of the 3D card flip into a company website online, showcase Houdini’s real-world features. The article encourages you to embrace Houdini’s limitless potential, providing devices to redefine web design and encourage creative enchancment.