jesper.landberg

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!!:)

So If I have a timeline like this random example: const tl = new TimelineMax() tl .from(el, 1, { yPercent: 100 }) .addCallback(someFunction, 0.5) .to(el, 1, { xPercent: 100 }) But need to change the progress initially like: tl.progress(1).progress(0) How would u do this without calling the callback? I tried removing it from the timeline, and add it like below, but doesn't seem to work as I want? const tl = new TimelineMax({ paused: true ) tl .from(el, 1, { yPercent: 100 }) .to(el, 1, { xPercent: 100 }) tl .progress(1) .progress(0) .addCallback(someFunction, 0.5) .play()

Can I force matrix transforms? I find those smoother then the "translate(XX, XX) translate3d(0, 0,0)" ones.. or am I just imagining this?

Hi, What I want to do: Repeat part of a timeline infinite, until a window.onload callback, after which the timeline should play out fully. Any tips how to do?

Am I the first one here to say u shouldn't animate backgroundPosition, but instead try to stick to transforms?

You probs solved this already but the problem is in your prev() function, ur just setting this.data.next. It should/could look like this: prev() { if (this.data.animating) return this.data.direction = "back" this.data.next = this.data.current this.data.current = this.data.current == 0 ? 2 : this.data.current - 1 this.slideIt() } Then u could just check the direction in slideIt() for example like this: const translateX = this.data.direction === 'back' ? -100 : 100

@TEQQED What I would do is create a GSAP timeline, then increase the progress of it tied to scroll. Here I created a quick demo, it doesnt have the perspective/angle, but u get the point.

I need to update those demos to some fresher/better ones:P Between the other code in those demos the actual logic for the effect is pretty straight forward. You just lerp the scroll value, check the diff between the new and old value... and apply that value to anything.. like a skew in this case. Something like the below (not tested). let scrollTarget = 0 let scrollCurrent = 0 let ease = 0.1 const skewTarget = someElement window.addEventListener('scroll', () => { scrollTarget = window.scrollY }) function render() { scrollCurrent += (scrollTarget - scrollCurrent) * ease const diff = scrollTarget - scrollCurrent const vel =+ diff skewTarget.style.transform = `skewY(${vel}deg)` requestAnimationFrame(render) } requestAnimationFrame(render)

Makes sense, thanks:)

Hi, I updated my gsap version, no other changes done. Now my transitions doesn't "immediaterender", instead the elements show in the regular state before the timeline and tweens start. Did 2.1 change the default behaviour of this?

Yeah, got it to work with some if isActive() kill thing:P

Hi, Any tips on preventing the blue layer to get "stuck" if hovering in/out very fast for a bit?

Hi, I made this site, the image is rendered with three.js, and the effect is made in a shader distorting the UV values with some sin and cos math.

Yeah, i can just restart unfortunaly. Ohhh, I didn't even know about that plugin hah. Thanks.