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