'Delay baffle.js effect till scroll

For anybody not familiar with baffle.js it's a small library for obfuscating and revealing text effects, I am a Javascript beginner I've been trying to figure out how to delay the text effect from baffle.js till I scroll to the text.

//Baffle
const text = baffle(".text__glitch");
text.set({
    characters: "#$&+",
    speed: 90
});
text.start();
text.reveal(1000);

* {
    margin: 0;
    padding: 0;
}
body{
  color: #fff;
  backgrounf: #fff;
  font-family: Helvetica, sans-serif;
}
section{
    width: 100%;
    min-height: 300vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #000;
}
.text__glitch{
  font-size: 30px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: Uppercase;
}

<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/baffle.min.js"></script>
</head>
<main>
  <section class="section--1">
    <h3 class="text__glitch">Text i want to delay animation on</h3>
  </section>
</main>

javascript

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Delay baffle.js effect till scroll

Sources

Related Questions