אנימציות על טקסט באמצעות Anime.js

<div class="text-box">
    <div class="ml1">
          <span class="text-wrapper">
              <span class="line line1"></span>
              <span class="letters">ידיעות אחרונות</span>
              <span class="line line2"></span>
          </span>
    </div>
</div>

.ml1 {
    font-weight: 800;
    font-family: 'Heebo';
    color: azure;
}

.ml1 .letter {
    display: inline-block;
    line-height: 1em;
}

.ml1 .text-wrapper {
    position: relative;
    display: inline-block;
}

.ml1 .line {
    opacity: 0;
    position: absolute;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: #fefefe;
    transform-origin: 0 0;
}

.ml1 .line1 {
    top: -5px;
}

.ml1 .line2 {
    bottom: 0;
}

$('.ml1 .letters').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml1 .letter',
        scale: [0.3, 1],
        opacity: [0, 1],
        translateZ: 0,
        easing: "easeOutExpo",
        duration: 600,
        delay: function (el, i) {
            return 70 * (i + 1)
        }
    }).add({
    targets: '.ml1 .line',
    scaleX: [0, 1],
    opacity: [0.5, 1],
    easing: "easeOutExpo",
    duration: 700,
    offset: '-=875',
    delay: function (el, i, l) {
        return 80 * (l - i);
    }
}).add({
    targets: '.ml1',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});

<div class="text-box two">
    <div class="ml2">
        <span class="text-wrapper">
          <span class="letters">אהבה ממבט ראשון</span>
        </span>
    </div>
</div>

.ml2 .letter {
    display: inline-block;
}

$('.ml2').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml2 .letter',
        scale: [4, 1],
        opacity: [0, 1],
        translateZ: 0,
        easing: "easeOutExpo",
        duration: 950,
        delay: function (el, i) {
            return 70 * i;
        }
    }).add({
    targets: '.ml2',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});

<div class="text-box three">
    <div class="ml3">
        <span class="text-wrapper">
          <span class="letters">האוקיינוס השקט</span>
        </span>
    </div>
</div>

$('.ml3').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml3 .letter',
        opacity: [0, 1],
        easing: "easeInOutQuad",
        duration: 2250,
        delay: function (el, i) {
            return 150 * (i + 1)
        }
    }).add({
    targets: '.ml3',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});

<div class="text-box five">
    <div class="ml5">
          <span class="text-wrapper">
                <span class="line line1"></span>
                <span class="letters letters-left">אודיו</span>
                <span class="letters ampersand">&amp;</span>
                <span class="letters letters-right">וידאו</span>
                <span class="line line2"></span>
          </span>
    </div>
</div>

.ml5 {
    position: relative;
    font-weight: 300;
    color: #402d2d;
    font-family: 'Frank Ruhl Libre';
}

.ml5 .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.1em;
    padding-right: 0.05em;
    padding-bottom: 0.15em;
    line-height: 1em;
}

.ml5 .line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 3px;
    width: 100%;
    background-color: #402d2d;
    transform-origin: 0.5 0;
}


.ml5 .ampersand {
    font-family: Baskerville, "EB Garamond", serif;
    font-style: italic;
    font-weight: 400;
    width: 0.9em;
    margin-right: 0.1em;
}

.ml5 .letters {
    display: inline-block;
    opacity: 0;
}

anime.timeline({loop: true})
    .add({
        targets: '.ml5 .line',
        opacity: [0.5, 1],
        scaleX: [0, 1],
        easing: "easeInOutExpo",
        duration: 700
    }).add({
    targets: '.ml5 .line',
    duration: 600,
    easing: "easeOutExpo",
    translateY: function (e, i, l) {
        var offset = -0.625 + 0.625 * 2 * i;
        return offset + "em";
    }
}).add({
    targets: '.ml5 .ampersand',
    opacity: [0, 1],
    scaleY: [0.5, 1],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=600'
}).add({
    targets: '.ml5 .letters-left',
    opacity: [0, 1],
    translateX: ["0.5em", 0],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=300'
}).add({
    targets: '.ml5 .letters-right',
    opacity: [0, 1],
    translateX: ["-0.5em", 0],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=600'
}).add({
    targets: '.ml5',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});

<div class="text-box six">
    <div class="ml6">
          <span class="text-wrapper">
            <span class="letters">החלונות הגבוהים</span>
          </span>
    </div>
</div>

.ml6 {
    position: relative;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.6);
    font-family: 'Heebo';
}

.ml6 .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.3em;
    overflow: hidden;
}

.ml6 .letter {
    display: inline-block;
    line-height: 1em;
}

$('.ml6 .letters').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml6 .letter',
        translateY: ["1.1em", 0],
        translateZ: 0,
        duration: 750,
        delay: function (el, i) {
            return 50 * i;
        }
    }).add({
    targets: '.ml6',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});

