gwineman

Thanks - I think I have a version that's mostly working... still just doesn't seem like the best way to do this. It works pretty well on desktop... but there's a lot of jumping on a mobile device. You will probably need to view the pin fullscreen to see what I'm trying to do Updated pin here: https://codepen.io/ambidustrious/pen/oNGmXdZ

Just hoping to pin h1 untill the bottom of the ".snapper" div - and then show the content underneath everything. Originally tried to do this using all GSAP, but didn't think it was possible... which why I switched to CSS snapping... Not sure what the best way is to accomplish what I need I updated the pin and commented out the lower content. I don't see the dual scroll.... but do you still see it now?

Here's a little better example of what I'm going for. This uses CSS scrollsnapping with GSAP ScrollTrigger The Headline should be "pinned" through the scroll-snapping section... and then everything should release when the lower-content comes into view (or - lower content can just cover the "snapper" class). Hopefully you can make sense of this - my demo isn't working at all... https://codepen.io/ambidustrious/pen/oNGmXdZ

Hello - I'm hoping to alter the demo on this site here: Original CodePen from GSAP https://codepen.io/GreenSock/pen/NWxNEwY This works perfect for my needs, but I want to have a final layer with long-form content below the snapping sections. When I add the additional section, the functionality breaks - Any thoughts? My Codepen

This is fantastic - This makes complete sense. Thank you so much!

Hey Everyone - I'm trying to create a rotational infographic with Scrollsnapping. The snapping should only take effect once the animation reaches the top of the screen. (There is content above the animation that I don't want "snapped"). Once I add the css to enable scroll-snapping, the scrolltrigger is a little unpredictable. Also, once the main panel is pinned and I change the default scroller, I have a difficult time scrolling back to the top of the page. Any thoughts on how to make this work? Thanks

This is great. Exactly the feedback I was looking for. Sorry to post full code and certainly wasn’t looking for a full review. Just wanted to see if this was generally the right method from 10,000 feet as I’ve never used gsap before. Thank you again for the look! Greg

