// 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, }) }) const promotingStabilityMarker = document.querySelector("#promoting-stability-marker"); const tlPS = gsap.timeline().from("#imgPS1", {opacity: 0}) .from("#imgPS2", {opacity: 0}) .from("#imgPS3", {opacity: 0}) .from("#imgPS4", {opacity: 0}) .from("#imgPS5", {opacity: 0}); ScrollTrigger.create({ trigger: promotingStabilityMarker, start: "top center", toggleActions: "play none none reverse", animation: tlPS, }) let policyChangesTrigger = document.querySelector("#policy-changes-trigger"); let elementP2 = document.querySelector("#imgP2"); let elementP3 = document.querySelector("#imgP3"); let elementP4 = document.querySelector("#imgP4"); let tlP2 = gsap.timeline().from(elementP2, {opacity: 0}).to(elementP2, {opacity: 1}); let tlP3 = gsap.timeline().from(elementP3, {opacity: 0}).to(elementP3, {opacity: 1}); let tlP4 = gsap.timeline().from(elementP4, {opacity: 0}).to(elementP4, {opacity: 1}); ScrollTrigger.create({ trigger: policyChangesTrigger, start: "top 25%", toggleActions: "play none none reverse", animation: tlP2 }) ScrollTrigger.create({ trigger: policyChangesTrigger, start: "top top", toggleActions: "play none none reverse", animation: tlP3 }) ScrollTrigger.create({ trigger: policyChangesTrigger, start: "top -25%", toggleActions: "play none none reverse", animation: tlP4 }) }, //small & tablets "(min-width: 481px)and(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: "top top", //end: "bottom bottom", end: "bottom 50%", 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 promotingStabilityMarker = document.querySelector("#promoting-stability-marker"); const tlPS = gsap.timeline().from("#imgPS1", {opacity: 0}) .from("#imgPS2", {opacity: 0}) .from("#imgPS3", {opacity: 0}) .from("#imgPS4", {opacity: 0}) .from("#imgPS5", {opacity: 0}); ScrollTrigger.create({ trigger: promotingStabilityMarker, start: "top center", toggleActions: "play none none reverse", animation: tlPS, }) let policyChangesTrigger = document.querySelector("#policy-changes-trigger"); let elementP2 = document.querySelector("#imgP2"); let elementP3 = document.querySelector("#imgP3"); let elementP4 = document.querySelector("#imgP4"); let tlP2 = gsap.timeline().from(elementP2, {opacity: 0}).to(elementP2, {opacity: 1}); let tlP3 = gsap.timeline().from(elementP3, {opacity: 0}).to(elementP3, {opacity: 1}); let tlP4 = gsap.timeline().from(elementP4, {opacity: 0}).to(elementP4, {opacity: 1}); ScrollTrigger.create({ trigger: policyChangesTrigger, start: "top 25%", toggleActions: "play none none reverse", animation: tlP2 }) ScrollTrigger.create({ trigger: policyChangesTrigger, start: "top top", toggleActions: "play none none reverse", animation: tlP3 }) ScrollTrigger.create({ trigger: policyChangesTrigger, start: "top -25%", toggleActions: "play none none reverse", animation: tlP4 }) }, // phones "(max-width: 480px)": 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, duration: .8}).to(elementContent, {opacity: 1, duration: .8}); // 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 80%", end: "bottom 80%", toggleActions: "play none none reverse", toggleClass: {targets: elementContent, className: "is-active"}, animation: tl, //markers: true }) }) const promotingStabilityMarker = document.querySelector("#promoting-stability-marker"); const tlPS = gsap.timeline().from("#imgPS1", {opacity: 0}) .from("#imgPS2", {opacity: 0}) .from("#imgPS3", {opacity: 0}) .from("#imgPS4", {opacity: 0}) .from("#imgPS5", {opacity: 0}); ScrollTrigger.create({ trigger: promotingStabilityMarker, start: "top 80%", end: "bottom 80%", toggleActions: "play none none reverse", animation: tlPS, }) let policyChangesTrigger = document.querySelector("#policy-changes-trigger"); let elementP2 = document.querySelector("#imgP2"); let elementP3 = document.querySelector("#imgP3"); let elementP4 = document.querySelector("#imgP4"); let tlP2 = gsap.timeline().from(elementP2, {opacity: 0}).to(elementP2, {opacity: 1}); let tlP3 = gsap.timeline().from(elementP3, {opacity: 0}).to(elementP3, {opacity: 1}); let tlP4 = gsap.timeline().from(elementP4, {opacity: 0}).to(elementP4, {opacity: 1}); ScrollTrigger.create({ trigger: policyChangesTrigger, start: "top 25%", toggleActions: "play none none reverse", animation: tlP2 }) ScrollTrigger.create({ trigger: policyChangesTrigger, start: "top top", toggleActions: "play none none reverse", animation: tlP3 }) ScrollTrigger.create({ trigger: policyChangesTrigger, start: "top -25%", toggleActions: "play none none reverse", animation: tlP4 }) } }); window.addEventListener("resize", () => ScrollTrigger.refresh());