medmedmed75 Posted November 3, 2020 Share Posted November 3, 2020 Hey everyone! I have some trouble using force3D Here is an example: const tl = gsap.timeline() gsap.config({ force3D: true }) tl .set('div', { yPercent: 100 }) .to('div', { yPercent: 0, duration: 1, delay: 1 }) Maybe i'm using it wrong? (I don't create a codepen because the code is very simple) Many thanks for your help Link to comment Share on other sites More sharing options...
GreenSock Posted November 3, 2020 Share Posted November 3, 2020 What makes you think that force3D isn't working? A simple CodePen would be super helpful. I just tested your code and it worked perfectly for me. Perhaps I'm missing something that a demo would make more clear. 1 Link to comment Share on other sites More sharing options...
medmedmed75 Posted November 3, 2020 Author Share Posted November 3, 2020 @GreenSock thanks for your response! Maybe I'm confusing with the translate(...) and translate3d(...) I see in Chrome Devtool. During the tween, I see translate() (with values changing) and translate3d(0, 0, 0) with no values changing. I mean, I thought I would only see translate3d performs does that mean it's working? Link to comment Share on other sites More sharing options...
Solution GreenSock Posted November 3, 2020 Solution Share Posted November 3, 2020 11 minutes ago, medmedmed75 said: does that mean it's working? Yep, it's working. Keep in mind that GSAP allows you to combine percent-based values AND normal ones which can be very powerful. For example, it's common to use xPercent: -50, yPercent: -50 to center an element and THEN move it with normal x/y transforms. force3D: true just ensures that there's a translate3d() applied which causes most browsers to GPU-accelerate (layerize) the element. Does that clear things up? 3 Link to comment Share on other sites More sharing options...
medmedmed75 Posted November 3, 2020 Author Share Posted November 3, 2020 If I understand well, the transform3d is here just to perform the tween via the GPU (the thing I want btw lol)? So the motion is still performing by the transform() and not the transform3d? And, last question, what about scale3d? Can I use it just using force3D? Many thanks for your clarification, it helps a lot! 🙏 Link to comment Share on other sites More sharing options...
GreenSock Posted November 3, 2020 Share Posted November 3, 2020 6 minutes ago, medmedmed75 said: If I understand well, the transform3d is here just to perform the tween via the GPU (the thing I want btw lol)? So the motion is still performing by the transform() and not the transform3d? Yep. 5 minutes ago, medmedmed75 said: And, last question, what about scale3d? Can I use it just using force3D? I don't quite understand why you'd want to do that. In GSAP, the 3D forcing occurs on the translate, not the scale. Can you explain what your goal is (and why)? 1 Link to comment Share on other sites More sharing options...
medmedmed75 Posted November 3, 2020 Author Share Posted November 3, 2020 Sorry, it was just a misunderstanding on my part (about scale3d). All is very clear, thank you so much for your help and reactivity! 1 Link to comment Share on other sites More sharing options...
GreenSock Posted November 3, 2020 Share Posted November 3, 2020 No problem! Happy tweening. 1 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