demiava

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

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.

@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

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

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

Okay, now it's clear. Thanks for the help

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.

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

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?

Unfortunately, on codepen the issue does not happen I will try StackBlitz as I'm using Vue and share the progress later, thanks.

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 {}; },

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

@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

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;

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>

I have a Vue 3 app. The code is identical to the one on codepen. As you will see on codepen, after adding a pause when previous animation ends, "callback" will be logged after 2 seconds. Logging the "callback" is just to simply show the problem. What I want to actually achieve is gsap.delayedCall(2, () => tl.resume()); However, in my local environment "callback" is not logged. I know it's hard to understand the issue when it's about my local environment, but any guesses? tl.addPause(">", function () { gsap.delayedCall(2, () => console.log("callback")); }); EDIT: I had to add this in between tl.from() and tl.to() to achieve same: tl.from(monker, { duration: 2, });

@Rodrigo Not just a starting point, but I could use it as it is too. Thanks a lot

I actually need NPM, yeah

Is there a vertically running version of this?

Ah, makes sense, thanks a lot. And when should we expected the next release?

I have a fake horizontal scroll. Looks like .pin-spacer{} adds padding in such a way that the border on the right is being pushed away and hidden off the screen. Can't really understand what am I doing wrong.