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

I don't understand what you mean exactly here 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

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