anime.js - Star Wars

I've yet to work out a clean way to add perspective to the text but here is a first attempt:

Demo: https://shared.xara.com/AZFSBQ3dlo
Design: Attachment 132156

Anyone want to design an anime.js star background?

Text also seems to require another animated shape that is SVG.
Here it is hiding as the Star Wars logo with Name htmlclass="fudge".

Acorn

Looks good so far Acorn, not sure I can help.

Finally, a film for readers. :)

Great job

I worked out how to get the perspective - in the end, fairly easy.

Made in into a Timeline...

Demo: https://shared.xara.com/EFxiJ3xsMb
Design: Attachment 132160 - all of 35kB.

Acorn

---

Animation:

Code:

---

<style>
.fudge, .warp {
  opacity: 0;
}
</style>
<script>
var showtime = 8000;
var prose = document.querySelectorAll('.warp, fudge');
var tale = {
  targets: '.fairy',
  opacity: [1, 0],
  duration: showtime,
  easing: 'linear',
  endDelay: 1000,
}
var starWarsLogo = {
  targets: '.fudge',
  opacity: [
    {value: 0, duration: 500},
    {value: 1, duration: 1500},
    {value: 1}
  ],
  scale: [
    {value: 4.5, duration: 500},
    {value: 4.5, duration: 1500},
    {value: 0}
  ],
  duration: 2 * showtime,
  easing: 'easeOutQuint',
}
var prologue = {
  targets: prose,
  opacity: anime.stagger(1),
  scale: [1.65, 0],
  perspective: 300,
  rotateX: 80,
  translateY: [100 + anime.stagger(40), 0],
  delay: anime.stagger(showtime / 4),
  easing: 'easeOutQuint',
  duration: 8 * showtime,
}
var sw = anime.timeline({});
sw
  .add(tale)
  .add(starWarsLogo)
  .add(prologue);
</script>

---

That's a lot sweeter Acorn!

Here is a star field: https://shared.xara.com/hEmeLAuUoQ

Acorn

May the Force be with you :D

Love it, Acorn, good job!