Jump to content
Search Community

clearprops causing animation to jump when complete timeline

harp test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello folks!!

Hope everyone is having a great Saturday! I have a question. 

I created a slider and it fades the image in from scale value 1.2 to 1 and fades out to scale value .8
then I'm resetting the image so it will come in back from value 1.2 with clearProps: 'scale(1.2)'

It all works fine but once the image scales to value 1 it jumps.. not sure why, tried to use clearProps: 'all' but just need scale to go back to value 1.2 before the image fades in.

issue seems to be the clearProps which is located on line 111 and 144. Also, to add in my css I have set the transform: scale(1.2) so the first image starts from that value and also in clearProps it keeps resetting to 1.2(default css value). Let me know if this approach is wrong and whatelse I maybe doing wrong. Thank you all!

Here is the codepen:

https://codepen.io/harp30/project/editor/ALPxOW

See the Pen ALPxOW by harp30 (@harp30) on CodePen

Link to comment
Share on other sites

I didn't have time to dig through all your code (a reduced test case would be super helpful), but I'll mention a few things:

  1. Beware that clearProps removes the inline styles, so if you've got a CSS rule somewhere that'd affect the element, that'd take effect once inline styles are cleared. 
  2. It's pretty rare that you'd need clearProps at all - is there a reason you're not just setting the scale to the value you need, either in a set() or a fromTo()? In other words, if your goal is to go from a scale of 1.2 to 0.8 and then do that again, it'd probably be better to simply do a fromTo() and specifically define those values (or do a repeat on the tween). 
  3. You mentioned clearProps:"scale(1.2)" but that's not valid - clearProps is just a comma-delimited list of the inline styles you want cleared, so it'd be clearProps:"transform" or clearProps:"scale" in this case. But again, I highly doubt you need clearProps at all. 

If you still need some help, it'd be best to have a reduced test case with only the absolute minimal amount of code to reproduce the issue. 

  • Like 2
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...