Hi GSAP fellows,
I'm trying to rewrite the animation below, so that it can leverage scrollTrigger.
https://codepen.io/eric-chuang/pen/wvWvNGd
However, how I code right now can't use the trigger '.title-bg' to select multiple elements. Instead, it plays the animation on 'chars' three times.
const tl = gsap.timeline({
scrollTrigger: {
trigger: ".title-bg",
start: "top center",
toggleActions: "play pause replay pause",
markers: true,
}
}),
splitText = new SplitText(".title-bg", { type: "chars" }),
chars = splitText.chars;
gsap.utils.toArray(".title-bg").forEach((title) => {
tl.set(title, {
backgroundImage: "url(" + title.dataset.background + ")"
})
.fromTo(
title,
{
clipPath: "polygon( 0 100%, 100% 100%, 100% 100%, 0 100% )"
},
{
duration: 1,
clipPath: "polygon( 0 0, 100% 0, 100% 100%, 0 100% )"
}
)
.fromTo(
chars,
{
clipPath: "polygon(0 100%, 0 100%, 0 100%, 0 100%)"
},
{
duration: 0.5,
clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)"
}
)
});
I looked up the document of ScrollTrigger and found the comment in the Simple Example section: "// start the animation when ".box" enters the viewport (once)." I assume that this implies that the way I define my trigger ( '.title-bg' ) will only retrieve the first '.title-bg' element.
I know that it's a better way to use 'gsap.utils.toArray' when looping, but since there will be 2 loops in this situation (one for the main .title-bg element and the other for the splitted texts), how is the better way to achieve the effect?
