Jump to content


  • Posts

  • Joined

  • Last visited

demiava's Achievements

  1. I can't unfortunately upload videos due to file size limit, but I've striped-down my local components to exactly the same styles as in stackblitz, and scroll is still acting out. Maybe the fact the stackblitz is rendering the view inside iframe has to do something with it, I don't know. But clearly people are having same trouble. I'm now trying Observer plugin, to hijack the events and manually move to different sections using ScrollToPlugin
  2. Now it definitely is more clear what's the issue, and even though looks like it works on stackblitz, it still does not work on my local setup Only now I discovered that many are facing same issue on trackpads, like this one.
  3. @GreenSock I would like to re-open this topic once more. On the same example, try to scroll using laptop trackpad, as using mouse it seems to be working fine. And try to do long, short scrolls. The scrollbar then goes to the end of next section, but automatically scrolls back to to top section. overwrite or autoKill seems not helping
  4. Thanks @Rodrigo. Somehow, when fully into GSAP, I keep forgetting that I can mix CSS animations too. Anyways, here is the full solution in case someone wants to see in future: https://codepen.io/demiavaliani/pen/bGmdWgv
  5. @mvaneijgen one more question please. Is it possible to somehow control the next tween within the timeline while the current tween is still playing? To take the current example, imagine that while the first card is being faded out after clicking on it, the second one would scale up just a bit (but before clicking on it). This is the starting point, but the one issue is that I can't set such effect to both cards and second issue is that notice how there is a small delay between the click and start of animation after the first loop.
  6. Okay, now it's clear. Thanks for the help
  7. What I'm trying to do is to fade the card away and wrap it back behind another card. Cards should be triggered on click. Wrapping and fading works fine. The issue I can't solve is that once the animation is triggered for each card, clicks do not work the second time. I even tried to set the card back to paused state onCompleted but it didn't help.
  8. Yup, that turned out to be one of the reasons. Plus, what I didn't realise earlier was that in a another component I was setting gsap.defaults({ repeat: -1 })
  9. So, fortunately managed to get reproducible demo. Although, in order to witness the issue, as soon as the page is loaded, start scrolling. Or, wait for 2-3 seconds and everything will start working fine. So, I'm guessing it's something to do with maybe page dimensions not being loaded?
  10. Unfortunately, on codepen the issue does not happen I will try StackBlitz as I'm using Vue and share the progress later, thanks.
  11. I unfortunately can't provide a reproducable URL, as this is happening only on my local environment and I guess I have something specific causing this issue, but maybe it will be possible for anyone to point out some guesses. You can see on the video what is happening when I start scroll. And this is my code: setup() { const goToSection = (section) => { gsap.to(window, { scrollTo: { y: section, autoKill: false }, duration: 1, }); }; onMounted(() => { gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); document.querySelectorAll('#snap-section').forEach((section) => { ScrollTrigger.create({ trigger: section, onEnter: () => { console.log('onEnter', section); goToSection(section); }, }); ScrollTrigger.create({ trigger: section, start: 'bottom bottom', onEnterBack: () => { console.log('onEnterBack', section); goToSection(section); }, }); }); }); return {}; },
  12. Yeah, the first stackblitz logs as it should. Very strange that it fails on my local machine. I will check tomorrow some more, and write an update here if I will find the issue. Thanks anyways
  13. @PointC Indeed. @Romanus You have to first define the handle function and then use that handler function inside the event listener. Later, you will be able to easily remove that event listener when needed. Check the example. There you can see that for first 2 second you are able to click the square (still have the event listener). But, after 2 seconds event listener is removed. https://codepen.io/demiavaliani/pen/QWVxeYw
  14. It does exactly that. You just have to give that row the styles you want, like full width and height and additionally populate that row with the squares (also with JS). Another way would be to create a dummy row with squares already populated and display: none;. Then, when any square is clicked, use insertBefore() to insert that dummy row above the clicked row and at the same time set display: block;
  15. Check this MDN. <div id="parentElement"> <span id="childElement">foo bar</span> </div> <script> // Create a new, plain <span> element let sp1 = document.createElement("span"); // Get the reference element let sp2 = document.getElementById("childElement"); // Get the parent element let parentDiv = sp2.parentNode; // Insert the new element into before sp2 parentDiv.insertBefore(sp1, sp2); </script>