Leaderboard

Here's one idea: https://codepen.io/GreenSock/pen/wvxbvjg

Thanks for the improved clarity on exactly what the issue is, how to reproduce, etc. 👍 I believe this boils down to several things: As I explained in a previous thread, when you associate a ScrollTrigger with a timeline (rather than a tween), it must WAIT 1 tick to do its refresh (when it calculates start/end values and applies pinSpacing, etc.) because timelines are almost always created and THEN populated and it's super common to assign the ScrollTrigger in the constructor like gsap.timeline({ scrollTrigger: {...}}). But in your scenario, you're creating the ScrollTrigger and immediately trying to set the scroll position which actually depends on a bunch of extra pinSpacing being implemented at that point which leads me to point 2: When you're trying to set the scroll position, it doesn't exist. For example, let's say you're trying to set the scroll position to 500...but the page literally has NO scrolling space whatsoever. So you can't scroll to 500 when the maximum you can scroll to at that point is 0. I think you've got logic problems in your spacing. Your code seems to be written assuming that each panel's scroll position corresponds to 100vh further down, but you're setting up your ScrollTrigger with a trigger of "container" and you don't set an end value at all, thus it defaults to "bottom top". Since the container is 100vh itself, that means the ENTIRE ScrollTrigger (across ALL panels) will only last 100vh. You're also doing a findCurrentSlide() inside an onToggle() but when you resize that may not be entirely accurate based on the new measurements. For example, if you scroll all the way down, progress is 1 on the timeline but if you resize that scroll position may actually correspond to a progress of 0.998745, thus currentLabel() will be one less. You might want to just get the closest label instead. In my fork I've included a function for that. It's not a bug in ScrollTrigger.scroll() - you could manually do it with window.scroll() and you'd see the same result. it's just logic and timing stuff. And for point #1, you can force a .refresh() call on your individual ScrollTrigger immediately after creating it so you don't have to wait 1 tick (since you know you're done populating it at that point). https://codepen.io/GreenSock/pen/JjBqjEe?editors=0010 Does that clear things up?

Yes, Jack! That's awesome! Exactly the answer I needed!!! This is why GreenSock is the best! Friggin' amazing! Thanks again, Jack!

You'd need to have more space to scroll into than wherever your end marker was. So even if you added loads of space, unless it was around 200px more than the end marker, you would still have the same issue ☺️ Glad we got there in the end though. Jack's got the other thread, looks like a timing issue, but the working demo in that thread (with snapping issues on IOS) could be solved with this information here too.

Sure. But this is calculated on page load. Before the browser bar minimizes, so when the browser bar disappears there's then a disparity in size. This is why allowing refresh is fixing the issue and why pinSpacing:true is fixing the issue. Because then there's space to scroll into If you create a little more space to scroll into manually (line 53, added 150px) then it has enough space to hit the final trigger. https://codepen.io/GreenSock/pen/mdjgYWG?editors=0010 https://cdpn.io/pen/debug/mdjgYWG - debug view The final version on your spreadsheet looks like an outlier because it has pinSpacing:true, and it allows refresh but it's still not snapping. But this is just because you have a hardcoded end value that doesn't change. If you adjust that to a functional value that actually recalculates on refresh then it works. (functional value on line 24) https://codepen.io/GreenSock/pen/OJwGYaK?editors=0010 https://cdpn.io/pen/debug/OJwGYaK - debug view In every pen that isn't snapping to the last section, there's just not enough space to scroll into, either due to hardcoded values that aren't updating, pinSpacing:false and not enough page height or due to the markers not being recalculated on refresh. Are we on the same page?

Thanks so much for your help, it works perfectly for me

Hi @SJH, Maybe create a SplitText instance to get the position of each line relative to a parent container, and use those DOM elements to get the Y position of each line. Or use the SplitText lines in order to use the text plugin on each line and move the cursor to that particular position or re-parent it. There could be other workarounds for this, but right off the bat nothing seems to be extremely trivial and/or simple. But in most cases it seems that you have to check the width of the text wrapper, the width and height of the text content in order to position the cursor on each update. Hopefully this helps get started. Let us know if you have more questions. Happy Tweening!

