jesper.landberg

@kaii299u mean like this? https://codepen.io/ReGGae/pen/NWyXyQW/76fd403186d915438ae01b7cea93d55b?editors=0010

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

I think this illustrates my issue. the defaults immediateRender doesn't seem to apply on the .set? is this correct behaviour? Have I missed something about this in the release docs maybe?:) https://codepen.io/ReGGae/pen/0b7cfd3fd2f0e15ffd381920c4701048?editors=0010

It's super weird, immediateRender is deffo not happening (or well it looks like it isn't) on any timeline on the whole site i'm building. Reverting back to 3.0.1 makes it work tho. Didn't update my splitText plugin tho, not sure if that can have some side-effects on things? But it's just not on split animations. Anyway, il try to see if I can reproduce it later on a pen or something.

Updated from 3.0.1 to 3.2.2 and now my stuff isn't rendered before play() is called. Example code: tl = gsap.timeline({ paused: true, defaults: { immediateRender: true } }) .set(parent, { overflow: 'hidden' }) .from(child, { yPercent: 100 }, 0} setTimeout(() => { tl.play() }, 2000)

Hi, How do I get rid of all the warnings in the console? For example when tweening custom object properties, setting overflow etc. GSAP target not found. https://greensock.com Invalid overflow tween of hidden Missing plugin? gsap.registerPlugin()

@andsavu @ZachSaucier It's indeed made with WebGL, with most of the magic happening in custom shaders. It's really a bit to much to get into without writing an article about it, but if you @andsavu want to learn creating these kind of things i'd recommend some of the following resources: https://webglfundamentals.org/ https://thebookofshaders.com/ https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html Also https://tympanus.net/codrops/ have some great tutorials on the topic. Oh and @ZachSaucier thx for the resize heads-up, will fix it:)

Reason u aint seeing any gsap called (I guess) is because my slider actually didn't use gsap, in my pen it was only used for the transition and the other non-slider effects. I guess whoever made the webflow demo just added the dependencies from my pen.

In functions that are called quite often I usually do something like this: if (tl) { tl.kill() } tl = new TimelineLite() .to(... Is that better or worse than just... return new TimelineLite() .to(... Might be a silly question just want to know if my way is more performant/optimal/worse in any way versus the below.

Haha, it might have been:) Crazy that such an easy calculation can be such a game changer:P

Oh snap how could I miss this... thanks!!:)