Basically i saw this stunning effect from t.ricks : https://www.youtube.com/watch?v=yvqSioowCRc
I want to make the same effect when the text scroll into view, instead of play the effect while scrolling the page
In short, my question is : I would like to play the animation when the text is "appear" instead of "scroll"
the code is bellow:
<style>
.line {
position: relative;
}
.line-mask {
position: absolute;
top: 0;
right: 0;
background-color: black;
opacity: 0.65;
height: 100%;
width: 100%;
z-index: 2;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/split-type"></script>
<script>
let typeSplit;
// Split the text up
function runSplit() {
typeSplit = new SplitType(".split-lines", {
types: "lines, words"
});
$(".line").append("<div class='line-mask'></div>");
createAnimation();
}
runSplit();
// Update on window resize
let windowWidth = $(window).innerWidth();
window.addEventListener("resize", function () {
if (windowWidth !== $(window).innerWidth()) {
windowWidth = $(window).innerWidth();
typeSplit.revert();
runSplit();
}
});
gsap.registerPlugin(ScrollTrigger);
function createAnimation() {
$(".line").each(function (index) {
let tl = gsap.timeline({
scrollTrigger: {
trigger: $(this),
// trigger element - viewport
start: "top center",
end: "bottom center",
scrub: 1
}
});
tl.to($(this).find(".line-mask"), {
width: "0%",
duration: 1
});
});
}
</script>