Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

About Skilltech

Skilltech's Achievements

  1. Nice. Thanks. I just switched CSS to scroll-behavior: initial; and I'll wait for the new release.
  2. @PointC @OSUblake It's this rule: @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth; } } I hunted it down for you (an myself).
  3. 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
  4. 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?
  5. 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.
  6. 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?
  7. 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).
  8. 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.
  9. @akapowl can you give me an example of that event listener? I'd definitely want that as a precautionary measure.
  10. @akapowl you are THE MAN. I am using small images actually, I tried out the codepen's feature i.e. loading images from codepen's "assets" section because in many pens I visited it struggled when pulling images from other websites causing those pens to load incorrectly. Thanks a lot again and I'll continue to use gsap in my production and join the club when I'm ready to publish.
  11. Hi @akapowl and thank you for such a fast response, Also, THANK YOU for solving this issue for me AND for providing the onUpdate version. I have one final question, I opened your (and then my) pen on mobile after reading your reply and the performance is so slow that the effect is completely unusable. The question: Do you have any suggestions on how to treat this on mobile or, more importantly, do you think there is a proper, better way of achieving this same effect? Once again, thanks a lot. P.S. the duplicate <main> was a typo I only made on codepen
  12. Hi, Love the smoothness of gsap, interested in buying business green and I'm trying to make sure it works for creating parallax image backgrounds with ScrollTrigger, smooth-scrollbar.js and scrollerProxy() combined. I saw a working parallax backgrounds pen (1) and this is the desired behavior: https://codepen.io/ChrisCrossCrash/pen/YzwjKYG I also saw your pen(2), the implementation of smooth-scrollbar.js with scrollerProxy(): https://codepen.io/GreenSock/pen/oNLqgBm I made a combination of those two pens, I used effects from pen 1 and setup from pen 2 and got an almost working result but... The issue: The parallax background images are all over the place. You can see the result in my pen, make sure to make the preview window tall enough. Please tell me what I'm doing wrong, thanks. MY PEN: There are four images/sections in total. Notice how, around the second/third image it goes wrong. P.S. The smooth-scrollbar.js works correctly on its own and gsap works correctly on its own.