jesper.landberg

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

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?