Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ahmed Elabbasy

tilt effect

Recommended Posts

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

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 

transform.png

matrix.png

Link to comment
Share on other sites

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:

  1. 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
  2. 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. 
  3. 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!

  • Like 2
Link to comment
Share on other sites

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

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

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

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

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

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

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. 

  • Like 1
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×