jedifunk

@akapowl yes! I also just set the unpinned content to position:relative and that also seemed to help, although it would flow over top the image of the final pinned section sometimes. this might solve for that too.

@ZachSaucier well, perhaps that's part of the problem too ... it seems fine when i make a codepen for it, and i'm wondering if its because of the images not being there. here's a codepen: https://cdpn.io/jedifunk/debug/poyBLea/LDkmdEYnaLZA edit: attached is an image for issue #1

So I'm wondering how to handle this situation, and i'm not sure if its the unique scenario of at play or if i'm missing something with ScrollTrigger. http://dev.yamamotoqa.com/proforce/ So my animation starts off pinned, and the pinned container is set to be 100vh and 100vw. The issue comes at the end when the container is unpinned, and the remaining content starts to be available. Couple of things happen: 1. if the browser height is too short, the first part of the unpinned content doesn't show or is cut off by the pinned container 2. at a mobile size the unpinned content ends up scrolling over top the pinned container Any help is very much appreciated!

Finding that the scrollTrigger is unable to reach the onLeaveBack state ... guessing its because the trigger is set to 100vh. is there a way to set another trigger that sits like 20px from the top that is only there to retrigger the intro animation?

Am having trouble trying to drop the current development back into codepen, since I don't have a pro account and linking the images is important to this layout.. Instead I'm attaching the JS so you can at least see what I'm doing from a code standpoint. http://dev.yamamotoqa.com/proforce/ @akapowl wondering if instead of setting the initial state of the intro animations in my CSS file, if i could use GSAP to set those ... would that help in reanimating them? gsap.registerPlugin(ScrollTrigger); let intro = gsap.timeline(); //intro.duration(4); intro .to(".intro .bkg", {duration: 1, autoAlpha: 1}) .to(".intro .rt-logo", {autoAlpha: 1}) .to(".ih", {autoAlpha: 1}) ScrollTrigger.saveStyles(".div"); ScrollTrigger.matchMedia({ // desktop "(min-width: 601px)": function () { // setup animations and ScrollTriggers for screens 800px wide or greater (desktop) here... // These ScrollTriggers will be reverted/killed when the media query doesn't match anymore. // Note // .div was set to 'position: fixed' in your CSS for widths above 600px and to 'position: relative' for widths below 600px var sections = gsap.utils.toArray(".div"); var fadeInOut = gsap.timeline({ paused: true, timeScale: .1 }); fadeInOut .addLabel("intro-visible") .to([".intro .rt-logo", ".ih"], { autoAlpha: 0, delay: 2 }) .to(".brand-row .rt-logo", { autoAlpha: 1}) .to(".s1 .bkg", { autoAlpha: 1 }) .to(".n1", { autoAlpha: 1}) .to(".h1", { autoAlpha: 1 }) .to(".c1", { autoAlpha: 1}) .addLabel("s1-visible") .to([".intro .bkg", ".n1", ".h1", ".c1"], { autoAlpha: 0, delay: 2 }) .to(".s2 .bkg", { autoAlpha: 1 }) .to(".n2", { autoAlpha: 1}) .to(".h2", { autoAlpha: 1 }) .to(".c2", { autoAlpha: 1}) .addLabel("s2-visible") .to([".s1 .bkg", ".n2", ".h2", ".c2"], { autoAlpha: 0, delay: 2 }) .to(".s3 .bkg.b3-1", { autoAlpha: 1 }) .to(".n3", { autoAlpha: 1}) .to(".h3", { autoAlpha: 1 }) .to(".c3", { autoAlpha: 1}) .addLabel("s3-visible") .to([".s2 .bkg", ".c3"], { autoAlpha: 0, delay: 2}) .to(".n3", { x:-385}) .to(".h3", { y:-115 }) .to(".details", { autoAlpha: 1 }) .to(".s3 .bkg.b3-2", { autoAlpha: 1}) .to(".i1", { autoAlpha: 1}) .to(".i1", { autoAlpha: 0, delay: 2}) .to(".s3 .bkg.b3-3", { autoAlpha: 1}) .to(".i2", { autoAlpha: 1}) .to(".i2", { autoAlpha: 0, delay: 2}) .to(".s3 .bkg.b3-4", { autoAlpha: 1}) .to(".i3", { autoAlpha: 1}) .to(".i3", { autoAlpha: 0, delay: 2}) .to('.s3', { autoAlpha: 0}) .to('.b4', { autoAlpha: 1}) .to(".n4", { autoAlpha: 1}) .to('.h4', { autoAlpha: 1}) .to(".c4", { autoAlpha: 1}) .addLabel("s4-visible") ; ScrollTrigger.create({ trigger: "#container", pin: true, start: () => "top top", end: () => "+=" + (window.innerHeight * sections.length - window.innerHeight), scrub: .5, animation: fadeInOut, invalidateOnRefresh: true, // markers:true, // onLeaveBack: () => { // intro.reverse(); // } }); }, // mobile "(max-width: 600px)": function () { // The ScrollTriggers created inside these functions are segregated and get // reverted/killed when the media query doesn't match anymore. }, // all all: function () { // ScrollTriggers created here aren't associated with a particular media query, // so they persist. } });

@akapowl first bit worked a charm ... thought i had already adjusted the height! ?‍♂️ i'll try to throw that link into a codepen ... it probably won't have all the images, but at least you could see the animation JS

@akapowl hey - couple questions (if these should be separate threads let me know ... not sure how mods like things around here). http://dev.yamamotoqa.com/proforce/ 1. With the pinning on, how to i remove the massive gap between the end of the pin and the new content i've added below the pin container? 2. I've also added a separate animation at the top of the page that runs on page load... how would i go about reversing it, via scrolling, when a user scrolls back up? its not part of the current scrollTrigger (since it runs on load). thanks for any guidance.

@ZachSaucier thanks for taking a look. in the pen i included, when the word "Headline" starts to move (negative y transform), if you stop scrolling, the text completely disappears. looks like maybe its just Firefox? I tested in chrome and it works there.

oh, i thought i had pinning turned on previously, but maybe when you helped me get my first part sorted you turned that off... i'll look at that again and see where i went wrong. thanks.

@akapowl if i needed a section below my pinned area, how would i do that ... given that the pinned area is set to be full browser width/height? simply unpinning the container doesn't seem to be enough.

Running into something today and I'm not sure if I'm doing something wrong, or if its a bug in GSAP, or just something I have to work around but ... I have this headline that is stylized with a linear-gradient background, so i have color:transparent set... this is all fine, until I attempt to use a gsap.to function to move its location, at which point when the animation stops, the text disappears. Turning off the transparency makes the text show again, but it no longer has the gradient. Am I doing something wrong or am I missing something?

would you suggest that if i need different timings and animations in each section that i create separate timelines for each?

@akapowl Thanks for looking at this. I'll see if I can fill in the blanks on the other items i need. I think I failed to mention that the black background stays for all slides and the content inside will fade in/out as the user scrolls, but I was having such an issue with getting the basic concept to work. I'll see where this leads me. Thanks again.

Hey all, Worked with GSAP before, but this is a new ask for me. Looking to build a page that has 4 sections, where each section is full screen. Main things I am looking to figure out are - Fade in/out each section on scroll - Turn off gsap/animations on mobile and have the sections be like normal divs I've got a start in this codepen, but can't figure out how to get the next section to fade into the trigger container. Any help is appreciated. Bryce