Skilltech

@Warren_A I've put the opening divs in my header.php and the closing divs in footer.php, assuming you're building your own theme as I am. <!-- opening tags in header.php --> <div id="smooth-wrapper"> <div id="smooth-content"> <!-- closing tags in footer.php --> </div><!-- #smooth-content --> </div><!-- #smooth-wrapper --> <!-- Opening tags go at the bottom of the header.php TIP: any "position: fixed;" elements you should put outside these tags (before opening them). Closing tags go right before <?php wp_footer(); ?> and </body> closing tag. And your overall HTML structure should be correct i.e. no unclosed divs or too many closed divs by mistake. -->

Thanks! It did remove the error. But the "dropdown options" element is now behaving wacky i.e. goes counter to scroll direction (when I set #smooth-content as dropdownParent). So I'll have to stick with my patch of forcing it to close on scroll.

Woocommerce uses a modified version of select2, called selectWoo. And when "dropdownParent" is used, it throws an error "Uncaught TypeError: l.css is not a function".

I tried it of course, it's not working for me.

For anyone using select2 with ScrollSmoother, you can force the dropdown close on scroll like so: /** * Initialize Select2 */ var targetForSelect2 = 'select'; // we'll reuse the selector $( targetForSelect2 ).select2({ // your options }); // on window scroll, close any open select2 dropdowns $(window).scroll(function() { var select2Dropdown = $( targetForSelect2 ); if (select2Dropdown.length) { select2Dropdown.select2( 'close' ); } });

I'm trying to avoid creating a codepen since this is a hugely used library. https://select2.org/ Have you heard of WooCommerce? It uses select2, among others. The point of my thread is not to deal with my specific issue but to bring it to the devs' attention since this is related to ALL WordPress themes which use Woocommerce aka 99.99% Ecommerce WordPress sites.

ScrollSmoother has buggy behavior with Select2. To replicate: integrate select2, initialize it on any "select" element, click the dropdown and scroll while the dropdown is open see the dropdown options detach from the dropdown itself

Thanks again.

And what would the code look like then? Will you fix my fix with your fix and share a snippet? ? Thanks

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.

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

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).

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).

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

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

@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.

Nice. Thanks. I just switched CSS to scroll-behavior: initial; and I'll wait for the new release.

@PointC @OSUblake It's this rule: @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } I hunted it down for you (an myself).

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

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?

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.

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?

Hi @_Greg _, Thanks, I checked your pen but unfortunately it's not behaving as intended. In the JS tab I described the purpose of the pen and the animation details. So it's important that it's a timeline and that it has one setup (timeline) for the slide entrance and another when transition to another slide starts. As for the carousel init, carousel can actually be initialized via JS (as opposed to data attribute) so I'll update my pen to remove that data attribute and init via JS (I'll leave a comment).

Hi, I couldn't find a clean example of GSAP 3 timeline animation with Bootstrap Carousel, applied on slide elements (such as heading, description and button), i.e. the mentioned elements having entrance animations when their parent slide becomes active, and exit animations when the transition to next slide starts. So, I made a sample code pen with the most basic Bootstrap carousel where you, the Superhero, could demonstrate a simple entrance/exit timeline animations for the active slide. For info, I've written down the 3 basic Bootstrap rules that run the carousel and the two main events you can connect the timelines to. I've also fully commented the following: Bootstrap carousel basics (mentioned above) HTML Setup Events to connect to (mentioned above) Purpose of the pen Animation details I hope you can demonstrate the best way to do these animations as it will be invaluable to a lot of us gsapiens.

@akapowl Oh, you meant those ? Thanks