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

html lang="en">
head>
meta charset="UTF-8">
meta title="viewport" content material materials supplies="width=device-width, initial-scale=1.0">
title>Shifting Spherical Progress Bartitle>
hyperlink rel="stylesheet" href="kinds.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%, guaranteeing non-inheritance. Subsequently, the .progress class kinds the spherical container, using a conic gradient to depict progress dynamically. This concise code harnesses the pliability of Houdini custom-made properties for creating visually collaborating spherical progress components in internet 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::earlier than {
 content material materials supplies: attr(data-progress);
 place: absolute;
 prime: 50%;
 left: 50%;
 rework: translate(-50%, -50%);
 font-size: 24px;
 font-weight: bolder;
 coloration: purple;
 text-align: coronary coronary heart;
}

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

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

Some factors to notice contained in the code above:

• The @property rule is a 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 worth from its dad or mum components.
• initial-value: 0%; fashions the preliminary worth of the custom-made property to 0%.

Subsequent, let’s kind 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 factors to notice above:

• --progress: 0%; initializes the custom-made property to 0%.
• The .progress class kinds the spherical progress bar.
• width and peak set the dimensions of the spherical container.
• border-radius: 50%; creates a wonderful circle.
• background makes use of a conic gradient to create the spherical progress impression, with the progress decided 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 means of the dynamic partnership of CSS Houdini and JavaScript. Leveraging CSS Houdini, we outline a custom-made property, --progresswhereas the paint worklet takes worth of custom-made portray. This synergy permits real-time updates to our progress bar primarily based completely on the evolving worth of the custom-made property. This collaboration not solely enhances flexibility nonetheless in addition to supplies a potent avenue for creating distinctive rendering outcomes, leading to a beautiful and visually charming spherical progress bar for our internet 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 underneath are some elements to not contained in the code above:

• class PaintWorklet is a JavaScript class representing a paint worklet, a part of the Houdini Paint API.
• The paint methodology defines the custom-made portray logic for the spherical progress bar.
• ctx is the 2D rendering context, and it’s used to attract 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 elements to notice contained in the code above:

• CSS.paintWorklet.addModule('paint-worklet.js'); tons the paint worklet module.
• CSS.registerProperty registers the custom-made property --progress and associates it with the paint worklet.
• The paint methodology commonly known as to provide the custom-made portray logic primarily based completely on the present worth of --progress.

Now let’s set the progress over time:

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

 requestAnimationFrame(updateProgress);
}

updateProgress();

Some elements to notice contained in the code above:

• currentProgress is incremented over time to simulate the progress.
• ingredient.dataset.progress and ingredient.kind.setProperty change the DOM and customised property to mirror the progress.
• requestAnimationFrame ensures easy animation by requesting the subsequent physique.

Introducing the Paint API

The Paint API is integral to CSS Houdini, and it revolutionizes internet portray by enabling dynamic and customised seen kinds. It empowers builders to create on-the-fly designs utilizing user-defined custom-made properties. Uncover its secrets and techniques and strategies and strategies to unleash unparalleled potential.

Simplified foundations

Listed underneath are some Paint API selections:

• Paint worklet. A JavaScript operate that acts as your ingenious genie, conjuring up visuals based in your directions.
• Customized properties. Variables you outline utilizing CSS’s var() syntax, holding values that might be dynamically referenced and manipulated.
• The paint() operate. The magic wand that calls upon your paint worklet to weave its seen enchantment onto components.

Portray with code: a sensible event

As an example “portray with code” in motion, let’s dive correct right into a sensible event that showcases the ability of the CSS Paint API.

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

html lang="en">
head>
meta charset="UTF-8">
meta title="viewport" content material materials supplies="width=device-width, initial-scale=1.0">
hyperlink rel="stylesheet" href="kinds.css">
title>Paint API Demotitle>
head>
physique>
half id="present show display">
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 offered beneath exemplifies the utilization of the Paint API in CSS Houdini. The background-image: paint(awesomePattern) property integrates the awesomePattern paint worklet, exemplifying the ability and ease of dynamically producing visuals:

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

#present show display {
  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 picture to the #present show display ingredient, showcasing CSS Houdini’s performance to create dynamic visuals.

CSS properties can administration the sample’s look:

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

All through the JavaScript code beneath, the Kind class takes coronary coronary heart stage. Its paint methodology, 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 combo of CSS and JavaScript, delivering a seamless synergy of dynamic seen components:

