Ahmed Elabbasy

My previous experience with this was not good but I used ScrollMagic to solve the current problem until there is another solution
Thanks for your interest, I will try this library with Scrolltrigger and let you know

I can't believe this only works with one component if I animate more than one component it won't work @Rodrigo

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);
    bodyScrollBar.current.track.xAxis.element.remove();

    ScrollTrigger.scrollerProxy(ref.current, {
      scrollTop(value) {
        if (arguments.length) {
          bodyScrollBar.current.scrollTop = value;
        }
        return bodyScrollBar.current.scrollTop;
      },
    });

    bodyScrollBar.current.addListener(ScrollTrigger.update);
  });
  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 }
    </div>
  );
});

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

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
        
    </Scroller>

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

 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

https://codesandbox.io/s/proud-pine-y523d?file=/src/test.jsx

Take a look here, it works well, but this may affect the performance. This does not return a new component, but I don’t know what is the difference.

in the image below this hoc pattern when i pass a ref as prop 

 This passes the right dom,But this does not affect scrolltrigger

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

I tried something similar before creating this topic and it didn't work so I removed it at first inside the link
 

Thank you and sorry for bothering you reading the code

It does not run at all locally and does not contain any console messages
Everything looks fine and there is no effect from the scrolltrigger

First of all, I thank you for the response

It may sound strange, but this worked for a moment and paused

I didn't make any changes until I just reloaded the page and it no longer works

i have been create a hoc to use smooth scroll and  scrolltrigger in specific component

But that doesn't work

Should I put things higher up? Such as App.js or target a body tag ?

https://codesandbox.io/s/cranky-brown-yvzss?file=/src/test.jsx

See the Pen test.jsx by s (@s) on CodePen

I am having some problems when create a fake smooth scrollbar with Scroll Trigger such scroll to element but i will try again 
thx Zach

https://codesandbox.io/s/little-pond-kfvfq

I have used scroller  property  and markers don't move 

If you want to see what I want to accomplish here
Delete
Position: fixed  in content-scroll

and remove  scroller  property 

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

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

I get the same problem but without  tilt
https://codesandbox.io/s/broken-currying-05h9k

Could the problem be outside the scope of the code?
One of the performance problems as you mentioned

This is the first example
Here I get a performance issue

https://codesandbox.io/s/broken-currying-05h9k

jack told me :: 

you could create a single linear tween of the tilt (rotationX, rotationY, etc.) of the element up front, pause() it, and then in your onmousemove handler you could animate the playhead of that tween. That may be more efficient. 

And here I tried to do this

https://codesandbox.io/s/winter-bash-k56in

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?

https://codesandbox.io/s/winter-bash-k56in

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 

How can I change the transform to matrix
I find it difficult to drag in the slider when creating the tilt effect as well as some delay in changing the slide and I think this will fix it just a belief
I use gsap.to

https://codesandbox.io/s/broken-currying-05h9k

hi Zach

Thanks for the quick reply ..
I am learning from old sources to understand it more deeply and I am a little distracted from your documents Can you tell me a video source to learn?
As for the problem, it has been solved

className: "+=active" just remove all class's and so on

https://codesandbox.io/s/affectionate-cookies-9hccc

See the Pen by s (@s) on CodePen

Thanks a lot. I think I have come to a solution now

If there is no error setting up or installing the plugin, I can play around
But how can I reduce the speed of scrolling?
at the end, I really sorry for your time