Jump to content
GreenSock

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

grommas

Members
  • Content Count

    7
  • Joined

  • Last visited

Community Reputation

1 Newbie

About grommas

  • Rank
    Newbie

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    basel/braunschweig

Recent Profile Visitors

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

  1. 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.
  2. 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!
  3. 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.
  4. 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 }); });
  5. Hi there, Based on TweenMax, the ScrollTo Plugin and ScrollMagic (this is probably not where the problem came from): I wanna have a hero section on top of a page, only tweening downwards if the user is scrolling from the very beginning. Everything works as expected on my laptop (MBP). Following problem: If I use a touch-device (iPhone SE, iOS 12.4.1) and use a short touch gesture, the window is tweening to the destination withouth any issue. But if I keep my finger on the screen, the page starts to flicker and jumps back to the top after the tween finished. Is there any way to fix this behaviour? Already tried to toggle preventDefault with eventListeners on Callbacks as well as setting the position again onComplete. Since it's not working with Codepen on my mobile device (maybe because of the iframe issue since iOS11?): http://grommas-dietz.com/reduced-test.html reduced-test.mov
  6. thank you for your help osublake. saw your name already a couple of times. really appreciate! and great idea! kind of hard to get it work with draggable and throwprops, i guess. but i’ll try my best, still have to learn a lot. the rows move together in vertical navigation and separately in horizontal navigation. so everything get mixed up like a rubik’s cube. but each row has a different number of slides / various cells, this is also important as far as i understand your current code.
  7. hello folks first post. and first of all – thank you for the nice work so far. i'm really glad to use all of your stuff. i want to create a fullpage.js like slider based on gsap. i used a couple of resources to build a prototype. the problem: it’s hard to get slides and sections in a loop. it works for vertical navigation, but i have no idea for the horizontal navigation. would be great to get some hints or even modifications / better solutions. best regards jakob
×