Animated text effect with tweenjs

Question

Please help me figure it out. There is a text animation effect on click on the screen, it is written in "tween.js". Does anyone know how to create such an effect on "tween.js"?

Here is the link: https://michalzalobny.com/orbit-gallery

I tried to read the "tween.js" documentation and looked at the examples, but nothing like that is written there.

@RokoC.Buljan What example do you need?! I have no idea how such an effect is done on "Tween.js" — Trismer, Jan 30 '23 at 23:28

Roko C. Buljan · Answer 1 · 2023-01-31T02:00:18.307

Not sure about Tween.JS, but here's how to do it using vanilla JavaScript in order to toggle a class, and let CSS handle the rest.

The staggered characters animation effect is made possible by assigning a CSS var --anim-delay to each character SPAN with a value of the respective SPAN index, later used in CSS as the transition-delay:

// DOM helper functions:

const el = (sel, par) => (par || document).querySelector(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);


// Staggered characters flip effect:

const elText = el("#text");
const words = ["Discover", "Swipe", "Culture"];

// Create SPANs for words and charactres
words.forEach(word => {
  const elsChars = [...word].map((char, i) => {
    const elChar = elNew("span", { className: "char", textContent: char });
    elChar.style.setProperty("--anim-delay", i);
    return elChar;
  });
  const elWord = elNew("span", { className: "word" });
  elWord.append(...elsChars);
  elText.append(elWord);
});

// Animate on pointer events:
el("body").addEventListener("pointerdown", () => {
  elText.classList.add("is-pressed");
});
el("body").addEventListener("pointerup", () => {
  elText.classList.remove("is-pressed");
});

#text {
  display: flex;
  justify-content: center;
  gap: 2rem;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  perspective: 600px;
}

.word {
  font-size: 9vw;
  display: inline-flex;
  pointer-events: none;
  user-select: none;
}

.char {
  transition:
    transform 0.3s calc(var(--anim-delay) * 20ms) ease-in-out,
    opacity   0.3s calc(var(--anim-delay) * 20ms) ease-in-out;
  opacity: 1;
  transform-origin: center center 0.4em;
}

.is-pressed .char {
  transform: rotate3d(-1, -0.4, 0, 90deg);
  opacity: 0;
}

(Click and hold)
<div id="text"></div>

It turns out only something remotely similar. There, this effect is implemented letter by letter. On the usual vanilla JS+CSS it is very easy to do this, the implementation is of interest precisely on "Tween.js". Separately, I note that you did a good job of doing this without "Tween.js" — Trismer, Jan 30 '23 at 23:19

Animated text effect with tweenjs

1 Answers1