See below. This is all working perfectly, but just want to confirm that this is the best way to create a sequence of animations/scrollTriggers for a home page. The main thing I'm curious about is all the gsap.set call's i'm doing to "reset" positioning if a user its refresh mid-animation. ScrollTrigger.matchMedia({ "(max-width: 767px)": function() { // I dont really do much below this breakpoint... so i just altered a few settings here. gsap.set('.screen', { opacity:0, scale:.7, transformOrigin: '50% 100%', x:0, y:0, xPercent:0 }) const sections = gsap.utils.toArray('.highlight') sections.forEach((sec, i) => { const headline = sec gsap.set(headline, { y:50, opacity:1 }) }); }, "(min-width: 768px)": function() { // This is the bulk of the animation gsap.set('.screen', { opacity:0, scale:.7, transformOrigin: '50% 100%', x:0, y:0, xPercent:0 }) gsap.set('.main-title', { y:0, }) // Background / Panel - This is pinned for the entire sequence gsap.to('.home-animation', { scrollTrigger: { pin:'.panel', trigger: '.home-animation', start: "top +=132", //I would like to make this dynamic to account for a header/nav that changes size responsively end: "bottom +=650", toggleActions: "play none none reverse", markers: false, scrub:1, pinSpacing:false } }) // Fade Screen In gsap.to('.screen ', { opacity:1, scale:1, //filter: "blur(20px)", ease: "none", scrollTrigger: { pin:false, trigger: '.screen', endTrigger: '.screen', start: 'top 60%', end: 'top 60%', toggleActions: "play none none reverse", markers: false, scrub:1 } }) // Reset screen if page refresh mid-animation gsap.set('.screen', { opacity:1, scale:1, x:0, y:0, xPercent:0 }) // Pin Screen gsap.to('.screen', { ease: "none", scrollTrigger: { pin:true, trigger: '.screen', endTrigger: '.screen-trigger-end', start: 'bottom 90%', end: 'bottom bottom', toggleActions: "play none none reverse", markers: false, scrub:1, pinSpacing:false } }) // Reset screen if page refresh mid-animation gsap.set('.screen', { opacity:1, scale:1, transformOrigin: '50% 100%', xPercent:0, x:0, y:0 }) //Move Screen Back gsap.to('.screen', { xPercent:30, y:-100, scale:.4, //y:80, //filter: "blur(20px)", ease: "none", scrollTrigger: { trigger: '.headline2', start: 'top 60%', end: 'top 60%', toggleActions: "play none none reverse", markers: false, scrub:1 } }) // Reset screen if page refresh mid-animation gsap.set('.screen', { opacity:0, scale:.4, x:0, y:-100, xPercent:30 }) // Exit Main title gsap.to('.main-title', { y:-150, opacity:0, //filter: "blur(20px)", ease: "none", scrollTrigger: { trigger: '.headline2', start: 'top center', end: 'bottom center', toggleActions: "play none none reverse", markers: false, scrub:1 } }) gsap.set('.headline2 h2', { opacity:0, }) // Phone Headline Opactity gsap.to('.headline2 h2', { ease: "none", opacity:1, scrollTrigger: { pin:false, trigger: '.headline2', start: 'top +=130', end: 'top +=150', toggleActions: "play none none reverse", markers: false, scrub:1 } }) // Reset phone and screen if page refresh mid-animation gsap.set('.screen', { xPercent:30, y:-100, x:0, scale:.4, zIndex:0, opacity:1 }) gsap.set('.phone', { scale:.7, transformOrigin: '50% 100%', opacity:0 //y:-100, }) // Phone Headline Pin gsap.to('.headline2 h3', { //filter: "blur(20px)", ease: "none", scrollTrigger: { pin:true, duration:.5, pinSpacing:false, trigger: '.headline2', endTrigger: ".phone-end-trigger", start: 'top 20%', end: 'top 20%', toggleActions: "play none none reverse", markers: false, scrub:1 } }) gsap.set('.phone', { scale:.7, transformOrigin: '50% 100%', opacity:0 //y:-100, }) // Phone Scale gsap.to('.phone', { //filter: "blur(20px)", ease: "none", scale:1, opacity:1, scrollTrigger: { trigger: '.phone', start: 'bottom 105%', end: 'bottom 95%', toggleActions: "play none none reverse", markers: false, scrub:1 } }) gsap.set('.phone', { scale:1, transformOrigin: '50% 100%', opacity:1 //y:-100, }) // Phone Pin gsap.to('.phone', { //filter: "blur(20px)", ease: "none", scrollTrigger: { pin:true, pinSpacing:false, trigger: '.phone', endTrigger: ".phone-end-trigger", start: 'bottom 90%', end: 'bottom 70%', toggleActions: "play none none reverse", markers: false, scrub:1 } }) // Move the desktop screen back to center gsap.to('.screen ', { scale:1, xPercent:0, y:0, zIndex:1, //filter: "blur(20px)", ease: "none", scrollTrigger: { trigger: '.phone-end-trigger', start: 'top 60%', end: 'top 60%', toggleActions: "play none none reverse", markers: false, scrub:1, onEnter: () => myEnterFunc("onEnter"), onEnterBack: () => myEnterBackFunc("onEnterBack") } }) gsap.set('.phone', { scale:1, transformOrigin: '50% 100%', opacity:1 }) // We're done with the phone, but not done with the show... The Screen Trigger pin is still active... gsap.to('.phone ', { scale:.4, opacity:0, ease: "none", scrollTrigger: { trigger: '.phone-end-trigger', start: 'bottom 70%', end: 'bottom 70%', toggleActions: "play none none reverse", markers: false, scrub:1 } }) // Box / Highlight Animations const sections = gsap.utils.toArray('.highlight') sections.forEach((sec, i) => { const headline = sec gsap.set(headline, { y:50, opacity:0, zIndex:2 }) gsap.to(headline, { y:-50, //filter: "blur(20px)", ease: "none", scrollTrigger: { trigger: headline, start: 'top 70%', end: 'top 30%', toggleActions: "play none none reverse", markers: false, scrub:1 } }) gsap.to(headline, { opacity:1, //filter: "blur(20px)", ease: "none", scrollTrigger: { trigger: headline, start: 'top 70%', end: 'top 65%', toggleActions: "play none none reverse", markers: false, scrub:1 } }) }); } // End MatchedMedia }) // End Home Animation function myEnterFunc(message){ $(".screenHolder img").attr("src", "/img/screen2.png"); } function myEnterBackFunc(message){ $(".screenHolder img").attr("src", "/img/screen1.png"); }