Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
bdrtsky

What is causing initial glitch?

Recommended Posts

Hi everyone!

 

I am trying to make simple hover 3d tilt effect with GSAP. All seems fine, but one buggy thing - on initial page load, when you first hover on card, there's super fast transformation happens, and I don't understand why this is happening? How to fix it? I tryed to put CSS `transition` on whole card, and this "glitch" is now animating. But what cause it in first place?

 

Here I made repro (duration is super slow, so you can see this initial jerking): 

 

See the Pen wNxpVW by bdrtsky (@bdrtsky) on CodePen

Link to comment
Share on other sites

Hi @bdrtsky,

 

It's the jump to the transformPerspective and transformOrigin during the initial tween. If you set it before hand, I think you'll get what you're looking for.

 

See the Pen zeLRpe by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

  • Like 5
Link to comment
Share on other sites

Amazingly simple solution. Thank you! 

  • Like 1
Link to comment
Share on other sites

By the way, for the future - why my Codepen link didn't embed? 

I am actively learning GSAP right now, so you might expect a few more questions, if you please ?

Link to comment
Share on other sites

4 minutes ago, bdrtsky said:

By the way, for the future - why my Codepen link didn't embed? 

 

I've had that happen occasionally ... I think it's just a hiccup. :) 

  • 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.
×