Hi,
I am glad to ask my first question here in the fantastic forum
In my first CodePen I try to make this split text animation responsive.
const animateLines = new SplitText(".is-style-animate-lines", {type: "lines"});
gsap.set(animateLines.lines, {opacity: 0});
ScrollTrigger.batch(animateLines.lines, {
onEnter: batch => {
gsap.set(batch, {opacity: 1, yPercent: 100});
gsap.to(batch, {
yPercent: 0,
duration: 0.4,
stagger: 0.2
});
},
onLeaveBack: batch => gsap.to(batch, {opacity: 0, yPercent: 100}),
start: "bottom 94%",
});
I had other approaches first, but came across ScrollTrigger Batch here, which is what I would like to use to animate all H1 that enter the viewport.
However, my problem is that the text is not responsive and I just can't get it to return to the origin with revert(). I guess this happens at the resize event? Or when the animation has finished running?
Maybe someone can give me a tip?
Many thanks
Patrick
...my next question might be how to avoid the FOUC