<div class="text-box seven">
    <div class="ml7">
          <span class="text-wrapper">
            <span class="letters">מציאות נושכת</span>
          </span>
    </div>
</div>

.ml7 {
    position: relative;
    font-weight: 900;
    font-family: 'Heebo';
    font-size: 26px;
}

.ml7 .text-wrapper {
    position: relative;
    display: inline-block;
    padding-top: 0.2em;
    padding-right: 0.05em;
    padding-bottom: 0.1em;
    overflow: hidden;
}

.ml7 .letter {
    transform-origin: 0 100%;
    display: inline-block;
    line-height: 1em;
}

$('.ml7 .letters').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml7 .letter',
        translateY: ["1.1em", 0],
        translateX: ["0.55em", 0],
        translateZ: 0,
        rotateZ: [180, 0],
        duration: 750,
        easing: "easeOutExpo",
        delay: function (el, i) {
            return 50 * i;
        }
    }).add({
    targets: '.ml7',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});

<div class="text-box eight">
    <div class="ml8">
          <span class="letters-container">
            <span class="letters letters-left">היי</span>
            <span class="letters bang">!</span>
          </span>
          <span class="circle circle-white"></span>
          <span class="circle circle-dark"></span>
          <span class="circle circle-container"><span class="circle circle-dark-dashed"></span></span>
    </div>
</div>

.ml8 {
    font-weight: 900;
    color: #fefefe;
    height: 5em;
    position: relative;
    text-align: center;
}

.ml8 .letters-container {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
    height: 1em;
}

.ml8 .letters {
    position: relative;
    z-index: 2;
    display: inline-block;
    line-height: 0.7em;
    left: -0.12em;
    top: -0.2em;
}

.ml8 .bang {
    font-size: 1.4em;
    top: auto;
    right: -0.06em;
}

.ml8 .circle {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    bottom: 0;
}

.ml8 .circle-#fefefe {
    width: 3em;
    height: 3em;
    border: 2px dashed #fefefe;
    border-radius: 2em;
}

.ml8 .circle-dark {
    width: 2.2em;
    height: 2.2em;
    background-color: #4f7b86;
    border-radius: 3em;
    z-index: 1;
}

.ml8 .circle-dark-dashed {
    border-radius: 2.4em;
    background-color: transparent;
    border: 2px dashed #4f7b86;
    width: 2.3em;
    height: 2.3em;
}

anime.timeline({loop: true})
    .add({
        targets: '.ml8 .circle-white',
        scale: [0, 3],
        opacity: [1, 0],
        easing: "easeInOutExpo",
        rotateZ: 360,
        duration: 1100
    }).add({
    targets: '.ml8 .circle-container',
    scale: [0, 1],
    duration: 1100,
    easing: "easeInOutExpo",
    offset: '-=1000'
}).add({
    targets: '.ml8 .circle-dark',
    scale: [0, 1],
    duration: 1100,
    easing: "easeOutExpo",
    offset: '-=600'
}).add({
    targets: '.ml8 .letters-left',
    scale: [0, 1],
    duration: 1200,
    offset: '-=550'
}).add({
    targets: '.ml8 .bang',
    scale: [0, 1],
    rotateZ: [45, -10],
    duration: 1200,
    offset: '-=1000'
}).add({
    targets: '.ml8',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1400
});

anime({
    targets: '.ml8 .circle-dark-dashed',
    rotateZ: 360,
    duration: 8000,
    easing: "linear",
    loop: true
});

<div class="text-box nine">
    <div class="ml9">
    <span class="text-wrapper">
        <span class="letters">קפה של בוקר</span>
    </span>
    </div>
</div>

.ml9 {
    position: relative;
    font-weight: 200;
    font-family: 'Tinos';
    color: #cfc2c6;
    font-size: 48px;
}

.ml9 .text-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.ml9 .letter {
    transform-origin: 50% 100%;
    display: inline-block;
    line-height: 1em;
}

$('.ml9 .letters').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml9 .letter',
        scale: [0, 1],
        duration: 1500,
        elasticity: 600,
        delay: function (el, i) {
            return 45 * (i + 1)
        }
    }).add({
    targets: '.ml9',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});

<div class="text-box ten">
    <div class="ml10">
    <span class="text-wrapper">
        <span class="letters">דומינוס פיצה</span>
    </span>
    </div>
</div>

.ml10 {
    position: relative;
    font-weight: 900;
    font-family: 'Miriam Libre';
    font-size: 60px;
    line-height: 1;
}

.ml10 .text-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.ml10 .letter {
    display: inline-block;
    line-height: 1em;
    transform-origin: 0 0;
}

$('.ml10 .letters').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml10 .letter',
        rotateY: [-90, 0],
        duration: 1300,
        delay: function (el, i) {
            return 45 * i;
        }
    }).add({
    targets: '.ml10',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});

