Kent Pilkington

I think the footer is the only other thing to move inside. The header is fixed, as would be things like modals and their overlays.

AHA!! The version did it!

So, the above codepen is a fork of the Greensock codepen demo. I modified it a little bit to test out some theories and understand what was going on and what might be going wrong on my dev site, but have not been able to reproduce the behavior that I'm seeing. Worth noting: I've now used GSAP and ScrollTrigger on a couple of sites, but this is my first encounter with ScrollSmoother, so it's possible that I'm making a rookie mistake. The link where I'm seeing the problem is https://lariattx.dennardlacey.com/homepagetest/. (This is the only page where the ScrollSmoother init code is running because I need to keep working on the rest of the site.) I'm initializing things as follows: jQuery(document).ready(function(){ gsap.registerPlugin(ScrollTrigger, ScrollSmoother); let smoother = ScrollSmoother.create({ content: 'main', //smooth: 2, // seconds it takes to "catch up" to native scroll position effects: true // look for data-speed and data-lag attributes on elements and animate accordingly }); smoother.effects('.parallax img', { speed: "auto" }); }); This is almost a cut/paste of the init code used in this other pen (https://codepen.io/GreenSock/pen/PoOpobM?editors=1111) which is a lot closer to what I'm trying to accomplish (basic parallaxing of images). Rather than adding smoother-wrapper and smoother-content elements to my HTML, I'm telling it to use the main tag as the content (there's only one per page) and allowing it to create the wrapper tag around it - which it does appear to be doing. (I've actually tried it both ways with the same resulting behavior.) When I inspect either of the codepens mentioned above, I can see that the the content element is getting its style updated as the user scrolls. For example, style="translate: none; rotate: none; scale: none; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -630, 0, 1); box-sizing: border-box; width: 100%; overflow: visible;" Specifically, I can see the matrix3d transform getting updated, which I believe is the bit that actually scrolls the content. When I inspect the page on my site, the elements are present in the HTML, but the style attribute does not get updated when I scroll, nor does the content scroll. I DO, however, see the scrollbar moving, and if I reload the page, then it reloads and shows the content that I would have scrolled to - AND it even updates the content element's style (style="translate: none; rotate: none; scale: none; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -136, 0, 1); box-sizing: border-box; width: 100%; overflow: visible;"). So, it seems to be working on some level, but just isn't posting updates correctly? I'm trying to pull out any kind of plugin feature that I suspect might be interfering, but haven't yet had any success, and since I'm unable to replicate it in a codepen, I'm not entirely sure where to turn next. I'm also looking at any CSS properties I may have applied to the HTML or body elements - basically anything that's a parent to <main>, but again, no luck so far. Ideas? Suggestions?

The reason for the loop is literally, "It was late and I was very tired." I'm having to do a last minute replacement of AOS with GSAP for the scroll triggers before something goes live at the end of the week, and it was a quick cut and paste from something that I knew was otherwise working, but was searching for a class rather than an ID. My focus was not on elegance or efficiency or clean code, but on getting the GSAP trigger to to literally give me any sign of life - that I was even on the right track. The value schemes were each tried one at a time with all other variations commented out. I uncommented them here to avoid someone pointing out that they weren't working because they were commented out. Lol. I guess that backfired. My hope was that I was simply overlooking something simple and probably obvious to someone who's been doing it longer than a few minutes. I was under the impression that adding a value for x (x: '-50%') that value would get popped into a transform: translateX. This appears to be the case in your example, but doesn't appear to happen in mine, but I'm not sure why the results are different. Is there perhaps additional initialization or presets that Codepen puts in place for you? Are there key factors that GSAP relies upon that are not explicitly specified in the Codepen? Am I missing something about how toggleClass works? (I was assuming it would just ... well, toggle the presence of the class name on the target of the .to() operation.) Does the value for x : need to be quoted? I've seen examples of both being used - quoted and not quoted. Again, based on the simplicity of your sample and the fact that it is working, it's almost certainly something dead simple that I'm just overlooking, or perhaps some assumed requirement in how GSAP is loaded/initialized? I don't know. I'm just guessing at possible explanations.

So, here's a code block. #Dog exists (surprise, it's an illustration of a dog!), and it is in a section with an ID. I've tried several things I've seen in GSAP and scrolltrigger videos to just move the dog (transform: translate()), but the ONLY thing I was able to get working is to have it call jQuery to add a class which calls a pre-defined CSS animation. It almost has to be something dead simple that I'm just not seeing, so any insight would be appreciated. Well, except telling me to just use an IntersectionObserver instead or something like that. Even if it's not the most amazingly appropriate use of GSAP (I think it is?), I'm far more interested in why it isn't working, than whether I should be questioning my life choices. gsap.registerPlugin(ScrollTrigger); jQuery('#Dog').each(function(index, element){ var sectionID = jQuery('#Dog').parents('section').attr('id'); console.log('sectionID='+sectionID); gsap.to('#Dog', { x: '-50%', // <-- appears to have no effect - may just not be valid input y: '-50%', // <-- appears to have no effect - may just not be valid input xPercent: -50, // <-- appears to have no effect - saw this on a video yPercent: -50, // <-- appears to have no effect - saw this on a video toggleClass: 'play', // <-- appears to have no effect scrollTrigger: { trigger: sectionID, start: "center 75%", toggleClass: 'play', // <-- appears to have no effect toggleClass: {targets: sectionID, className: 'play'}, // <-- appears to have no effect onEnter: ()=>{ console.log('Dog entered'); jQuery('#Dog').addClass('play'); // <-- ONLY this appears to work }, }, }); });