The topic has the same context as this one and that one, but is not directly connected to those, as far as I can tell. It occurs on desktop Windows Chrome and Firefox, as well as Mac Safari. I did not verify other platforms, but have no reason to suspect that it is platform related. The CodePen is as minimal as I could make it without making is useless for me. It is in Typescript, which makes it a lot easier to read for me, unfortunately I'm aware that most others don't see it that way—even if I changed the coding style it would have still been rather complex. In fact, I have a working version with the exact same code, except for three lines. So, probably working through all the code will not be necessary anyhow. To reproduce the issue, scroll to any other panel than the first, and then resize the window. Expected behavior: after a rebuild of the page, the same panel as before the resize should be shown. Actual behavior: the first panel is always displayed after a resize. What is going on: After a resize, ScrollTrigger is killed and newly built. Then an attempt is made to send the new ScrollTrigger to the equivalent position the old one was in before the resize. The function used is ScrollTrigger.scroll(toValue); Line 55 in the code. While this works in one version, it does not in the other version. (I'll post the working version in the follow-up post) The difference between those versions is the method of creating (and recreating) the ScrollTrigger, it is to be found in lines 65, 68, and 69. Simply going with the working version is not an option, as this version has issues on mobile Safari, which this version has not. Moreover, I'm convinced that ScrollTrigger.scroll() should work in this version of creating the ScrollTrigger, which is working fine in any other respect as far as I can tell. Therefore, I suspect that either I do something 'illegal' in my code, which I'm not yet aware of, or there is a bug in ScrollTrigger.

Hi, Maybe preventOverlaps could help in this scenario: https://greensock.com/3-8#preventOverlapsAndFastScrollEnd Happy Tweening!

welcome to the GreenSock forums. thank you for the minimal demo. I don't think you can target unique instances of objects that repeat in a pattern like that. With what you have I think this is the easiest way to randomize it a bit https://codepen.io/snorkltv/pen/rNrgBqm?editors=0110 The only option I know is to programatically create the grid so that each polygon is it's own entity in the svg. There's a chance I'm wrong, and if so, I welcome other ideas.

As my full project has to kill and rebuild the ScrollTrigger on resize, that issue should be solved then. If the new issue had not occurred, while reimplementing my custom resize/refresh, we would likely have saved a lot of time and energy. But I would not have learned so much from you. Thank you so much for your patience.

Further details: Both versions use the beta of 3.11.5. I tested the problematic one with 3.11.4 to make sure it is not beta related. The behavior was the same. The lines 133 to 158 are necessary as the label reported from line 84 often is not correct. I don't think this is connected, but might be worth a look from someone above my mental pay grade. I needed to delay the resize trigger, as browsers fire the resize event much too frequently for the complex operations here. (I do the same but much more sophisticated in the production version.)

Here is the working version: https://codepen.io/iDad5/pen/JjBVqmL

Hi, I think Ryan's advice is the best course of action for this: const itemNumber = document.querySelector('.item-number'); const sections = gsap.utils.toArray(".section"); sections.forEach((section, i) => { ScrollTrigger.create({ trigger: section, start: "top center", onEnter: () => itemNumber.innerText = i + 1, onLeaveBack: () => itemNumber.innerText = i, }); }); Here is a live example: https://codepen.io/GreenSock/pen/XWBQwgp Hopefully this helps. Happy Tweening!

Thanks for taking the time to put together that spreadsheet and talk through this all. I'm glad we haven't stumbled on any big bugs in the process!

Exactly it, thank you

Ok. So. 1 - Your site works using 3.11.5 - It broke in a previous version, Jack's explained the regression and apologised. - solved 2 - This demo https://cdpn.io/pen/debug/wvxZNyV works with snap and scroll() - There isn't a bug on our end - solved 3 - We've explained why the demos without refresh enabled aren't snapping - solved Ok. This is a new issue. Could you make a minimal demo showing .scroll not working? This is likely the same issue as #3, add markers. Is the final marker being hit? What is it that you need from us to move forward here? Are there actionable steps you need our help to solve?

GSAP is build in a way so that you don't have to create multiple timelinesand add delays to those to get the effect you want. If you want to do that, just add a delay to the tween on the main timeline and GSAP will handle the timing for you! Personally I like to add ScrollTrigger directly to the timeline it self, this way I can easily toggle it on/off and then the ScrollTrigger and the timeline directly know what you want to control, so there is not complication in connecting the two. You never want to animate your trigger element when using GSAP, so I've wrapped your section in a .container that way that can be the trigger and then you can add all the animations to your #mySection GSAP can also directly animate all transform properties, so instead of transform: "rotate(180deg) skew(360deg, 0deg) scale(0.5028, 0.5028)", you can write: rotation: 180, skewX: 360, scale: 0.5028 Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/OJwGdjG?editors=0010

That is because as soon as you set them, the browser needs to load these images before it can display them. If you want to animate images I would suggest having all the images already loaded and show/hiding them via an animation. Can you explain why that is the case, because there is nothing you can't to with an image that you can with a div and a background-image. Most people gravitate to a background-image because they want to use background-size: cover; but you can do that with an image https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit I would suggest laying out your CSS a bit differently instead of having multiple fixed images, but this is a quick example and instead of writhing an animation for each image you can also easily use a stagger. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/zYLXyXq?editors=0010

Sorry, I was hunting for the console.log line you commented in your version. My bad. I'm fine with that. To answer your questions: My ideal behavior would be indeed snapping to the last panel in iOS. Even more ideal would be if no internal event loop happened when is snaps to the last label, but I can live/deal with that. I would prefer if refresh on resize could be disabled, as in the final version I have/need my own resize handling. But it is not a must-have as far as I can see. New finding: By comparing the compiled HTML code, I found a difference between the 'Panels in Body II' and 'Panels PinSpacing true' that I wasn't aware of and that made the difference I was hunting for. The first set the body height to 100vh, the latter to 100% (HTML height 10% at both). With that change Panels PinSpacing true is snapping to the last panel on iOS. I added that change to the table (before your message with a new pen—sorry) I will now change all pens to the 3.11.5 versions.

There is currently a typo on line 56. All I was doing was pointing that out so that we can fix it and move forward in the debugging process. Currently your window demo is broken on desktop too for me. Kapture 2023-02-07 at 12.33.57.mp4 I'm just trying to get us on the same page here. The typo means the end value of the ScrollTrigger is undefined I don't really mind what route you go down. That's up to you. I'm just trying to drill down on each demo to work out the issues so that I can ascertain whether WE have to fix a bug or whether the bug is in your code. Secondly, to provide options and advice for you. But never mind all of this. Let's ignore the window version entirely. Next steps. 1) The demos in your spreadsheet are using the 3.11.4 version. Please swop all of them out to the latest beta version so we can check whether any of the issues are version dependant. 2) Can you outline your ideal behaviour in the spreadsheet? Right now you're adding in details about the CODE. We don't need that. We can see that by looking at the code. What we need to know is what your ideal behaviour is and whether the demos are working or not, according to that behaviour. Please don't create a spreadsheet that's just a convoluted version of the code that already exists. We don't need a brand new demo for every value you change. Are we just aiming for 'snaps to last panel on IOS? Do you want the demos to allow for refresh on resize? What's the goal here? e.g   table.GeneratedTable { width: 100%; background-color: #ffffff; border-collapse: collapse; border-width: 2px; border-color: #6fb936; border-style: solid; color: #000000; } table.GeneratedTable td, table.GeneratedTable th { border-width: 2px; border-color: #6fb936; border-style: solid; padding: 3px; } table.GeneratedTable thead { background-color: #6fb936; } Demo Snapping works Jitters on mobile Version IDEAL YES NO 3.11.5 link no yes 3.11.5 link yes yes 3.10.0

Are you asking how to use them on codepen? If so, just the same as usual, nothing special - just pop the links in the settings panel, just like your other demos in this thread! Or are you asking about local testing? These links should be whitelisted for localhost too, but I can DM you the whole beta files zip with umd/esm/tgz options if you've got specific needs that these minified files don't meet?

Thanks, that would be super helpful. Here's the beta releases https://assets.codepen.io/16327/gsap-latest-beta.min.js https://assets.codepen.io/16327/ScrollTrigger.min.js

Thank you for your dedication @Cassie I will prepare a table—might take a little while, though. I asked for a way to test with version 3.11.5 on CodePen a while ago, but never got a solution, do you have one?

Ah, it looks like you weren't doing proper cleanup, so you were creating conflicting/competing tweens. I'm not sure what you were trying to do with the ScrollTrigger stuff there, but it's not doing anything because you didn't import or register ScrollTrigger. Here's a simplified version: https://stackblitz.com/edit/gsap-react-basic-f48716-qu9ztt?file=src%2FApp.js I'd strongly recommend reading this article: gsap.context() is your new best friend in React. It makes cleanup super easy, plus selector scoping is very convenient. I hope that helps.

You truly are a lifesaver! @GreenSock :-)))