class Kind {
paint(ctx, geom, properties) {
  
  const numShapes = properties.get('--numShapes') || 30;
  const shapeSize = properties.get('--shapeSize') || 50;
  const colours = properties.get('--colors') || ['#F28500', '#00FFFF', 'limegreen'];
  
  const getRandomColor = () => colours[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', Kind);

Defining the paint worklet

• class Kind { ... } defines a category with a paint() methodology, the core of the Paint API.
• properties.get() retrieves customization alternatives from CSS, demonstrating Houdini’s integration with CSS properties.
• The paint() methodology makes use of canvas-like drawing instructions to create the dynamic circle sample, highlighting Houdini’s performance to increase CSS with custom-made rendering capabilities.
• registerPaint('awesomePattern', Kind) registers the Kind class as a paint worklet, making it obtainable to be used in CSS.

Crafting Interactive 3D Animations with CSS Houdini

That is our method of building a charming 3D card flip animation utilizing CSS Houdini, worklets, Paint API, and customised Houdini properties. CSS Houdini permits for the creation of custom-made paint worklets, enabling an additional versatile and dynamic method to styling. The animation is triggered by a hover occasion, showcasing the ability of Houdini in seamlessly combining each the seen and interactive components of internet enchancment.

All through the code beneath, you’ll uncover the entire code, with concise explanations of the CSS Houdini components:

html lang="en">
head>
meta charset="UTF-8">
meta title="viewport" content material materials supplies="width=device-width, initial-scale=1.0">
hyperlink rel="stylesheet" href="kinds.css">
script variety="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 supplies

div>
div class="card-back">

As soon as extra Content material materials supplies

div>
div>
div>
physique>
html>

The CSS code beneath establishes the foundational improvement for a card ingredient in a web-based enterprise. The format providers contained within the viewport utilizing Flexbox properties, and the cardboard itself is printed with particular 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, merely animating a 180-degree rotation. Styling particulars embody vibrant background colours, font properties, and border-radius for a refined look on each back and front faces. The code achieves a visually fascinating and interactive card design:

physique {
  current: flex;
  align-items: coronary coronary heart;
  justify-content: coronary 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: frequent;
  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;
  current: flex;
  align-items: coronary coronary heart;
  justify-content: coronary coronary heart;
  font-size: 20px;
  coloration: white;
  border-radius: 10px;
}

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

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

All through the JavaScript code beneath — from app.js — the script checks if the browser helps the paintWorklet attribute, and if that’s the case, it provides a paint worklet module named paintWorklet.js. Moreover, an occasion listener is said to the ingredient with the ID flip-cardtoggling the flipped class on a click on on occasionally:

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

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

The paintWorklet.js file extends the JavaScript effectivity 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 utilizing canvas operations.

The --card-rotation property controls the rotation angle. Along with the interactive click on on occasionally listener, this modular method enhances the ultimate seen attraction of the net 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 portray logic utilizing canvas operations.
• registerPaint('card-flip', CardFlipPainter); registers the worklet with CSS.

Rising upon the Card Flip

Correct proper right here’s how the cardboard flip, created with Houdini, might very properly be included into an organization web site on-line. Enable me to current a real-project state of affairs:

html lang="en">
head>
meta charset="UTF-8">
meta title="viewport" content material materials supplies="width=device-width, initial-scale=1.0">
hyperlink rel="stylesheet" href="kinds.css">
script variety="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="picture">
div>
div>
div class="card-back">
div class="content material materials supplies">

p>John Doep>
p> Selling and 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="picture">
div>
div>

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

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="picture"> 
div>
div>

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

p>Mike Doep>
p>Dev Opsp>

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

I’ve designed a staff half for the web site on-line the place the cardboard flip is utilized to point the employees members’ pictures because of the doorway content material materials supplies, with their job title and title revealed on the as soon as extra.

Let’s endure simply a number of the modifications I made to the code.

Handle all of the having fun with taking part in playing cards inside a flex container:

div class="flex-container">
div>

All through the cardboard entrance half, I’ve included a picture div, the place you may merely combine any picture of your numerous by means of using a background picture contained in the CSS.

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

All through the cardboard as soon as extra half, you’ll uncover a content material materials supplies div that choices particular particulars much like the employees member’s title (“Mike Doe”) and job title (“Dev Ops”). These components have been assigned the category content material materials supplies for ease of CSS styling. Be at liberty to personalize this info to align alongside alongside together with your particular content material materials supplies necessities.

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

The forthcoming CSS code snippet showcases good modifications to point out the making use of of the CSS card flip in an exact internet enterprise. Regulate these kinds consistent with your preferences:

physique {
  current: flex;
  align-items: coronary coronary heart;
  justify-content: coronary 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: frequent;
  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;
  current: flex;
  align-items: coronary coronary heart;
  justify-content: coronary 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 {
  current: flex;
  hole: 2rem;
} 

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

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

All through the container that encompasses all of the having fun with taking part in playing cards, the CSS code makes use of flex current and fashions a definite phase of two rem between the having fun with taking part in playing cards. Regulate the opening worth consistent with your design preferences.

.flex-container { 
  current: flex; hole: 2rem;
}

The CSS code for the content material materials supplies class providers the textual content material materials contained in the required ingredient. Regulate as essential to understand the required alignment to your content material materials supplies:

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

The CSS code for the picture class inside the doorway card content material materials supplies fashions a spherical picture with a peak and width of 120px, a border-radius of fifty%, and a white background coloration. Moreover, there’s a commented-out line for a background picture; you may uncomment this line and supply the suitable URL for the picture it is good to make use of. Regulate the dimensions and background properties as wished to fit your design preferences:

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

Conclusion

In abstract, the article explores the transformative selections of Houdini, specializing in a 3D card flip animation. It highlights the ability of worklets for dynamic animations, interactive outcomes, and rising seen kinds. Customized properties and the Paint API present additional flexibility and artistic prospects.

The good examples, together with a spherical progress bar and the combo of the 3D card flip into an organization web site on-line, showcase Houdini’s real-world options. The article encourages you to embrace Houdini’s limitless potential, offering gadgets to redefine internet design and encourage artistic enchancment.