anime.js - Star Wars

[Acorn]

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: anime.js - Star Wars Blurb.xar

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

[wizard509]

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

[gwpriester]

Finally, a film for readers.

[Spamiky]

Great job

[Acorn]

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: anime.js - Star Wars Episode IV.xar - all of 35kB.

Acorn

---

Animation:

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

[Egg Bramhill]

That's a lot sweeter Acorn!

[Acorn]

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

Acorn

[Egg Bramhill]

May the Force be with you

[wizard509]

Love it, Acorn, good job!