Jump to content

Cassie last won the day on February 4

Cassie had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Cassie

  1. That sounds like you're talking about SVG animation in general rather than specifically JS run in an SVG? But yep, agreed! SVG in general can be pretty inconsistent.
  2. I'd dispute this (but also open to be corrected, SVG can be a little wonky sometimes) I don't know of any browser inconsistencies for using JS in SVG. You can't use modules but JS is fine. You have to be aware that you're in SVG-land so certain HTML specific web API's or methods like .getBoundingClientRect won't work, maybe that's what tripped you up @iDad5? But you have SVG methods like .getBBox so it's not the end of the world. ✨ lil' demo for testing https://codepen.io/GreenSock/pen/dyjEvJp?editors=1100
  3. 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.
  4. 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?
  5. 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!
  6. That is not entirely what I understand, as two of the demos that snap have refresh disabled. Well, the spreadsheet is useful here - Both of those have pinSpacing:true so there's space available to scroll into.
  7. 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?
  8. The window changes height and the scroll markers are positioned relative to the window.
  9. If you're trying to work out why 'panels in body' doesn't snap to the last section - Jack's explained this. This is a fork of 'panels in body' with markers enabled. You can see that because refresh isn't being called when the window resizes, the final marker position is off and it doesn't ever hit that point - therefore it doesn't snap. https://cdpn.io/pen/debug/MWBRxKE This is a fork of 'panels in body' with markers enabled. In this one we are allowing refresh on resize. The final marker position gets adjusted, so it can reach the final marker and it can snap. https://cdpn.io/pen/debug/ExpJMyR
  10. Ok. So. You have a minimal working demo that snaps on the last panel - 'Panels in body II' - so we don't need to help you to find a solution there. This broke when updating to 3.11.4, correct? Does this work using 3.11.5? And by 'not working' you mean 'not snapping on the last section'? I just added a scroll(100) into a delayed call in 'Panels in Body II' and it works ok here https://codepen.io/GreenSock/pen/wvxZNyV?editors=0010 Can you provide us with an example that shows scrollTrigger.scroll() not working? Can you explain what you mean by 'not working'? So just to clarify - right now we have a working minimal demo using the latest version that snaps and successfully scrolls We have a complex site that works on an earlier version of GSAP, breaks on 3.11.something? and works(?) with 3.11.5? What is it that you need from us to move forward here?
  11. Ok so your ideal behaviour is Snaps to last panel on iOS - true Allows refresh on resize - No According to your spreadsheet you have two demos that accomplish this already? What am I missing here? CodePen Link CodePen Debug Link CodePen Code CodePen Title Code Format Allows refresh() on resize PinSpacing body height CSS Snaps to last Panel on iOS https://cdpn.io/pen/debug/KKBJKrE KKBJKrE Panels in Body long NO FALSE 100vh NO https://cdpn.io/pen/debug/ZEjPeMQ ZEjPeMQ Panels PinSpacing false reduced NO FALSE 100% NO https://cdpn.io/pen/debug/RwBOMMW RwBOMMW Panels PinSpacing false no config reduced YES FALSE 100% YES https://cdpn.io/pen/debug/yLqwXBp yLqwXBp Panels in Body II long NO TRUE 100vh YES https://cdpn.io/pen/debug/mdjgzrG mdjgzrG Panels PinSpacing true 100vh reduced NO TRUE 100vh YES https://cdpn.io/pen/debug/OJwqjQB OJwqjQB Panels PinSpacing true reduced NO TRUE 100% NO https://cdpn.io/pen/debug/LYBvdeK LYBvdeK Panels PinSpacing true no config reduced YES TRUE 100% NO
  12. 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
  13. Right. Of which the jittering on IOS is one of the areas we're attempting to provide advice for. i.e. Window demo is broken on desktop, showing a white bar when scrolling and additionally jitters on IOS rendering it unusable. https://codepen.io/iDad5/pen/zYLeYev?editors=0010 Solution Fix typo giving undefined end point and use ScrollSmoother in order to avoids issues caused by browser multi-threading. https://codepen.io/GreenSock/pen/dyjLYZy
  14. Sent! - Also it would be really helpful if you could add the latest, updated versions of the demos you're talking about. BODY WINDOW PANELS IN BODY II (are these all of them?) e.g. Your version of WINDOW still has the panels.legnth typo. https://codepen.io/iDad5/pen/zYLeYev?editors=0010 Which I simplified down and fixed here https://codepen.io/GreenSock/pen/vYaPovR?editors=1011 Which ones are we testing? Let's make sure that we're on the same page and any demos we're testing are typo free and the correct iteration.
  15. 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?
  16. 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
  17. 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 😬
  18. Just a little note that a lot of stuff in this thread is why smooth scrolling exists. Try this on for size - using ScrollSmoother https://cdpn.io/pen/debug/dyjLYZy
  19. You don't need to apologise. I'm sorry we haven't been more helpful. Unfortunately this response hasn't helped to clarify too much for me though. I'm just trying to work out what's happening, and what you need help with currently. Am I correct in that you have decided IOS issues are preventing you from following the fixed scroller approach, you're no longer attempting this and you don't need help anymore? This is your desired approach and is working https://codepen.io/iDad5/pen/yLqwXBp And any/all demos you attempted to pin in a fixed window are broken and abandoned?
  20. The current issue is. The version in the body - snaps at last panel on IOS - https://cdpn.io/pen/debug/KKBJKrE This is desired behaviour The version in a 'window' - does not snap at last panel on IOS - https://cdpn.io/pen/debug/zYLeYev This is not desired behaviour @iDad5 - could you confirm that this is the issue? --- note from Cassie I took a look at these two demos. I can't see the issue on the window version at all so I couldn't test this. For me it just scrolls out of view, completely broken. I attempted to fix and simplfy this pen so that we can debug. ✨ I took a look and there was a typo this.panels.lenght There was also a height being set on the container which was causing overflow and making the demo unusable, I commented that out too @GreenSock Here's a simplified example for debugging. It's exactly the same as the original from iDad, I just removed the code from the classes and function calls and fixed the typos @iDad5 - Does this demo show the issue for you? Have I correctly simplified it? Please respond in as few words as possible. I think we're all struggling to follow this thread a little! https://codepen.io/GreenSock/pen/vYaPovR?editors=1011 --- debug link for viewing on iphone - https://cdpn.io/pen/debug/vYaPovR
  21. Cassie


    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 ☺️
  22. ^^^ this is key This is exactly how all of us here debug. Simplify down until it works and then play spot the difference. If you provide us with the more simplified version that works it'll really help us to help you! I'll take a look at this when I'm back at my desk tomorrow, but adding the working demo would be super useful. Thanks!
  23. Out of interest, are you using ScrollTrigger.normalizeScroll() Do you have a link to these that we could take a look at? As per usual, a minimal demo speaks 100000 words
  24. gsap.from(target, { trigger: ".main_section", delay: .5, scale: .7, opacity: 0, ease: "power1.inOut", duration: 1 }); Here's the issue! 'trigger' isn't valid syntax - you can use scrollTrigger like this, or 'trigger' inside a scrollTrigger object. gsap.to(".box", { scrollTrigger: ".box", x: 500 }); or gsap.to(".box", { scrollTrigger: { trigger: ".box", ... }, x: 500 });