DeltaFrog

So clean! Thanks Craig.

Hey Craig, what's the cleanest way to apply the same animation to another panel and text a little further down the page? Can I override the default trigger and use the same timeline or should I create a new timeline? https://codepen.io/deltafrogcraft/pen/vYpPMja/4c881a587077bdd68d6c43cffb5d5418

Very helpful, thanks Craig.

"you'd want to add the ScrollTrigger to the timeline rather than individual tweens" ohhhh I got it. https://codepen.io/chriscalabrese/pen/vYpPMja/4c881a587077bdd68d6c43cffb5d5418

Thanks Craig! I'll take another stab at it. If I still can't get it I'll set up a codepen.

Hi All, How do I merge these two codes so the SplitText timeline restarts as well when the ScrollTrigger toggleActions fire? Currently this ScrollTrigger is working by itself: gsap.from("#panel1ID", { scrollTrigger: { trigger: "#panel1ID", toggleActions: "restart pause pause pause" }, x: -300, duration: 1, ease: "expo.out" }); This is the SplitText timeline which is also working by itself. let animation = gsap.timeline({}) function init() { let split = new SplitText("#panelTitleID1", {type:"chars"}) animation.from(split.chars, { opacity:0, y:50, ease:"back(4)", stagger:{ from:"start", //try "center" and "edges" each:0.05 } }) } window.addEventListener("load", init) I tried to merge them like this: let animation = gsap.timeline({}) function init() { let split = new SplitText("#panelTitleID1", {type:"chars"}) animation.from(split.chars, { scrollTrigger: { trigger: "#panel1ID", toggleActions: "restart pause pause pause" }, opacity:0, y:50, ease:"back(4)", stagger:{ from:"start", //try "center" and "edges" each:0.05 } }) } window.addEventListener("load", init) Can anyone help?

You got it, Jack!

Ok thanks Jack! I can't show the site right now but once we launch it, it will be easier to illustrate the issues I'm having.

Hi all, I have a nice GSAP Scroll Trigger setup in a Word Press site and everything is working but I'm a bit confused as to what the best practice is for pinning the entire site while my animation scrubs through its timeline. I've set the pin to "body" "#wrap" as well as various parent divs of the section where my animated elements live but they all seem to produce undesirable results on one device or another. I know this is a a bit vague so any thoughts are greatly appreciated. Thanks!

Craig is 100% super hero.

I might cry, thank you so so so much Craig.

Hi The Old Designer, I played with adding flex but could not get the result I desired. If you can get it to work in a code pen I'll be forever grateful. This seems so simple but turning into a big roadblock for me.

Thanks Blake, super appreciated. I changed the child width to 100% and added a px height to the parent. However the parent height is a static number so it only matches the Childs height when the window is at an specific width, how do I get the child and parent to always match in height? I tried adding a 100% height to the parent but that doesn't seem to work as expected. When the window width changes the charts resize their height but the parent does not so the layout is always broken. What am I missing here? .parent { position: relative; outline: 6px dotted orange; height: 300px; // height: 100%; } .childClass { position: absolute; width: 100% } How do I get the parent to scale to the same height as its content? Second Code Pen Screen-Capture.m4v

Hi all, I know this isn't a Greensock issue but I've been trying to figure it out for 2 days and I'm not sure where to ask this type of question. Feels like its a really simple thing but I am just not a css/html person. :S Can anyone recommend a good html/css forum? I'm going to illustrate my problem here just incase somebody has a quick answer. Thank you!! Ok... My code pen has 4 divs and I want to layer them on top of each other so I can fade them in and out using greensock. I can get the divs to layer on top of each other by changing their css to position: absolute instead of relative but doing that removes the 4 divs from the parent/document flow so the rest of the elements on the page just go behind the divs instead of under them. How can I group and layer Divs on top of each other while also maintaining the inline flow? Currently it looks like this: This is the desired result, 4 divs layered on top of each other with the parent div still maintaining its height. Big Thanks!

Got it! Thanks Jack!

Thanks Jack, you are amazing, Ill give it a try.

Howdy yall, I'm trying to add a matchMedia() function to my code but when I move the tl into the function it seems to breaks the js. My goal is to be able to setup different trigger start values for mobile devices. What am I doing wrong here? This is the current state of the code: gsap.registerPlugin(ScrollTrigger); ScrollTrigger.matchMedia({ // large "(min-width: 960px)": function() { // setup animations and ScrollTriggers for screens 960px wide or greater... // These ScrollTriggers will be reverted/killed when the media query doesn't match anymore. }, // medium "(min-width: 600px) and (max-width: 959px)": function() { // The ScrollTriggers created inside these functions are segregated and get // reverted/killed when the media query doesn't match anymore. }, // small "(max-width: 599px)": 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. } }); let tl = gsap.timeline({ scrollTrigger: { trigger: ".chartsContainer", start: "top 25%", // [trigger] [scroller] positions end: "3000px 3%", // [trigger] [scroller] positions markers: "true", // only during development! scrub: 1, //onUpdate: (self) => console.log(self.progress.toFixed(2)), snap: { snapTo: [0.00, 0.20, 0.40, 0.60, 0.80, 1.00,], duration: 0.01, ease: "strong" }, pin: "#wrap" // "body" or just "true" no quotes // or selector or element to pin } }); tl.timeScale(3) tl.from(".chart1", {scale: 0, duration: 1}) tl.to(".chart1", {autoAlpha: 1, duration: 1},"<") // "<" align start of tween with previous tween tl.to("#btn1 > div > a", {color: "#9365F0", duration: .2},"<") tl.to(".chart1", {autoAlpha: 1, duration: 1},"<") // SNAP 1 tl.to(".chart1", {autoAlpha: 0, duration: 1}) tl.to(".chart2", {autoAlpha: 1, duration: 1},"<") tl.to("#descriptionID_1", {autoAlpha: 0, duration: 1 },"<") tl.to("#headingID_1", {autoAlpha: 0, duration: 1},"<") tl.to("#headingID_2", {autoAlpha: 1, duration: 1},"<") tl.to("#descriptionID_2", {autoAlpha: 1, duration: 1},"<") tl.to("#btn1 > div > a", {color: "white", duration: .2},"<") tl.to("#btn2 > div > a", {color: "#9365F0", duration: .2},"<") // SNAP 2 tl.to(".chart2", {autoAlpha: 0, duration: 1}) tl.to("#headingID_2", {autoAlpha: 0, duration: 1},"<") tl.to("#descriptionID_2", {autoAlpha: 0, duration: 1},"<") tl.to(".chart3", {autoAlpha: 1, duration: 1},"<") tl.to("#headingID_3", {autoAlpha: 1, duration: 1},"<") tl.to("#descriptionID_3", {autoAlpha: 1, duration: 1},"<") tl.to("#btn2 > div > a", {color: "white", duration: .2},"<") tl.to("#btn3 > div > a", {color: "#9365F0", duration: .2},"<") // SNAP 3 tl.to(".chart3", {autoAlpha: 0, duration: 1}) tl.to("#descriptionID_3", {autoAlpha: 0, duration: 1},"<") tl.to("#headingID_3", {autoAlpha: 0, duration: 1},"<") tl.to(".chart4", {autoAlpha: 1, duration: 1},"<") tl.to("#headingID_4", {autoAlpha: 1, duration: 1},"<") tl.to("#descriptionID_4", {autoAlpha: 1, duration: 1},"<") tl.to("#btn3 > div > a", {color: "white", duration: .2},"<") tl.to("#btn4 > div > a", {color: "#9365F0", duration: .2},"<") tl.to(".chart4", {scale: 0, duration: 1}) tl.to(".chart4", {autoAlpha: 0, duration: 1},"<") tl.to("#btn4 > div > a", {color: "white", duration: 1},"<") Here is what I tried: gsap.registerPlugin(ScrollTrigger); ScrollTrigger.matchMedia({ // large "(min-width: 960px)": function() { // setup animations and ScrollTriggers for screens 960px wide or greater... // These ScrollTriggers will be reverted/killed when the media query doesn't match anymore. let tl = gsap.timeline({ scrollTrigger: { trigger: ".chartsContainer", start: "top 25%", // [trigger] [scroller] positions end: "3000px 3%", // [trigger] [scroller] positions markers: "true", // only during development! scrub: 1, //onUpdate: (self) => console.log(self.progress.toFixed(2)), snap: { snapTo: [0.00, 0.20, 0.40, 0.60, 0.80, 1.00,], duration: 0.01, ease: "strong" }, pin: "#wrap" // "body" or just "true" no quotes // or selector or element to pin } }); }, // medium "(min-width: 600px) and (max-width: 959px)": function() { // The ScrollTriggers created inside these functions are segregated and get // reverted/killed when the media query doesn't match anymore. }, // small "(max-width: 599px)": 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. tl.timeScale(3) tl.from(".chart1", {scale: 0, duration: 1}) tl.to(".chart1", {autoAlpha: 1, duration: 1},"<") // "<" align start of tween with previous tween tl.to("#btn1 > div > a", {color: "#9365F0", duration: .2},"<") tl.to(".chart1", {autoAlpha: 1, duration: 1},"<") // SNAP 1 tl.to(".chart1", {autoAlpha: 0, duration: 1}) tl.to(".chart2", {autoAlpha: 1, duration: 1},"<") tl.to("#descriptionID_1", {autoAlpha: 0, duration: 1 },"<") tl.to("#headingID_1", {autoAlpha: 0, duration: 1},"<") tl.to("#headingID_2", {autoAlpha: 1, duration: 1},"<") tl.to("#descriptionID_2", {autoAlpha: 1, duration: 1},"<") tl.to("#btn1 > div > a", {color: "white", duration: .2},"<") tl.to("#btn2 > div > a", {color: "#9365F0", duration: .2},"<") // SNAP 2 tl.to(".chart2", {autoAlpha: 0, duration: 1}) tl.to("#headingID_2", {autoAlpha: 0, duration: 1},"<") tl.to("#descriptionID_2", {autoAlpha: 0, duration: 1},"<") tl.to(".chart3", {autoAlpha: 1, duration: 1},"<") tl.to("#headingID_3", {autoAlpha: 1, duration: 1},"<") tl.to("#descriptionID_3", {autoAlpha: 1, duration: 1},"<") tl.to("#btn2 > div > a", {color: "white", duration: .2},"<") tl.to("#btn3 > div > a", {color: "#9365F0", duration: .2},"<") // SNAP 3 tl.to(".chart3", {autoAlpha: 0, duration: 1}) tl.to("#descriptionID_3", {autoAlpha: 0, duration: 1},"<") tl.to("#headingID_3", {autoAlpha: 0, duration: 1},"<") tl.to(".chart4", {autoAlpha: 1, duration: 1},"<") tl.to("#headingID_4", {autoAlpha: 1, duration: 1},"<") tl.to("#descriptionID_4", {autoAlpha: 1, duration: 1},"<") tl.to("#btn3 > div > a", {color: "white", duration: .2},"<") tl.to("#btn4 > div > a", {color: "#9365F0", duration: .2},"<") tl.to(".chart4", {scale: 0, duration: 1}) tl.to(".chart4", {autoAlpha: 0, duration: 1},"<") tl.to("#btn4 > div > a", {color: "white", duration: 1},"<") } });

snap: { snapTo: [0.20, 0.40, 0.60, 0.80], duration: 0.01, ease: "none" }, I got it right after I posted, I needed to use an array.

Hi yall, How do I get my timeline to snap to labels or specific times? My current setup snaps to 0.33, 0.66 and 0.99. I'd like it to go to the labels below. snap: { snapTo: 0.33, duration: 0.01, ease: "none" }, Here are the labels/times I want to target. tl.addLabel("chart1", 0.20); tl.addLabel("chart2", 0.40); tl.addLabel("chart3", 0.60); tl.addLabel("chart4", 0.80); I tried this but getting an error. What am I doing wrong here? snap: { snapTo: 0.20, 0.40, 0.60, 0.80, duration: 0.01, ease: "none" },

Hi yall, Is it possible to change the start position on scrollTrigger so its a different location on a mobile device like an iPad?

Thanks Blake, you rock! I have some buttons that take the users to different spots in the timeline but I want the mouse scrub of the timeline to toggle a class on the buttons also. Does this look right? I can just drop this in my timeline? .add(() => "#btn1 > div > a".classList.toggle(".lqd-cc__active-links")) let tl = gsap.timeline({ scrollTrigger: { trigger: ".centerMeHorz", start: "center 40%", // [trigger] [scroller] positions end: "6000px 3%", // [trigger] [scroller] positions markers: "true", // only during development! scrub: 1, //onUpdate: (self) => console.log( self.progress.toFixed(2) ), snap: { snapTo: 0.33, duration: 0.01, ease: "none" }, pin: "#wrap" // or just "true" no quotes // or selector or element to pin } }); tl.to(".chart1", {autoAlpha: 0, duration: 1}) tl.to(".chart2", {autoAlpha: 1, duration: 1},"-=1") tl.to(".CopyID1", {autoAlpha: 0, duration: 1 },"-=1") tl.to(".titleID1", {autoAlpha: 0, duration: 1},"-=1") tl.to(".CopyID2", {autoAlpha: 1, duration: 1},"-=1") tl.to(".titleID2", {autoAlpha: 1, duration: 1},"-=1") tl.to(".chart2", {autoAlpha: 0, duration: 1}) tl.to(".titleID2", {autoAlpha: 0, duration: 1},"-=1") tl.to(".CopyID2", {autoAlpha: 0, duration: 1},"-=1") tl.to(".chart3", {autoAlpha: 1, duration: 1},"-=1") tl.to(".CopyID3", {autoAlpha: 1, duration: 1},"-=1") tl.to(".titleID3", {autoAlpha: 1, duration: 1},"-=1") tl.to(".chart3", {autoAlpha: 0, duration: 1}) tl.to(".CopyID3", {autoAlpha: 0, duration: 1},"-=1") tl.to(".titleID3", {autoAlpha: 0, duration: 1},"-=1") tl.to(".chart4", {autoAlpha: 1, duration: 1},"-=1") tl.to(".titleID4", {autoAlpha: 1, duration: 1},"-=1") tl.to(".CopyID4", {autoAlpha: 1, duration: 1},"-=1")

Can I apply a class to an object using gsap? This is the class: .lqd-cc__active-links I want to target the text in "#btns1". This is the JS path the browser gives me: document.querySelector("#btn1 > div > a") I see toggleClass but not sure how to use it. Can anyone point me in the right direction? Thanks!!!

Thanks Jack! The code works.

Howdy all! Can I run a function with parameters when the user scrubs the play head over a label? I have created some labels but could also leverage the progress times of 0.00, 0.33, 0.66 and 0.99. How do I get a label or time to call a function with different parameters? Here are two examples of how I want to call the function: changeColors("#9365F0", "white", "white", "white"); changeColors("white", "white", "white", "#9365F0"); let tl = gsap.timeline({ scrollTrigger: { trigger: ".centerMeHorz", start: "10% 30%", // [trigger] [scroller] positions end: "6000px 10%", // [trigger] [scroller] positions markers: "true", // only during development! scrub: 1, onUpdate: (self) => console.log( self.progress.toFixed(2) ), snap: { snapTo: 0.33, duration: 0.01, ease: "none" }, pin: "#wrap" // use wrap for pinning everything in wordpress } }); tl.addLabel("start", 0); tl.addLabel("step2", 1); tl.addLabel("step3", 2); tl.addLabel("step4", 3);

Seems like "body" is working but if I run into any problems I'll leverage this, thanks Blake!