Ripple of flipping squares (live demo)

I had limited time today, but still one demo per day! So I tweaked the #animation and colors of an old demo.

It uses only the CSS 3D rendering that LUME had at the time (back when it was called Infamous, and before it had any #WebGL features).

LUME's WebGL rendering abilities allow regular HTML content (div tags, span tags, etc) to be mixed with 3D content in the same 3D rendering space. Check out my previous posts for examples, and stay tuned for one new demo every day all 2021!

👇 Made with:

lume / lume

GPU-powered 3D HTML. ✨🧊 <lume-box size="1 2 3">

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences.

Home  ·  Documentation  ·  Examples  ·  Forum  ·  Chat  ·  Source

npm install lume

Features

LUME is composed of several packages that can be used individually, or together as a whole:

lume - HTML elements for rich graphics

HTML elements for easily defining rich and interactive 2D or 3D applications powered by CSS3D, WebGL, or a combination of both.

This package uses and re-exports features from the below packages.

@lume/element - System for defining HTML elements

This is a web component system that allows you to create new, fast, and performant HTML elements in a simple way. It provides the foundation for LUME's HTML elements, and a standard pattern for building new elements that extend the features of LUME.

element-behaviors - Mix functionalities onto HTML elements

This allows you to augment HTML elements with features called…

View on GitHub

tweenjs / tween.js

JavaScript/TypeScript animation engine

tween.js

JavaScript (TypeScript) tweening engine for easy animations, incorporating optimised Robert Penner's equations.

More languages: English, 简体中文

---

<div id="box"></div>
<style>
    #box {
        background-color: deeppink;
        width: 100px;
        height: 100px;
    }
</style>

<script type="module">
    import {Tween, Easing} from 'https://unpkg.com/@tweenjs/tween.js@23.1.3/dist/tween.esm.js'

    const box = document.getElementById('box') // Get the element we want to animate.

    const coords = {x: 0, y: 0} // Start at (0, 0)

    const tween = new Tween(coords, false) // Create a new tween that modifies 'coords'.
        .to({x: 300, y: 200}, 1000) // Move to (300, 200) in 1 second.
        .easing(Easing.Quadratic.InOut)

…

View on GitHub

Here's the original demo:

topics: #css #javascript #webdev #3D #CSS3D #365DaysOfCode2021