Greetings all!
I'm a scripting noob-uh that needs some guidance. I have the animation up and running for all-black text on a white background.
I need to do the same for white text on a black background. Below is what I have so far. Any help in understanding the script needed to make this work is greatly appreciated.
The website.
gsap.registerPlugin(ScrollTrigger);
const splitTypes = document.querySelectorAll(".text-split");
splitTypes.forEach((char, i) => {
const bg = "#F1F1F1";
const fg = "#000000";
const text = new SplitType(char, { types: "chars" });
// Update on window resize
let windowWidth = $(window).innerWidth();
window.addEventListener("resize", function () {
if (windowWidth !== $(window).innerWidth()) {
windowWidth = $(window).innerWidth();
typeSplit.revert();
runSplit();
}
});
gsap.fromTo(
text.chars,
{
color: bg
},
{
color: fg,
duration: 1,
stagger: 1,
opacity: 1,
scrollTrigger: {
trigger: char,
start: "top 80%",
end: "top 35%",
scrub: true,
markers: false,
toggleActions: "play play reverse reverse"
}
}
);
});
