Hey everyone,
I'm using an outline color to hide the surroundings of a div. Which works great on entrance but fails to revert to its original (transparent) state when top hits center.
Please let me know if any more information needs to be provided.
Thanks!
Rory
I've attached a horrible quality video due to the size limit.
Code:
gsap.registerPlugin(ScrollTrigger);
// scolling rows
gsap.to(".cta_image-row-container", {
scrollTrigger: {
trigger: "#cta_section",
start: "top center",
end: "center center",
markers: false,
scrub: 4,
// pin: ".main-wrapper",
pinSpacing: true,
anticipatePin: 1,
//toggleActions: "play complete complete complete"
},
x: 0,
y:0,
});
// outline fade in/out
gsap.to("#test-1", {
scrollTrigger: {
trigger: "#cta_section",
start: "center center",
end: "top center",
markers: true,
pinSpacing: true,
anticipatePin: 1,
},
outlineColor: "rgba(5, 7, 27)",
});
Sequence 01.mp4