<div class="text-box eleven">
    <div class="ml11">
     <span class="text-wrapper">
         <span class="line line1"></span>
         <span class="letters">שלום ולהתראות</span>
     </span>
    </div>
</div>

.ml11 {
    font-weight: 900;
}

.ml11 .text-wrapper {
    position: relative;
    display: inline-block;
    text-shadow: 0 3px 0 #b2a98f, 0 7px 10px rgba(0, 0, 0, 0.15), 0 6px 2px rgba(0, 0, 0, 0.1), 0 34px 30px rgba(0, 0, 0, 0.1);
}

.ml11 .line {
    opacity: 0;
    position: absolute;
    right: 0;
    height: 100%;
    width: 3px;
    background-color: #fefefe;
    transform-origin: 0 50%;
}

.ml11 .line1 {
    top: 0;
    right: 10px;
}

.ml11 .letter {
    display: inline-block;
    line-height: 1em;
}

$('.ml11 .letters').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml11 .line',
        scaleY: [0, 1],
        opacity: [0.5, 1],
        easing: "easeOutExpo",
        duration: 700
    })
    .add({
        targets: '.ml11 .line',
        translateX: [0, $(".ml11 .letters").width() * -1],
        easing: "easeOutExpo",
        duration: 700,
        delay: 100
    }).add({
    targets: '.ml11 .letter',
    opacity: [0, 1],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=775',
    delay: function (el, i) {
        return 34 * (i + 1)
    }
}).add({
    targets: '.ml11',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});

<div class="text-box twelve">
    <div class="ml12">
        סאבי הפקות בע״מ
    </div>
</div>

.ml12 {
    font-weight: 200;
    letter-spacing: 0.4em;
    font-size: 22px;
}

.ml12 .letter {
    display: inline-block;
    line-height: 1em;
}

$('.ml12').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml12 .letter',
        translateX: [40, 0],
        translateZ: 0,
        opacity: [0, 1],
        easing: "easeOutExpo",
        duration: 1200,
        delay: function (el, i) {
            return 500 + 30 * i;
        }
    }).add({
    targets: '.ml12 .letter',
    translateX: [0, -30],
    opacity: [1, 0],
    easing: "easeInExpo",
    duration: 1100,
    delay: function (el, i) {
        return 100 + 30 * i;
    }
});

<div class="text-box thirteen">
    <div class="ml13">
        השמש העולה
    </div>
</div>

.ml13 {
    letter-spacing: 0.2em;
    font-weight: 800;
    font-family: 'Heebo';
    font-size: 28px;
}

.ml13 .letter {
    display: inline-block;
    line-height: 1em;
}

$('.ml13').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/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: function (el, i) {
            return 300 + 30 * i;
        }
    }).add({
    targets: '.ml13 .letter',
    translateY: [0, -100],
    opacity: [1, 0],
    easing: "easeInExpo",
    duration: 1200,
    delay: function (el, i) {
        return 100 + 30 * i;
    }
});

<div class="text-box fourteen">
     <div class="ml14">
         <span class="text-wrapper">
            <span class="letters">מצאו את האלמנט</span>
            <span class="line"></span>
         </span>
     </div>
</div>

.ml14 {
    font-weight: 200;
}

.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: #fefefe;
    transform-origin: 100% 100%;
    bottom: 0;
}

.ml14 .letter {
    display: inline-block;
    line-height: 1em;
}

$('.ml14 .letters').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/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: function (el, i) {
        return 150 + 25 * i;
    }
}).add({
    targets: '.ml14',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});

<div class="text-box fifteen">
    <div class="ml15">
        <span class="word">צא</span>
        <span class="word">עכשיו</span>
    </div>
</div>

.ml15 {
    font-weight: 700;
    letter-spacing: 0.2em;
}

.ml15 .word {
    display: inline-block;
    line-height: 1em;
}

anime.timeline({loop: true})
    .add({
        targets: '.ml15 .word',
        scale: [14, 1],
        opacity: [0, 1],
        easing: "easeOutCirc",
        duration: 800,
        delay: function (el, i) {
            return 800 * i;
        }
    }).add({
    targets: '.ml15',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});

<div class="text-box sixteen">
    <div class="ml16">
        נוצר באהבה :)
    </div>
</div>

.ml16 {
    color: #402d2d;
    font-weight: 800;
    letter-spacing: 0.2em;
    overflow: hidden;
    font-family: 'Heebo';
    font-size: 24px;
}

.ml16 .letter {
    display: inline-block;
    line-height: 1em;
}

$('.ml16').each(function () {
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
});

anime.timeline({loop: true})
    .add({
        targets: '.ml16 .letter',
        translateY: [-100, 0],
        easing: "easeOutExpo",
        duration: 1400,
        delay: function (el, i) {
            return 30 * i;
        }
    }).add({
    targets: '.ml16',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
});