Leaderboard

@Jloafs I stumbled across this thread as I was having a similar issue. So what solved the issue for me was having an init() function run on both page load and the after hook. In this init function give each scrollTrigger an id relative to the section or functionality store those ids in an array then using the before hook loop through each id using `ScrollTrigger.getById(id)` and then run the kill() function Not tested the below code but should help understand what fixed my issue gsap.registerPlugin(ScrollTrigger); const prefix = 'className'; let triggerIDs; init(); function init() { const sections = document.querySelectorAll('sections'); triggerIDs = []; sections.forEach(function(element, index) { const tl = gsap.timeline({ scrollTrigger: { id: ID, markers: true, trigger: element, }, }) triggerIDs.push(ID) }); } barba.hooks.beforeLeave((data) => { triggerIDs.forEach(function(id) { ScrollTrigger.getById(id).kill(); }); }); barba.hooks.after((data) => { init(); });

You would have to adjust the logic a bit - and I think it should be enough to change the logic of the handleDirection() function. I changed ... // ...this... function handleDirection() { listening = false; if (direction === "down") { next = current + 1; if (next >= sections.length) next = 0; slideIn(); } if (direction === "up") { next = current - 1; if (next < 0) next = sections.length - 1; slideOut(); } } // ...to this... function handleDirection() { listening = false; if (direction === "down") { if( current !== sections.length - 1) { next = current + 1; slideIn(); } else { listening = true; } } if (direction === "up") { if( current !== 0) { next = current - 1; slideOut(); } else { listening = true; } } } ...and it appears to be working quite alright. I only tested with mouse-wheel though, so you might want to check for touch-devices yourself (and might have to incorporate some logic along those lines if it doesn't work well). Hope it helps a bit though. https://codepen.io/akapowl/pen/MWExqWb

You might want to check out the helper function from the docs: https://greensock.com/docs/v3/HelperFunctions#progressiveBuild https://codepen.io/GreenSock/pen/vYePKKd?editors=0010 Is that what you're looking for? As you seem to understand, Flip animations aren't ideal for building out long timelines because they're very much dependent on whatever the current state is when they start (which can be quite dynamic). So pre-baking them isn't really possible. The user might resize the screen or click on things that change state or whatever...AFTER you created the timeline. Typically Flip animations are best treated as one-off kind of things where you call a function and it handles it. But if you're trying to sequence things (like multiple Flip steps), then that helper function is a great way to do it.

thank you so much! I had tried it but didn't have it inside the closing bracket of the function so it made no difference. Thank you for your time. This works!

Hello @akapowl, Thanks for your swift response. The part on posting a minimal demo is well noted. Also, the examples given are ideal, the first one suits my use case perfectly, however, I noticed it scrolls infinitely, any suggestions on how to disable infinite scrolling from that example?

I think I got it. Instead of using the same ScrollTrigger as the smoothScroll, I created a new one for the contact section so I could manipulate it without the easing to get to the contact section. const viewport = document.getElementById('viewport') const sectionContact = document.getElementById('section-contact') const btnContact = document.getElementById('btn-contact') const stContact = ScrollTrigger.create({ trigger: sectionContact, start: 'top bottom', end: 'bottom top', scrub: true, toggleClass: 'content-active', }) btnContact.onclick = function (e) { e.preventDefault() const contactPosTop = Math.round(sectionContact.getBoundingClientRect().top) const viewportPosTop = Math.round(viewport.getBoundingClientRect().top) stContact.scroll(Math.abs(viewportPosTop - contactPosTop)) } 🥳

Hey @vsimak Since you said your codesandbox works straight up, the problems you encountered will likely not be related to that, but I noticed you were having an onStart-callback on that ScrollTrigger in there. While tweens and timelines do have those, ScrollTriggers do not - maybe you were going for onEnter there? As I said, it might very well not be the cause of your problems - just wanted to make sure

@OSUblake Ah yeah that's true. Will have a look at animations on wheel and touch events. Thanks for the help!

Hi @TSLMH. I'm a bit confused - was one of those CodePens supposed to show your example where you've got a horizontal section and more vertical page? I must be missing something obvious. I don't see anything broken. Can you elaborate a bit? I wonder if you just created your whole-page scroll progress ScrollTrigger first (before the one that does pinning...which would push the page taller). Have you tried just putting that one last? Or you can set start: 0, end: "max".

Much appreciated @akapowl, adding overflow-x: hidden on the horizontal section fixed it for me. Thanks for your help!

Sure, here's an updated version of that CodePen - I just added some resize logic to the helper function: https://codepen.io/GreenSock/pen/QWqoKBv?editors=0010 Is that what you meant?

Thank you for all your help on this and for posting these answers. I did solve the issue by using jQuery to calculate the progression of the count. Next week I'll figure out the new animation unique to the mobile - horizontal v. vertical. https://codepen.io/drs-nyc/pen/dyVajVm I'll come back to your updates. But, of course, the resizing issue with the sample posted with the two changes would have saved days of trying to figure out how to do it. Oh well, lessons learned. I agree that this library and the samples you have are terrific. I'm going to spend the hours on becoming proficient with this tool. I'm very impressed with what it can do. Unfortunately, I was not planning to hit so many snags, first realizing that scrolling sections would need a completely new approach and that resizing would break using published samples. This is a fantastic resource, and I'll soon get up over that learning curve. But, right now, I know too little to offer practical ideas. Again thank you for the prompt responses. Just knowing I wasn't doing it right was enough to power through to a new approach that did work.

Welcome to the forums @Wilson Kamau One option might be to use .addPause() to wait for the Flip animation to finish. I added a tiny delay to the second add pause here so it doesn't fire at the exact same time as the first one. GSAP Starter Template (codepen.io)

Hi @camiloignaval Welcome to the forum. Looks to me like you'll need to set the overwrite property to true in those tweens. (It's false by default) You could also create a timeline for each element and play/reverse it on enter/leave. Hopefully that helps. Happy tweening and welcome aboard.

If they were using ScrollTrigger, you'd see some scroll bars. My guess is that they are controlling the animation with wheel and touch events.