Hi, Use the Endless Horizontal loop helper function: https://greensock.com/docs/v3/HelperFunctions#loop https://codepen.io/GreenSock/pen/ZELPxWW Hopefully this helps. Let us know if you have more questions. Happy Tweening!

This is what I've been doing. I've spent at least three hours today reading through the demos and the threads trying to work out what's happening. 🙈 I know you must be frustrated but honestly, this moment right here...This is PERFECT. This is exactly what we want. If something is fixed and then you add code in and it breaks, there's a *moment* when it breaks, and a bit of code that breaks it. We're trying to find that bit of code, and in order to do that we need to know the specifics. At the moment the specifics are unclear I know you probably feel like you've explained this many times over and I'm sorry about that. But phrases like 'it turned around on me' and 'things break again in another way' aren't hugely productive. What is 'it'? What is 'broken'? What we need is absolutes. Facts. Reduced test cases e.g I am trying to do x y and z This demo works - it does x y and z --link-- I added this code -- snippet --- Now the demo only does x and y and no longer does z -- link to demo -- That we can test! If you have multiple demos and multiple different bugs, maybe it's table time? Something like this (I don't know what your exact criteria are so please don't take this too literally) table.GeneratedTable { width: 100%; background-color: #ffffff; border-collapse: collapse; border-width: 2px; border-color: #6fb936; border-style: solid; color: #000000; } table.GeneratedTable td, table.GeneratedTable th { border-width: 2px; border-color: #6fb936; border-style: solid; padding: 3px; } table.GeneratedTable thead { background-color: #6fb936; } Demo Snapping works Jitters on mobile Version link yes no 3.11.4 link no yes 3.11.5 link yes yes 3.10.0 I'm sorry if you think this is annoyingly reductive but reductive is incredibly good for bug fixing 😬

