Jump to content
Search Community

Force3d doesn't work

medmedmed75 test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

@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

  • Solution
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? 

  • Like 3
Link to comment
Share on other sites

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

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)? 

 

  • Like 1
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.
×
×
  • Create New...