Kent Pilkington

Yes. The only thing I see different about yours is that you aren't using scrub (which I forgot was there and didn't seem to make any difference here), and that you aren't specifying how to handle the grid - from the documentation, I understood "auto" to be the thing that would be required in order to get the effect that you have, but it seems maybe there is a default value that does that instead? Just for my own education, and for the sake of batch noob posterity, why does "auto" NOT work for this situation, which begs the question of what it IS supposed to do - when is it the right tool for the job?

Also worth noting that things are animating as expected if they were already in the viewport. It's only once I start scrolling that things seem to be happening out of order.

I only just recently discovered stagger, and it seem to only be documented on a Codepen. As I reveal the rows, the first box comes in as expected, but then the second two come in at the same time rather than staggering. And if I add more frames to the grid-template-columns, things get even more strange - at 5 frames, the first one animates, followed by the last and then the others in order, but at 4 frames the first one animates, then the second and fourth, followed by the third. I've tried specifying from: 'start', using 'end' I would have expected to animate from the last to the first, but with 4 frames it seems to animate the third, then second, then first and fourth together. Anyone have any idea why such bizarre behavior? (or is this not actually bizarre, and I'm just not understanding something basic?)

Those changes (quickto) have helped a lot. I'll have to check in with the designers to see if it's smooth "enough", though honestly with this and adding will-change (which I'd forgotten about - only used it once before), I'm uncertain if there is more that can be done. I guess I'll find out! Lol.

I'll also have to read up on the overwrite: true. I hadn't come across that in my Googling, either.

Awesome! That looks exactly like what I'm looking for, but didn't know existed. I'll try it out and let you know.

I've tested on Vivaldi (Chrome), Safari, Firefox, and Edge, all on MacOS, and only on Safari is the tweening of the SVG's position choppy. Any ideas on how to do things more efficiently? It was originally choppy and laggy on all platforms until I added the TweenMax.killTweensOf(this); line. Edit for posterity: the codepen below has been updated with some of the suggestions, so if you come upon this later and don't see what I'm talking about, that's why.

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 }, }, }); });