neontrenton

Hello. I'm using Scrolltrigger for achieving horizontal scroll sections here: https://sco2023p3.wpengine.com/ It works perfectly whenever I hard refresh the page. However, I'm running into a minor issue when refreshing the page (not a hard refresh). After refreshing the page, these sections "jump" slightly whenever you scroll to them. Not sure what is causing this since my browser hasn't resized or anything. I tried replicating the issue in Codepen but can't seem to replicate it. Here's my current JS. Does anyone have an idea of what might be causing this issue and how I can fix it? gsap.registerPlugin(ScrollTrigger); ScrollTrigger.matchMedia({ // large "(min-width: 992px)": 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. // Value Props Section Animation let containerhrz1 = document.querySelector(".hrz-container.hrz1"); let sectionshrz1 = gsap.utils.toArray(".hrz-container.hrz1 .doc"); let tl1 = gsap.timeline({ scrollTrigger: { pin: true, scrub: 1, trigger: containerhrz1, invalidateOnRefresh: true, end: "+=500%" } }); tl1.to(sectionshrz1, { x: () => -(containerhrz1.scrollWidth - document.documentElement.clientWidth) + "px", duration: 1, ease: "none" }, 0.05); tl1.to({}, {duration: 0.1}); // Steps Section Animation let containerhrz2 = document.querySelector(".hrz-container.hrz2"); let sectionshrz2 = gsap.utils.toArray(".hrz-container.hrz2 .review"); let tl2 = gsap.timeline({ scrollTrigger: { pin: true, scrub: 1, trigger: containerhrz2, invalidateOnRefresh: true, end: "+=500%" } }); tl2.to(sectionshrz2, { x: () => -(containerhrz2.scrollWidth - document.documentElement.clientWidth) + "px", ease: "none" }, 0.05); tl2.to({}, {duration: 0.1}); // add some padding at the end. // Steps Section Animation let containerhrz3 = document.querySelector(".hrz-container.hrz3"); let sectionshrz3 = gsap.utils.toArray(".hrz-container.hrz3 .step"); let tl3 = gsap.timeline({ scrollTrigger: { pin: true, scrub: 1, trigger: containerhrz3, invalidateOnRefresh: true, //end: () => "+=" + (containerhrz2.scrollWidth - document.documentElement.clientWidth), end: "+=500%" } }); tl3.to(sectionshrz3, { x: () => -(containerhrz3.scrollWidth - document.documentElement.clientWidth) + "px", ease: "none" }, 0.05); tl3.to({}, {duration: 0.1}); // add some padding at the end. }, });

LOL I completely spaced on this being Scrollmagic. Anywhere you could point me to accomplish something similar to this with ScrollTrigger?

Hello. I'm working on a scrollmagic section with pinning and I'm curious if there's a way to have these headlines (Orthodontist, Family-Man, Leader) be clickable. Basically, as you scroll, these headlines and a small paragraph become highlighted/visible but I'm wondering if there's a way you can click through each of these but also leave the scrolling functionality intact. Also, is there an easy way to vertically align the pinned items on the page? Right now, I'm using padding to move the elements where I'd like them. Thanks for any help you can give!

Hello. I have the following working properly in a hardcoded Wordpress template, however, it seems that whenever I view the site and I'm not logged in, the Scrolltrigger events do not work/fire. I've replicated the site in Codepen but cannot replicate the issues there: https://codepen.io/neontrenton/pen/vYdOppv Does anyone have any idea why this might be happening? It seems like a Wordpress-specific issue (I have no cache/cache plugins on the site) but I don't even know where to begin troubleshooting this. Here are the scripts I'm loading into the site: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script> <script src="/wp-content/themes/canvas/js/plugins/ScrollTrigger.min.js"></script> Here is an example of a ScrollTrigger event that DOES work: gsap.utils.toArray(".color-reveal").forEach((color) => { gsap.to(".color-reveal", { scrollTrigger: { trigger: color, toggleClass: "active", scrub: true, start: "top center", end: "+=100", }, }); }); Here is the specific ScrollTrigger events that DO NOT work if you aren't logged in: let containers = gsap.utils.toArray(".treatment-1"); containers.forEach((container) => { let tl = gsap.timeline({ scrollTrigger: { trigger: container, scrub: true, pin: true, start: "center center", end: "bottom top", markers: false, }, defaults: { ease: "none" } }); tl.to(container.querySelector("img"), { scale: 1, x: -500 }); tl.to(container.querySelector(".treatment__headline"), { autoAlpha: 1 }); }); // Treatment Two Animation let containerstwo = gsap.utils.toArray(".treatment-2"); containerstwo.forEach((container) => { let tl = gsap.timeline({ scrollTrigger: { trigger: container, scrub: true, pin: true, start: "center center", end: "bottom top", markers: false, }, defaults: { ease: "none" } }); tl.to(container.querySelector("img"), { scale: 1, x: 450 }); tl.to(container.querySelector(".treatment__headline"), { autoAlpha: 1 }); }); // Treatment Three Animation let containersthree = gsap.utils.toArray(".treatment-3"); containersthree.forEach((container) => { let tl = gsap.timeline({ scrollTrigger: { trigger: container, scrub: true, pin: true, start: "center center", end: "bottom top", markers: false, }, defaults: { ease: "none" } }); tl.to(container.querySelector("img"), { scale: 1, x: -500 }); tl.to(container.querySelector(".treatment__headline"), { autoAlpha: 1 }); });

