jesper.landberg last won the day on January 6

jesper.landberg had the most liked content!

jesper.landberg

ShockinglyGreen
  • Content Count

    92
  • Joined

  • Last visited

  • Days Won

    1

jesper.landberg last won the day on January 6

jesper.landberg had the most liked content!

Community Reputation

22 Newbie

About jesper.landberg

  • Rank
    Advanced Member

Recent Profile Visitors

1,780 profile views
  1. jesper.landberg

    Hover gets "locked"

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

    Hover gets "locked"

    Hi, Any tips on preventing the blue layer to get "stuck" if hovering in/out very fast for a bit?
  3. 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.
  4. jesper.landberg

    Problem with animating/reseting width

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

    Problem with animating/reseting width

    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.
  6. jesper.landberg

    Get end boundingRect for Tween?

    @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 ? .
  7. jesper.landberg

    Get end boundingRect for Tween?

    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?
  8. jesper.landberg

    Super simple GSAP tied to scroll.

    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) ?
  9. jesper.landberg

    Get drag force

    Thanks, appreciate it:) If you like those stuff i will probs like my next prod that is going live within a week or so, pretty proud of it:) Smoother than ever!:P
  10. jesper.landberg

    Gsap values/props from data-attribute?

    There it was, thanks you:)
  11. jesper.landberg

    Gsap values/props from data-attribute?

    Hi, Im trying to build out some timelines based on props and values from data-attributes. However it doesn't seem to work, and it's throwing no errors or doing nothing when i try to play or build it. What am I missing? Looks like this: <figure class="c-photos__img c-photos__img--1"> <div data-from="yPercent: 0, rotation: 0" data-to="yPercent: -100, rotation: 5, ease: Expo.easeOut"> <img src="/static/images/photo-1.jpg"> </div> </figure> <figure class="c-photos__img c-photos__img--2"> <div data-from="yPercent: 0, rotation: 0" data-to="yPercent: -100, rotation: 5, ease: Expo.easeOut"> <img src="/static/images/photo-3.jpg"> </div> </figure> <figure class="c-photos__img c-photos__img--3"> <div data-from="yPercent: 0, rotation: 0" data-to="yPercent: -100, rotation: 5, ease: Expo.easeOut"> <img src="/static/images/photo-3.jpg"> </div> </figure> <figure class="c-photos__img c-photos__img--4"> <div data-from="yPercent: 0, rotation: 0" data-to="yPercent: -100, rotation: 5, ease: Expo.easeOut"> <img src="/static/images/photo-4.jpg"> </div> </figure> <figure class="c-photos__img c-photos__img--5"> <div data-from="yPercent: 0, rotation: 0" data-to="yPercent: -100, rotation: 5, ease: Expo.easeOut"> <img src="/static/images/photo-5.jpg"> </div> </figure> this.dom.elems.forEach(el => { const tl = new TimelineLite({ paused: true }) const from = el.dataset.from const to = el.dataset.to tl.fromTo(el, 1, { from }, { to }) tl.play() // Example, this won't play or throw any error this.elems.push({ tl: tl }) })
  12. jesper.landberg

    Get drag force

    Hi @Noturnoo ! Sorry I just saw this thread now, did you archive your goal? It was me who developed the Asaro site including the slider ur referring to.
  13. jesper.landberg

    Interupt timeline with other timeline? "smooth transition"

    Cool thanks, would it be possible to reverser the order of the stagger also? 0.075 -> -0.075 I think maybe this is more of an issue with the first tween/timeline getting overwritten? Is there any way to interupt, but not kill the other tween so it can be played again?
  14. jesper.landberg

    Interupt timeline with other timeline? "smooth transition"

    Well yeah kind off... but what I dont like when doing reverse() is the reversing of the easing functions. I would want easeOut both directions, not easeIn which it is when doing reverse. Thats why I'm doing two timelines. Do you understand?:)
  15. jesper.landberg

    Splittext animation not running.

    Hmm. But I revert the splittext, and clear all styles from the title. And also when i switch page the title is removed from the dom, and then inserted again. I also to a fromTo, but it only sets the from values, just won't animate. I will see if I can get a simple demo up.