Is it possible to make GSAP ScrollTrigger to transition between max-width: none to max-width: 1500px? Or is there another way to keep the website margins on big screens? I have a div that I'd like to have fullwidth initially, but then on scroll keep it to the site margins (with max-width of 1500px).
Right now I've the following code, which makes the div flash on scroll:
let cases = document.querySelectorAll('#case .content');
for(let i=0; i < cases.length; i++) {
gsap.fromTo("#case .content", {
padding: "0%",
maxWidth: "none",
}, {
padding: "5%",
maxWidth: "1500px",
scrollTrigger:{
trigger: "#case .content",
scrub: true,
pin: false,
markers: true,
duration:2.5,
ease: "Power3.easeInOut",
delay: "0",
start: "top center",
end: "top 10%"},
ease: "none"
})
}
I think
max-width:none;turns out to be giving jerks in animations. You can trymax-width: unset;ormax-width: 0;instead.