Jump to content

Ahmed Elabbasy

  • Posts

  • Joined

  • Last visited

Posts posted by Ahmed Elabbasy

  1. 2 minutes ago, Rodrigo said:

    If I was you I'd be trying to figure how make the setup work with a simpler base without the custom scrollbar, just an event that moves the component in the Y axis and then add more features to it.

    I don't understand what you mean exactly here


    2 minutes ago, Rodrigo said:

    Mhh... Have you measured such behaviour with the performance tool in dev-tools or the profiler in react dev-tools? It seems more annoying than anything, but keep in mind that a high order component is just a function, so everytime you invoke that function the resulting component (with it's children) is returned to the DOM and all the code inside is executed as well.

    I haven't tried the performance but that sounds expensive at first

    I ended up having to use this

       bodyScrollBar.current = Scrollbar.init(ref.current, {
          damping: 0.1,
          delegateTo: document,
        bodyScrollBar.current.setPosition(0, 0);
        ScrollTrigger.scrollerProxy(ref.current, {
          scrollTop(value) {
            if (arguments.length) {
              bodyScrollBar.current.scrollTop = value;
            return bodyScrollBar.current.scrollTop;
      return (
        <div className="content-scroll" style={{ height: "100vh" }} ref={ref}>
          {props.render(bodyScrollBar, ref) // If i pass this "ref" to the component it will run when resize the browser The lane reference itself must be used }

    It didn't even work, but it did enough, but there is a real problem. Comment on the code above

  2. note: if i pass a ref like this to component who need to make scrolltrigger animation

    It ends up happening that this will only work when you change the browser size

    <Scroller ref={scrollRef}> // this wrapper component with smooth scroll and scrollTrigger setUp
          <Header scroller={scrollRef} /> // component need to animate in scroll


  3. For example, if I own a picture that moves with the scroll
    I will not be able to place the animation inside its component, for example if I want to use the image in 4 places then I will write the same animation every time. Measure against this, each component should write its own animation inside the wrapped component

  4.  I will lose the ability to reuse the component because each component has to be located inside the file that passes the reference

     eventually get a loop that will repeat the same component and animation And the size of one component will get bigger


  5. hi rodrigo thank you for your reply


    I tried to put everything in one file and this worked and I don't see any difference in passing Scroller as prop 

    I'll try this with forwardRef and tell you but still that's weird


  6. You were giving me solutions that were related to the heart of the matter, and in the end, did you not understand?

    I was just wondering that the code I wrote above doesn't work, it shows a performance issue without tilt affecting it at first. It was a performance problem and there is an effect. This is the content of my last question. Not whether I'm using a swiper or not.
    It is definitely my fault and I will try to fix it
    I deeply apologize for your time

  7. I am not asking questions outside of gsap
    In the above link the effect does not fire and I have the same problem with dragge
    Well, I'm really sorry for so many questions
    Thanks Jack Thank you Zach

  8. I thought moving to Matrix would solve the problem because I saw a similar example that works well and the only difference here

    I had to think well onmousemove but I need readers for x and y movement constantly


    I already created your idea, but it didn't work. Is it because I am using an invalid functions?




  9. hi jack sorry for that.

    I reduced the code
    my problem is that the drag becomes slow with the tilt effect I want change transform to matrix like this