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

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

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