jesper.landberg

I tried lerping towards the target on click instead but since im wrapping it didnt work as I wanted, it probs would if I didnt do that tho, but would been hard getting an exact duration tho. In the end I achieved what I wanted doing some math in a shader (since its webgl). If u want to see, towards the end of the clip attached u can see that the grid item now snaps into place when opening/closing even if the grid is moving. which I struggled with using pure JS. grid.mp4

See the Codepen. Obviously when u click, obj animates to the value target had on click. But if I wanted obj to animate to whatever value target would have at the end of the 1 second duration, how would you approach that? My initial thought is doing a lerp, but I wanted to see if GSAP has some clever functionality for this case first. I think FLIP can do something similar? Code from the Codepen: const target = { x: 0, y : 0 } const obj = { x: 0, y: 0 } const targetEl = document.querySelector('.js-target') const objEl = document.querySelector('.js-obj') objEl.textContent = `x: ${obj.x}, y: ${obj.y}` function tick() { target.x = gsap.utils.wrap(0, 1000, target.x + 1) target.y = gsap.utils.wrap(0, 1000, target.y + 1) targetEl.textContent = `x: ${target.x}, y: ${target.y}` } gsap.ticker.add(tick) document.addEventListener('click', () => { gsap.to(obj, { duration: 1, x: target.x, y: target.y, onUpdate: () => { objEl.textContent = `x: ${obj.x}, y: ${obj.y}` } }) })

This is a great start, thanks Blake! No code to share just yet, just starting out testing Next, and wanted to make sure I start out properly:P

Hi, just reaching out to see if anyone is using GSAP together with Next.js and are able to share/point me towards some good and up to date code examples?

Thanks @ZachSaucier, the direction one fits my needs, thx!

Hi, Trying out ScrollTrigger, which seems awesome. Testing out pinning atm and works great. Just wondering in what way you would recommend doing non-scrubbed tweens in a scrubbed timeline, like: const tl = gsap.timeline({ scrollTrigger: { // Pin true and other stuff scrub: true } }) .to(otherElem, { yPercent: -100 }) .to(elem, { alpha: 1 }) // Non scrubbed Currently I tried doing the below, but not sure how I would approach when it goes in reverse direction const tl = gsap.timeline({ scrollTrigger: { // Pin true and other stuff scrub: true } }) .to(otherElem, { yPercent: -100 }) .add(() => { gsap.to(elem, { alpha: 0 }) })

Sorry as usual I suck at explaining my issues haha:) but ur answer still managed to clear it up for me and my personal smooth scroll now works fine with this:) Thanks!

@GreenSock hey, so i'm checking out some scrollProxy examples, and just have a question, what does the passed element do? Is there any reason we can't just send our custom scroll position in? Is the proxy element the transformed element? Like In my case where I have multiple scroll sections (pages are divided into sections and each has their own transforms, which is being transformed when the section is visible) I don't have the one transformed proxy. scrollerProxy(".proxy", { <!-- what does this do here? --> scrollTop: mySmoothScrollPos, });

Hey, i put together a quick codepen demonstrating how to do it with WebGL. https://codepen.io/ReGGae/pen/rNxpVEd?editors=0010

@GeS @ZachSaucier In my case I use WebGL for the effect. Here I put together a quick codepen to demonstrate how it can be done. https://codepen.io/ReGGae/pen/rNxpVEd?editors=0110

Well I would assume ScrollTrigger uses cached boundingRects of elements, then comparing that to the scroll value (I might be totally wrong tho) ? In that case why wouldn't it be helpful to allow ppl to pass their own scroll value? Pseudo code: ScrollTrigger.useEvents(false) // In a raf Scrolltrigger.update(myLerpedScrollValue) I have my own solution where I do what u say, pass a progress value based on start/end values using my lerped scroll to the progress() method. But with this obviously goes checking if the element is in viewport, doing the calculations etc etc. And ScrollTrigger does all this plus much more than my own solution, so obviously it would be helpful?

Hey, basically so I can use it with my own virtual scroll, with my lerped scroll value, instead of using the default event (scroll using scrollTop?).

Hey, simple question, is it possible to "inject" my own scroll values / events using the new ScrollTrigger?

Hey sorry for the late reply. But yes after updating to the latest version all my issues seem to be gone:)

I see, have this behaviour changed since 3.0.1 then? Just found it a bird weird that everything went crazy after updating without touching the code:P