// gsap.defaults({overwrite: 'auto'}); gsap.registerPlugin(ScrollTrigger); //ScrollTrigger.normalizeScroll(true); // enable //first param in start refers to trigger element, second refers to viewport. top top means when the top of the trigger hits the top of the viewport // Get all the pin containers and for each, when the top of the pin container hits the top of the viewport, // pin its associated right-content block. This makes the images stay in place while you scroll. // ScrollTrigger.saveStyles(".mobile, .desktop"); //matchMedia is how you do media queries - make triggers responsive ScrollTrigger.matchMedia({ //desktop "(min-width: 769px)": function() { const contentBlocks = document.querySelectorAll(".content-block"); contentBlocks.forEach((element) => { let contentVisuals = element.querySelector(".content-block-visuals-inner"); ScrollTrigger.create({ trigger: element, start: "top top", //end: "bottom bottom", end: "bottom 85%", toggleActions:"play none none reverse", pin: contentVisuals, //pinSpacing:true, anticipatePin: 1, //markers:true }) }) // Get all the content markers (ie triggers) and for each, get its associated marker content. // Set up a timeline for the animation of the content to move from 1500px down to 0 (move images up the page). const contentMarkers = document.querySelectorAll(".content-block-text__marker"); contentMarkers.forEach((element) => { let elementContent = document.querySelector(`#${element.dataset.markerContent}`); let tl = gsap.timeline().from(elementContent, {opacity: 0, display:"none"}).to(elementContent, {opacity: 1, display:"block"}); // Create a scroll trigger for each content marker (trigger). When the top of the trigger hits the center of the viewport, // play the timeline that was set up to change the opacity to 1. ScrollTrigger.create({ trigger: element, start: "top center", toggleActions: "play none none reverse", toggleClass: {targets: elementContent, className: "is-active"}, animation: tl, }) }) }, // phones "(max-width: 768px)": function() { const contentBlocks = document.querySelectorAll(".content-block"); contentBlocks.forEach((element) => { let contentVisuals = element.querySelector(".content-block-visuals-inner"); ScrollTrigger.create({ trigger: element, start: "bottom 80%", //end: "bottom bottom", end: "bottom 80%", toggleActions:"play none none reverse", pin: contentVisuals, //pinSpacing:true, anticipatePin: 1, //markers:true }) }) // Get all the content markers (ie triggers) and for each, get its associated marker content. // Set up a timeline for the animation of the content to move from 1500px down to 0 (move images up the page). const contentMarkers = document.querySelectorAll(".content-block-text__marker"); contentMarkers.forEach((element) => { let elementContent = document.querySelector(`#${element.dataset.markerContent}`); let tl = gsap.timeline().from(elementContent, {opacity: 0}).to(elementContent, {opacity: 1}); // Create a scroll trigger for each content marker (trigger). When the top of the trigger hits the center of the viewport, // play the timeline that was set up to change the opacity to 1. ScrollTrigger.create({ trigger: element, start: "top center", toggleActions: "play none none reverse", toggleClass: {targets: elementContent, className: "is-active"}, animation: tl, }) }) const homepageSection1Marker = document.querySelector("#homepageSection1-marker"); const tlHS1 = gsap.timeline().from("#img1", {opacity: 0}) .from("#img3", {opacity: 0}) .from("#img4", {opacity: 0}) .from("#img5", {opacity: 0}) .from("#img6", {opacity: 0}); ScrollTrigger.create({ trigger: homepageSection1Marker, start: "top 80%", end: "bottom 80%", toggleActions: "play none none reverse", animation: tlHS1, //markers:true }) const homepageSection2Marker = document.querySelector("#homepageSection2-marker"); const tlHS2 = gsap.timeline().from("#img7", {opacity: 0}) .from("#img8", {opacity: 0}) .from("#img9", {opacity: 0}); ScrollTrigger.create({ trigger: homepageSection2Marker, start: "top 80%", end: "bottom 80%", toggleActions: "play none none reverse", animation: tlHS2, //markers:true }) const homepageSection3Marker = document.querySelector("#homepageSection3-marker"); const tlHS3 = gsap.timeline().from("#img10", {opacity: 0}); ScrollTrigger.create({ trigger: homepageSection3Marker, start: "top 80%", end: "bottom 80%", toggleActions: "play none none reverse", animation: tlHS3, //markers:true }) const homepageSection4Marker = document.querySelector("#homepageSection4-marker"); const tlHS4 = gsap.timeline().from("#img11", {opacity: 0}) .from("#img12", {opacity: 0}) .from("#img13", {opacity: 0}) .from("#img14", {opacity: 0}); ScrollTrigger.create({ trigger: homepageSection4Marker, start: "top 80%", end: "bottom 80%", toggleActions: "play none none reverse", animation: tlHS4, //markers:true }) } }); window.addEventListener("resize", () => ScrollTrigger.refresh());