animejs
<style>
.ml15 {
font-weight: 800;
font-size: 3.8em;
text-transform: uppercase;
letter-spacing: 0.5em;
}
.ml15 .word {
display: inline-block;
line-height: 1em;
}
</style>
<h1 class="ml15">
<span class="word">Out</span>
<span class="word">now</span>
</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<script>
anime.timeline({loop: true})
.add({
targets: '.ml15 .word',
scale: [14,1],
opacity: [0,1],
easing: "easeOutCirc",
duration: 800,
delay: (el, i) => 800 * i
}).add({
targets: '.ml15',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
</script>
<h1 class="ml16">Made with love</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<style>
.ml16 {
color: #402d2d;
padding: 40px 0;
font-weight: 800;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 0.5em;
overflow: hidden;
}
.ml16 .letter {
display: inline-block;
line-height: 1em;
}
</style>
<script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml16');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml16 .letter',
translateY: [-100,0],
easing: "easeOutExpo",
duration: 1400,
delay: (el, i) => 30 * i
}).add({
targets: '.ml16',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
</script>
<h1 class="ml14">
<span class="text-wrapper">
<span class="letters">Find Your Element</span>
<span class="line"></span>
</span>
</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<style>
.ml14 {
font-weight: 200;
font-size: 3.2em;
}
.ml14 .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.1em;
padding-right: 0.05em;
padding-bottom: 0.15em;
}
.ml14 .line {
opacity: 0;
position: absolute;
left: 0;
height: 2px;
width: 100%;
background-color: #fff;
transform-origin: 100% 100%;
bottom: 0;
}
.ml14 .letter {
display: inline-block;
line-height: 1em;
}
</style>
<script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml14 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml14 .line',
scaleX: [0,1],
opacity: [0.5,1],
easing: "easeInOutExpo",
duration: 900
}).add({
targets: '.ml14 .letter',
opacity: [0,1],
translateX: [40,0],
translateZ: 0,
scaleX: [0.3, 1],
easing: "easeOutExpo",
duration: 800,
offset: '-=600',
delay: (el, i) => 150 + 25 * i
}).add({
targets: '.ml14',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
</script>
<h1 class="ml13">Rising Strong</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<style>
.ml13 {
font-size: 1.9em;
text-transform: uppercase;
letter-spacing: 0.5em;
font-weight: 600;
}
.ml13 .letter {
display: inline-block;
line-height: 1em;
}
</style>
<script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml13');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml13 .letter',
translateY: [100,0],
translateZ: 0,
opacity: [0,1],
easing: "easeOutExpo",
duration: 1400,
delay: (el, i) => 300 + 30 * i
}).add({
targets: '.ml13 .letter',
translateY: [0,-100],
opacity: [1,0],
easing: "easeInExpo",
duration: 1200,
delay: (el, i) => 100 + 30 * i
});
</script>
<h1 class="ml9">
<span class="text-wrapper">
<span class="letters">Coffee mornings</span>
</span>
</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<style>
.ml9 {
position: relative;
font-weight: 200;
font-size: 4em;
}
.ml9 .text-wrapper {
position: relative;
display: inline-block;
padding-top: 0.2em;
padding-right: 0.05em;
padding-bottom: 0.1em;
overflow: hidden;
}
.ml9 .letter {
transform-origin: 50% 100%;
display: inline-block;
line-height: 1em;
}
</style>
<script>
// Wrap every letter in a span
var textWrapper = document.querySelector('.ml9 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
anime.timeline({loop: true})
.add({
targets: '.ml9 .letter',
scale: [0, 1],
duration: 1500,
elasticity: 600,
delay: (el, i) => 45 * (i+1)
}).add({
targets: '.ml9',
opacity: 0,
duration: 1000,
easing: "easeOutExpo",
delay: 1000
});
</script>