No worries, I'll (probably) figure it out eventually. Thanks, Carl!

Hello, I'm having an issue with the site I'm working on. For instance, the animation below works maybe 50% of the time. The top "quarter" of the site or so seems to load fine, but below that, these animations don't always fire. I've tried refreshing, hard refreshing, clearing cache, etc. but can't seem to get them to function properly consistently. Any ideas what might be the issue? As this is a complex site, I'm not able to just rebuild/replicate the issues in Codepen, but I can provide a link to the dev url: https://hinsdale2022.wpengine.com/ I'm a GSAP beginner and love what I'm able to do with it, but unfortunately I haven't been able to consistently accomplish what I'm trying to do. Thanks for any help you can send my way! Example One: gsap.registerPlugin(SplitText, ScrollTrigger); gsap.utils.toArray(".text-reveal").forEach((title) => { const childSplit = new SplitText(title, { type: "lines, words", }); gsap.from(childSplit.lines, { scrollTrigger: { trigger: title, toggleClass: "active", }, autoAlpha: 0, ease: Back.easeInOut.config(1.7), duration: 3, y: 40, ease: "power4", delay: 0.3, opacity: 0, skewY: 0, stagger: 0.1, lazy: false, }); }); Example Two: let containers = gsap.utils.toArray(".treatment-1"); containers.forEach((container) => { let tl = gsap.timeline({ scrollTrigger: { trigger: container, scrub: true, pin: true, start: "center center", end: "bottom top", markers: false, }, defaults: { ease: "none" } }); tl.to(container.querySelector("img"), { scale: 1, x: -500 }); tl.to(container.querySelector(".treatment__headline"), { autoAlpha: 1 }); });

This is great. Thank you so much!

Hello, I have a (somewhat) working example of what I'm trying to accomplish here: https://codepen.io/neontrenton/pen/qBpeVry Essentially, when you reach a section, the photo shrinks/zooms out on scroll. This works fine but I'm trying to figure out how to, after the photo has zoomed out, show the text. As it stands, the text shows immediately upon reaching the section. Is there a straightforward way of showing the text only once the photo zoom effect is finished?

Never mind, I found the .kill(); method and that works perfecly.

Hello, I'm using ScrollSmoother and it's working great, except for one small issue. With my mobile menu, I cannot "scroll" through it vertically when it's opened. This has something to do with ScrollSmoother. Is there an easy fix for this, or some way that I can disable ScrollSmoother on mobile so my menu works properly? Here's a link to my dev site.

That worked perfectly. Thank you!

Hello, I'm trying to use SplitText and Scrolltrigger to do a staggered lettering animation like the one found here: https://codepen.io/GreenSock/pen/bGaWjpw However, if I use multiple instances of the #split-stagger, the first instance works perfectly but the rest animate way too dramatically. The letters in the #split-stagger text (other than the first instance) move down the page a lot more than they should. Is there some adjustment I can make to make these all animate properly and independently of one another? gsap.registerPlugin(ScrollTrigger, ScrollSmoother, SplitText); const smoother = ScrollSmoother.create({ wrapper: "#smoother-wrapper", content: "#smoother-content", smooth: 2, normalizeScroll: true, // prevents address bar from showing/hiding on most devices, solves various other browser inconsistencies ignoreMobileResize: true, // skips ScrollTrigger.refresh() on mobile resizes from address bar showing/hiding effects: true, preventDefault: true, }); smoother.effects("img", { speed: "auto" }); let tl = gsap.timeline(); let mySplitText = new SplitText(".split-stagger", { type: "words,chars" }); let chars = mySplitText.chars; chars.forEach((char, i) => { smoother.effects(char, { speed: 1, lag: (i + 1) * 0.1 }); });

That did it. Thanks so much!

Hello. I'm currently attempting to initiate ScrollSmoother but I'm getting the error Uncaught SyntaxError: Unexpected token 'export I'm not completely new to GSAP, having used it as well as ScrollTrigger and SplitText for a handful of projects, but I'm for some reason unable to get ScrollSmoother to work properly. Any ideas why this would be happening? I have my html set up properly, with the entire site wrapped in #smoother-wrapper and the content wrapped in #smoother-content. I'm also seeing the error ScrollSmoother is not defined.

Thank you! That works perfectly.

Hello. I'm currently using GSAP SplitText and Scrolltrigger to animate lines of text. However, as the site loads, the text is shown briefly before animating. I.E. the animation fires properly but only after the text is already visible for a short amount of time. Is there an easy way to hide any SplitText/ScrollTrigger animations until they have fired? Thanks!

Thanks so much! That worked perfectly. I'm new to GSAP and this helps so much. Have a great day!

Hello. I'm having trouble getting any GSAP animations to properly show when using Locomotive Scroll. It works properly in Codepen, but in my dev environment, the splittext animations do not fire unless the screen is resized. Any ideas what I'm doing wrong here? I can't seem to replicate in Codepen so I'm not sure how to troubleshoot. Thanks for any help you can send my way!