GSAP ScrollTrigger and max-width

74 views Asked by At

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"
})
}   
1

There are 1 answers

0
Abhishek Patel On

I think max-width:none; turns out to be giving jerks in animations. You can try max-width: unset; or max-width: 0; instead.