Jump to content

jesper.landberg last won the day on January 6

jesper.landberg had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


jesper.landberg last won the day on January 6

jesper.landberg had the most liked content!

Community Reputation

36 Newbie

About jesper.landberg

  • Rank
    Advanced Member

Recent Profile Visitors

1,943 profile views
  1. 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?
  2. Am I the first one here to say u shouldn't animate backgroundPosition, but instead try to stick to transforms?
  3. 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
  4. @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.
  5. 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)
  6. 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?
  7. Yeah, got it to work with some if isActive() kill thing:P
  8. Hi, Any tips on preventing the blue layer to get "stuck" if hovering in/out very fast for a bit?
  9. jesper.landberg

    wave on image

    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.
  10. Yeah, i can just restart unfortunaly. Ohhh, I didn't even know about that plugin hah. Thanks.
  11. Hi, I have done a super simple typewriter effect, which works as intended, excerpt when u interrupt and restart it. The width of each char will just be correct until the previous reset point. Check the Pen to understand. If you let the whole timeline run before clicking the button, everything is fine, however, clicking it in the middle of the animation, messes up the next.
  12. @OSUblake Im animating tweens tied to scroll, and when doing an Y transform, the progress reaches 1 before the element of the tween is out of view. I reckon this is because in my this.elems array i'm only storing the start bounds of the elements, when I would need the end bounds. Take a look at the first animated element in this demo below, and u can see what I mean. So i was thinking that in my getElems method, maybe I should put the timeline progress to 1, set the bounds, then put it back to progress 0 ? .
  13. Hi, What would be the best way to get the end boundingRect of a tween? If I tween yPercent: 0 to yPercent: 200 for example. Would it be to store the rect in a variable in an onComplete callback or is there any better way?
  14. Hi, I'm trying to create a personal little mini lib/class to handle timelines tied to scroll. Could use ScrollMagic, but wouldn't learn much from that would I? Any feedback on what is done so far? Thinking about how I would play more advanced timelines, rather than just simple fromTo's. I guess those would be best of defined in the javascript, but trying to think of an elegant solution to that, any tips? Currently I define animations through data attribute, as valid json. Also, is it possible to get the end bounds/rect of a timeline/tween element in advance? Or would I need to put progress(1) .. get new rect... put back to progress(0) ?