Ahmed Elabbasy Posted June 14, 2020 Share Posted June 14, 2020 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 Link to comment Share on other sites More sharing options...
GreenSock Posted June 14, 2020 Share Posted June 14, 2020 I read your question a few times and I'm still lost. Can you please clarify what you're asking and maybe provide a reduced test case that ONLY has the absolute essential code? Literally one <div> if possible. It makes troubleshooting much faster and gives you the best chance of getting us to understand what you mean. We'd love to help - I just don't understand what you're asking. Link to comment Share on other sites More sharing options...
Ahmed Elabbasy Posted June 14, 2020 Author Share Posted June 14, 2020 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 Link to comment Share on other sites More sharing options...
GreenSock Posted June 15, 2020 Share Posted June 15, 2020 I still don't understand. Are you asking for a mathematical equation that will allow you to convert a bunch of individual transform operations into their matrix3d() equivalent? And are you saying that you think converting it is going to somehow make it faster? You mentioned several times that "the drag becomes slow". If you're trying to solve a performance issue by defining the transform as a matrix3d() instead of a string of instructions, trust me - that will NOT solve the problem. I glanced at the performance profile in your link and there were massive hits on the rasterizer thread. That's almost surely the issue. I also noticed a few other problems: You're using an onmousemove handler and creating a tween in that handler which is highly inefficient. Be very careful about onmousemove - that can fire multiple times per requestAnimationFrame so it can be wasteful to constantly create tweens in that handler You forgot to set overwrite: true or overwrite: "auto" on your tweens that you're creating in that onmousemove. That's a BIG problem because you're constantly creating new tweens that are fighting with the old tweens that haven't finished yet. So if a user moves their mouse for 1 second, you could have 60 or even 100 tweens all fighting for control of the same properties of the same object. You don't need to set the transformOrigin and transformPerspective on every...single...tween. It'd be much more efficient to just gsap.set() it initially and be done. Idea: 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. Anyway, I hope that helps. Happy tweening! 2 Link to comment Share on other sites More sharing options...
Ahmed Elabbasy Posted June 15, 2020 Author Share Posted June 15, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 Hey Ahmed. 15 minutes ago, Ahmed Elabbasy said: 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 What you're trying to do there is update the variables that were previously used as end values of the tween. That won't work - it'd be terribly expensive for GSAP to have to watch those variables and create a new tween every time that they changed. I don't know exactly what effect you're going for because both of your links point to the same demo. It'd be really helpful if you saved new versions of your demo each time that you make changes. That way people reading the thread later can see the progressions. What Jack was suggesting though was to create an animation with static values and then use .progress() on that tween depending on the position of the mouse. That may not be the effect that you're going for. Like I said, I don't know what effect you're going for. Link to comment Share on other sites More sharing options...
Ahmed Elabbasy Posted June 15, 2020 Author Share Posted June 15, 2020 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 Link to comment Share on other sites More sharing options...
GreenSock Posted June 15, 2020 Share Posted June 15, 2020 Those both look the same, and neither applies anything like what I suggested. You could do something like this which reuses the same tween instance every time: gsap.set(Tilt, { transformPerspective: 2000, transformOrigin: "center" }); var tween = gsap.to(Tilt, { duration: 0.6, ease: "power1.inOut", paused: true }); document.addEventListener("mousemove", event => { tween.vars.x = (event.pageX / window.screen.width) * (maxTilt * 2) - maxTilt; tween.vars.y = (event.pageY / window.screen.height) * (maxTilt * 2) - maxTilt; tween.invalidate().restart(); }); The same goes for your cursor. But again, I think a large portion of the performance issue comes from rendering-related tasks, GPU, etc. which has nothing to do with GSAP. Good luck! Link to comment Share on other sites More sharing options...
Ahmed Elabbasy Posted June 15, 2020 Author Share Posted June 15, 2020 I get the same problem but without tilthttps://codesandbox.io/s/broken-currying-05h9k Could the problem be outside the scope of the code? One of the performance problems as you mentioned Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 Hey Ahmed. Unfortunately we don't have the capacity to debug and audit your non-GSAP related code. If you have GSAP related questions we're happy to help! Just let us know. Link to comment Share on other sites More sharing options...
Ahmed Elabbasy Posted June 15, 2020 Author Share Posted June 15, 2020 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 Link to comment Share on other sites More sharing options...
GreenSock Posted June 15, 2020 Share Posted June 15, 2020 I still don't understand your GSAP-related question I guess. And you're using a 3rd party library, Swiper. If you still need help, please create a reduced test case with only GSAP-related code (no Swiper) and clarify what you need. We'd love to help, but Zach and I are struggling to discern what you need and get things isolated. It sure looks to me like all these issues have nothing to do with GSAP. Like I said earlier, there's clearly a performance issue related to rendering which is totally unrelated to GSAP. 1 Link to comment Share on other sites More sharing options...
Ahmed Elabbasy Posted June 15, 2020 Author Share Posted June 15, 2020 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now