DEV Community

Cover image for Ripple of flipping squares (live demo)
Joe Pea
Joe Pea

Posted on • Updated on

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:

GitHub logo lume / lume

Create CSS3D/WebGL applications declaratively with HTML. Give regular DOM elements shadow and lighting.

LUME

A toolkit that simplifies the creation of rich and interactive 2D or 3D experiences for any device from mobile to desktop to AR/VR.

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 both CSS and WebGL.

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

glas - WebGL engine written in AssemblyScript

This is a port of Three.js to AssemblyScript (TypeScript that compiles to WebAssembly) for running WebGL graphics with consistent performance.

@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鈥


GitHub logo tweenjs / tween.js

JavaScript animation engine

tween.js

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

NPM Version CDNJS NPM Downloads Build and Tests

Update Note In v18 the script you should include has moved from src/Tween.js to dist/tween.umd.js. See the installation section below.


const box = document.createElement('div')
box.style.setProperty('background-color', '#008800')
box.style.setProperty('width', '100px')
box.style.setProperty('height', '100px')
document.body.appendChild(box)
// Setup the animation loop.
function animate(time) {
    requestAnimationFrame(animate)
    TWEEN.update(time)
}
requestAnimationFrame(animate)
const coords = {x: 0, y: 0} // Start at (0, 0)
const tween = new TWEEN.Tween(coords) // Create a new tween that modifies 'coords'.
    .to({x: 300, y
Enter fullscreen mode Exit fullscreen mode

Here's the original demo:

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

Top comments (0)