Judging from the descripiton in the docs, I don't think so, as it says that those are global events. Based on that description of yours, maybe on of these threads below can help. If they don't, a minimal demo of your scenario would be really helpful.

There is a 'scrollEnd' event. ScrollTrigger.addEventListener("scrollEnd", () => console.log("scrolling ended!")); https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.addEventListener()

Not really certain on that really, sounds pretty complex! But sure, you could grab path data from d3 to use, I guess you could also use the values from drawSVG to influence objects in pixi too. Sounds like it'll be fun to explore ☺️

Hi, In the mean time while either John or someone else can update the package to work with NextJS 13, here is a simple example that uses GSAP and React Transition Group to create the animated transitions between pages: https://stackblitz.com/edit/nextjs-13cw4u Right now it seems that Stackblitz has a few issues with their webcontainer (what they use to run Node and SSR on the browser). Here is the same example but using React and React Router: https://stackblitz.com/edit/react-6rzfpp Hopefully this helps in the meantime. Let us know if you have more questions. Happy Tweening!

Welcome to the forums, @Parris! I think you'll dig it around here. The problem is that you're pinning that middle section element, so it must either make space above/below so that the adjacent sections don't collapse on it and obscure it while scrolling or if you set pinSpacing: false...well...try it and you'll see what I'm talking about. It's a logic thing. I assume you actually want the whole block of content to get pinned rather than just that middle section, right? The section above/below shouldn't move while the reveal is happening, right? I wrapped everything in a ".content" <div> and set the pin to that element instead here in this fork: https://codepen.io/GreenSock/pen/eYvGLwM?editors=0010 Is that what you're looking for?

Hello @timdt and welcome to the GreenSock Forum! Do you mean something like this? Animating a background image of just clouds And this one is animating background of clouds and grass.. 2 background images at once. Happy Tweening