Jump to content
GreenSock

Skilltech

BusinessGreen
  • Posts

    22
  • Joined

  • Last visited

About Skilltech

Skilltech's Achievements

  1. And what would the code look like then? Will you fix my fix with your fix and share a snippet? 😏 Thanks
  2. It is inside that iframe and only inside that iframe. I described it in detail above. The thing is that when editing, you are on the editor page, and "final" page is in the iframe, BUT it's updating in real-time, so they are connected with some JS magic. Or elementor is building an instance of that final page but it's not really the actual page and that particular instance is somehow being affected by the editor page. I was talking about ScrollSmoother, not Trigger. But I might as well refresh ScrollTrigger, it's a good idea. ScrollSmoother could also benefit from its own .refresh() method. Anyway, the patch is now doing its job. So, until Elementor guys fix that conflict, ScrollTrigger/GSAP users won't be very happy.
  3. I fixed that as well. Here's the code: var elem = $( "#smooth-content" )[0]; let resizeObserver = new ResizeObserver(() => { smoother.kill(); smoother = ScrollSmoother.create({ 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 }); }); resizeObserver.observe(elem);
  4. As I've said, I'm working with a fully working code (with gsap + ScrollSmoother installed) with 0 errors. Yes I wouldn't say "only" for previewing when that's where people need to build their website. Otherwise they'd be blind or crippled. Doesn't help. No change with ScrollTrigger. UPDATE 3: I also tried .detach() and (re) .attach() of the iframe and that removes the issue as well (again, with doubled warnings etc. in the console). Question: can I restart ScrollSmoother when #smooth-content div's height changes? I think it also plays a part in Elementor. When I drop a new tall widget (like a full-height section)(widget = Elementor editor/page builder elements), I see that the scrolling is working but not going all the way down (as though the ScrollSmoother is not aware of the new height).
  5. With 5+ million active installations I think Elementor might deserve a test run. The real number is probably much higher, 5+ million is just a cap number on wordpress .org To test, all you'd need is WordPress running (free) and Elementor running (also free). I know that, and it looks pretty illegal. As for smooth: 0, I alredy tried and wrote it down. That's not really acceptable. UPDATE 2: With further testing, when I wrap the <iframe> with a single generic <div>, that also fixes the scrolling (but also doubles the warnings and erros in the console).
  6. UPDATE: It's still a huge issue but I've shamelessly patched it. Since Elementor's editor is iframing the final page which is being edited, your code for some reason stops working but just for the heck of it I tried wrapping the, get this, iframe in #smooth-wrapper and #smooth-content and it worked. I guess your JS is somehow breaking out of the iframe??? Since I have access to the Editor page, which is the parent of the iframe, I waited for it to generate the iframe and then did the wrapping. Here is the code if someone needs to patch it until the issue is fixed (I also noticed that console warnings and errors are now doubled but everything else's running fine). jQuery(document).ready(function($) { "use strict"; function patchGSAPElementorConflict() { var i = 0; var checkIfIframeIsLoaded = setInterval(function() { if ( $( '#elementor-preview-iframe' ).hasClass( 'iframe-loaded' ) ) { // addClass (below) performed successfully, exit! window.clearInterval(checkIfIframeIsLoaded); } else if (++i === 50) { // Still no target to addClass to after 15 seconds, something's wrong with page load, exit! window.clearInterval(checkIfIframeIsLoaded); } else { /** * Target found */ // #1 Adding the class to use to clearInterval // #2 Making the iframe fullheight (wrapping it with #smooth-wrapper below would colapse it otherwise) $( '#elementor-preview-iframe' ).addClass( 'iframe-loaded' ).css( 'min-height', '100vh' ); // wrapping the iframe with smooth-wrapper and smooth-content $( '#elementor-preview-iframe' ).wrap( '<div id="smooth-wrapper" class="pushable-content"></div>' ); $( '#smooth-wrapper' ).wrap( '<div id="smooth-content"></div>' ); } }, 300); } window.onload = () => { patchGSAPElementorConflict(); }; });
  7. In WordPress, in Elementor's editor, when ScrollSmoother is initiated, the page cannot be scrolled. That is a HUGE problem. Basically renders ScrollSmoother useles in the most used WordPress plugin. If you have some pull with them you should press them to fix it or if you can do something on your end that would also work. CodePen is inapplicable. You need WordPress installed, then Elementor plugin and then edit the page using "Edit with Elementor". I have GSAP, ScrollTrigger, ScrollSmoother and ScrollToPlugin running. And of course smooth-wrapper and smooth-content. I'm "wordpressing" a HTML website which works perfectly fine so there are no bugs. Also, the final published page in WordPress works fine. The issue is ONLY present when the page is being edited with Elementor. When "smooth" is changed to zero, the page becomes scrollable but none of the scrollTrigger animations work. gsap.registerPlugin(ScrollTrigger, ScrollSmoother); let smoother = ScrollSmoother.create({ 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 });
  8. @GreenSock Final question that's not so much a question: This should be a plugin or core. P.S. I love how this thread progressed to a full solution.
  9. Nice. Thanks. I just switched CSS to scroll-behavior: initial; and I'll wait for the new release.
  10. @PointC @OSUblake It's this rule: @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } I hunted it down for you (an myself).
  11. Thanks. I tried it now and I get the same jerky behavior on anchor link animation. It's bootstrap 5 main CSS file. I did a process of elimination and narrowed it to that. This definitely needs your guys' attention since Bootstrap is a major requirement on most of my projects but more importantly on a great deal of projects worldwide. Please let me know if you can recreate it. Just to be on the same page, this JS code from PonitC's pen is the version I'm testing. Here's my original code updated with PointC's switch to .scrollTo() method and the only addition is I loaded Bootstrap CSS file in the pen's CSS. https://codepen.io/MrGordonFreeman/pen/xxpMdMK
  12. I am, it didn't say that it wouldn't work. It actually says it's a trial and that it will work locally and on codepen. And it does work, I mean smooth scrolling is working. The issue is with anchor links having either slow, jerky or imprecise animations. I plan on purchasing business green but I need to test it so I could be sure I won't get these exact type of issues when I pay. Behavior like this with MIT scripts is the main reason why I'm planning to join the GreenSock club. Are you saying that there is no way to test out Club scripts localy other than buying the license?
  13. Thanks, but I tried that as well. That's the P.S. scenario from the original post. For some reason the animation then launches "jerky" on my actual site even though it looks OK in the pen (descibed above). Did you try to load the trial ScrollSmoother version in a local environment? Maybe it's that.
  14. I'm using ScrollSmoother (trial, testing before I purchase commercial license) and ScrollTo combination and I'm having issues with anchor links. I followed your documentation from: ScrollTo docs: https://greensock.com/docs/v3/Plugins/ScrollToPlugin Linking to your codepen on "basic example using anchors": https://codepen.io/GreenSock/pen/ExKNEXY As well as ScrollSmoother docs: https://greensock.com/docs/v3/Plugins/ScrollSmoother Linking to this codepen: https://codepen.io/GreenSock/pen/KKXZOyZ I used those references and created an example pen where you can see that "basic example using anchors" doesn't work correctly while scrolling is active. To replicate: Notice the back to top button on the bottom right start scrolling a couple of times and while the scrolling animation is still running click the "back to top" button You'll notice that the result (location where the scroll ends) is inconsistent, usually not hitting the target precisely. I left a yellow marker at the top center of the page so you could make sure the top is reached. I'm assuming a conflict is happening between ScrollSmoother and ScrollTo. Is there any way to edit the JS in my pen to stop the current ScrollSmoother animation if an anchor link is clicked and ScrollTo's animation has started and reinitiate/unpause ScrollSmoother afterward? P.S. Another approach: On my actual site I'm building, I also tried this code: $('*[href^="#"]').each(function() { $( this ).on( 'click', function( event ) { smoother.scrollTo( $( this ).attr( 'href' ), true, "top top" ); }); }); Now this code does scroll to the target pixel-precise BUT the scrolling animation starts "jerky"/crazy, like it's being slingshoted to the top (goes quickly down and then starts scrolling to top very fast and overall looks jerky and cartoony). On a clean pen this doesn't happen, but I can't get rid of the "jerk" on my site even when I eliminate everything except GSAP, Bootstrap and jQuery. Is it maybe the trial version of ScroolSmoother acting funny?
×