jh3y

A lot of fun ?Experimented with the opacity and dropped another `fromTo` to offset it slightly https://codepen.io/jh3y/pen/VwmZppG

@GreenSock I love it! ? https://codepen.io/jh3y/pen/xxRKggV I've gone through the code and retyped it to walk through. I think I understand most parts. Very clever! ? I'm looking to write this up/make a video on it at some point. It would be cool to show the evolution of implementing it. Of course, I'll be crediting this forum heavily ? I love the solution you've presented because it's GSAP'ping GSAP if I'm understanding it right which I think is brilliant. I've made some notes and things I've tried to understand. I'm more than happy with an ELI5 on some of these if you're able to. I'd love to properly understand it. I love this kind of thing as it gives me something new to dig into/challenge myself with understanding. - raw timeline powers card appearance. This is neat. Although my "Map" approach worked, this is more GSAPPY and accurate. If we wanted to offset the scale, etc. We'd introduce another `fromTo` with a `yoyo` and maybe a reduced duration with a delay/position? - Wrapping. This part seems straighforward. If we go forward, increment, if we go backward, decrement. Keep going backwards and we keep counting down from 10. The iteration is used for accuracy with the scrub? - The main mechanism. I think this is something I need to type out to clarify my thinking which could be off ? We use scrollTrigger to update the totalTime of the scrub. And that puts the loop playhead into different positions which in turn updates the position of the raw timeline? There's a bit to swallow there ? - The overlap part. I'm not 100% sure about how this works. This part I probably need a little ELI5 on as well. It's mainly this part. The overlap adds extra time playing the raw timeline which makes it loop round better. And that's because inside there would be a wrap in either direction? LOOP .to(RAW, { time: LOOP_TIME, duration: LOOP_TIME - START, ease: 'none', }) .fromTo( RAW, { time: OVERLAP * SPACING + 1 }, { time: START, duration: START - (OVERLAP * SPACING + 1), immediateRender: false, ease: 'none', } ) Sorry if these are obvious questions. I'd love to get a proper handle on this before attempting to write about it. Think it's a real cool thing to show. The idea behind building something like this was to use it to showcase the CodePen on my site with ?

Ooo, that works seamlessly ? Thank you @GreenSock I did change the demo a little to use a single tween. Then I use function based values to map how each visible element should appear. I'll see if I can fit that in ? This is really cool. Thanks for taking another look at it. Yeah, this sort of thing I love digging into! https://codepen.io/jh3y/pen/YzGmNLL

Yeah, that's what I was doing and it works for the most part if I disable `snap`. I did see that demo and also referred to how we used it for the DJ scratching demo. It was more curiosity for this one. I think I'm going to keep it as non-infinite and start it at an offset. Thanks again.

Ahh. That's great! Thanks. I did wonder if doing a little subtraction was the answer. But, I think I was subtracting from the whole thing which wouldn't work ?‍♂️ Ooo. I like that utility method approach. That's not one I've seen/tried. Thank you. I'll try that ? One other question/clarification. I'm not sure if this is possible. I tried some "Hacky" ways to try and get it there. But, is there a way to get infinite scrolling working with something like this using `onLeave` and `onLeaveBack`? with `snap`. I figure that would be hard because `snap` effects the progress and then it ends up jumping back and forth between the first and last getting caught in a snap loop. It's not a requirement for this, more so a curiosity of how to do it. I'm making some materials around making this and I can start the scroll at the mid-point so it starts with things on either side ?

Hey y'all! I'm messing around with this horizontal scrolling demo where I'm using ScrollTrigger and setting the body width to an excessive width. The effect works as expected when scrolling (I've not styled things up yet, POC ?). But, I want to add "Next/Previous" buttons to the UI and I can't see what obvious thing I'm missing ?‍♂️ "Previous" works as expected. But, "Next" is never able to reach the last item. I'm assuming I'm not doing something quite right in `SCROLLER.scroll` at Line ~#150. Or, my `start` and `end` isn't quite right? Could even be how I'm determing which item is the "Current" one. For that, I'm using `Math.floor(mapRange(0, 1, 0, CARDS.length, self.progress))`. And the snap "seems" to work. Anyone able to point out what obvious thing I'm missing? ??