Jump to content
GreenSock

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

grommas

ShockinglyGreen
  • Posts

    18
  • Joined

  • Last visited

About grommas

  • Birthday 08/15/1990

Profile Information

  • Gender
    Male
  • Location
    Bremen

Contact Methods

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Is there a way of using limitCallbacks on a single instance of ScrollTrigger instead of using it globally inside scrolltrigger.config? In my project there is a quite simple lazyload mechanism observing videos and images. Since the user can jump directly to an anchor, I have to limit the callbacks. At the same time there is a fixed navigation with some logic which should not be affected by callback limitations.
  2. At the first look it seems to work quite good for an isolated scroller in macOS Monterey 12.3.1 and Safari 15.4. But there are some jumps on iOS 15.4 (Safari, video attached). While working with an isolated scroller, it does not work well with multiple nested scrollers. With allowNestedScroll: true and target: ".vertical-1" it gets stuck inside the targeted scroller. When targeting .vertical-2 it is possible to scroll to the 2nd container, but we get stuck to the targeted container again as soon as we get there. Is it possible to target more than one scroller? Thank you for your investigations, really appreciate! jumping.mp4
  3. Thanks for your thoughts! The demo I provided already shows the jittering in MacOS Safari (tested with version 15.4). Here a short video of the jittering: jittering.mp4 jittering.mp4
  4. I already assumed that it would not be easy to solve but wanted to share it anyway. Thank you!
  5. Hey Reinoud Adding will-change to smooth-content seems to fix the problem! #smooth-content { will-change: transform; }
  6. I’m still fiddling around with ScrollTrigger’s brand new normalizeScroll option. I tested it on CSS native Scroll Snap. Sadly it doesn’t play nice together and ends up in jumping directly to the scroll snap points without any visual scroll. I remember there was a bug with ScrollToPlugin and CSS Scroll Snap last year which got fixed. The fix was probably quite an easy task since the CSS Snap can be turned off while scrolling to the content. Is there any chance to get the normalization on native Scroll Snap, or is it required to move completely to GSAP snapping for that? It would be great to get a hint about the restriction in the docs to be aware of the limitation.
  7. Thank you both for the answers, looks already promising that allowNestedScroll: true makes nested scrollers scrollable again. It’s not quite what I was looking for but this option makes it much more useful in cases of native scroll-snap galleries etc. @OSUblake: I was trying to fix pinned elements inside a set of multiple scroll containers. Pinned elements jitter in safari and position: sticky did not work in that specific case. @GreenSock: Would it be possible to normalize the scroll for nested scrollers or is this blowing up the code and the performance too much? I can imagine that it’s a downgrade to always bubble up the DOM to find the active scroller. It’s kind of annoying that Safari is the main cause, but since it’s one of the major browsers it would be a great benefit.
  8. Hey there Thanks for all your tools, the updates and new features. Really appreciate and love to work with it! Is it possible to normalize scroll on custom scrollers in future releases of ScrollTrigger? Currently the normalisation only works for the overall page, similar to ScrollSmoother, right? The CodePen provided is just a quick test in reference. Comment out ScrollTrigger.normalizeScroll(true); to see how it breaks the scrolling.
  9. ah, that’s great, I will install the beta and give it a try! Thank you!:)
  10. Will this be merged in the near future? I placed it in node_modules/gsap/dist manually. Not sure what’s getting picked when webpack builds my production js, but it only works in developing mode for me.
  11. Thank you all for your input, I will stick to my solution and disable it on touch devices. Not sure yet. Annoying, when it’s almost working.
  12. Other animations (moving header and content) are not affected, only when the ScrollTo plugin is triggered. That’s why I thought it could be related to the plugin. Sorry if I got it wrong!
  13. I did without any luck. The plugin is supposed to scroll the window on all plattforms, that’s why I'm asking.. but thanks anyway, @mikel! Are there any plans to get something like this fixed, or is it a rare case and only partially related? Could try to reproduce it without ScrollMagic, to see if the problem still exist.
  14. Hi @mikel, Thank you for your response. Can’t get it work with the tips in your link. The stackoverflow post is a couple of years old, I think with turning off the passive state of the touch event listeners you don’t need to listen to the scroll itself, with document.scrollingElement.scrollTop I don’t have to to get the window.pageYOffset. But I tried it nevertheless. Could you explain your answer so that I get a clue what you exactly mean? Here are my tries: // assume the feature isn't supported var supportsPassive = false; // create options object with a getter to see if its passive property is accessed var opts = Object.defineProperty && Object.defineProperty({}, 'passive', { get: function(){ supportsPassive = true }}); // create a throwaway element & event and (synchronously) test out our options document.addEventListener('test', function() {}, opts); // var allowScroll = true; function preventDefault(e) { e = e || window.event; if (e.preventDefault) { e.preventDefault(); } // if (e.stopImmediatePropagation) { // e.stopImmediatePropagation(); // } if (e.stopPropagation) { e.stopPropagation(); } e.returnValue = false; } function getBodyScrollTop() { var el = document.scrollingElement || document.documentElement; return el.scrollTop; // return window.pageYOffset } function setBodyScrollTop(scrollTop) { var el = document.scrollingElement || document.documentElement; el.scrollTop = scrollTop; // window.pageYOffset = scrollTop; } function addMousewheelListener() { if (e.addEventListener) { // IE9, Chrome, Safari, Opera e.addEventListener("mousewheel", preventScroll, supportsPassive ? { passive: false } : false); // Firefox e.addEventListener("DOMMouseScroll", preventScroll, supportsPassive ? { passive: false } : false); } // IE 6/7/8 else { e.attachEvent("onmousewheel", preventScroll); } } function removeMousewheelListener() { if (e.removeEventListener) { // IE9, Chrome, Safari, Opera e.removeEventListener("mousewheel", preventScroll, supportsPassive ? { passive: false } : false); // Firefox e.removeEventListener("DOMMouseScroll", preventScroll, supportsPassive ? { passive: false } : false); } // IE 6/7/8 else { e.detachEvent("onmousewheel", preventScroll); } } function removeTouchListeners(e) { window.removeEventListener("scroll", preventScroll); window.removeEventListener("touchmove", preventScroll); window.removeEventListener("touchstart", removeTouchListeners); window.removeEventListener("touchend", removeTouchListeners); } function preventScroll(e) { // if(TweenMax.isTweening(window) || !allowScroll) { // e.preventDefault(); // e.stopImmediatePropagation(); preventDefault(e) // } } function deactivateScroll() { // allowScroll = false; console.log('fired 1'); // window.addEventListener("touchstart", preventScroll, { passive: false }); window.addEventListener("touchmove", preventScroll, { passive: false }); window.addEventListener("scroll", preventScroll, { passive: false }); addMousewheelListener(); } function activateScroll() { // allowScroll = true; removeMousewheelListener(); // var scrollTop = y; // var scrollTop = getBodyScrollTop; // setBodyScrollTop(scrollTop); window.addEventListener("touchstart", removeTouchListeners, { passive: false }); window.addEventListener("touchend", removeTouchListeners, { passive: false }); // var event1 = new Event('touchstart'); // var event2 = new Event('touchmove'); // var event3 = new Event('touchend'); // window.dispatchEvent(event1); // window.dispatchEvent(event2); // window.dispatchEvent(event3); } Of course with the callbacks in my tween: var vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); var ctrl = new ScrollMagic.Controller(); var sceneLeave = new ScrollMagic.Scene({ triggerElement: "#content", triggerHook: "onEnter", offset: 1 }) .addTo(ctrl) .on("enter", function(event) { TweenMax.to(window, 1, { scrollTo: { y: "#content", autoKill: false }, onStart: deactivateScroll, onComplete: activateScroll }); });
×