Jump to content
Search Community

Resize deforms tween but when page is refreshed tween is fine

PedroZorus test
Moderator Tag

Recommended Posts

Hi, I meet a simple problem with a tween : when I execute a first time my tween and then resize my window, the tween is happens badly, but if I refresh my page everything works fine, I've searched on forums but I don't find expected results 😕 

 

In a first time, I've thinked the problem was linked to my CSS properties but when GSAP tweening it uses pixels values, and that's my only clue to resolve the problem.

 

 

Here, an attached minimal repository :

https://github.com/pierredarrieutort/Jape/tree/minimal_repo_for_menu

Link to comment
Share on other sites

Hey Pedro.

 

Situations like this are much easier for us to help if you make a minimal demo in something like CodePen :) See the thread below for more information:

 

Also a description of how the animation breaks on resize would be helpful.

 

Looking at your code, I have a few recommendations:

  • Don't use .removeAttribute( 'style' ). Use GSAP's clearProps property, i.e. gsap.set('#menuWrapper>.button path', {clearProps: true});
  • Don't set styles using .style.transform. Use GSAP's .set() method, i.e. gsap.set('#menuWrapper>.button text', {x: 0});
  • Like 1
Link to comment
Share on other sites

Hi, thanks of your answer and your time, I've followed your advices (and made a codepen demo

See the Pen bGdxbvm?editors=0010 by Pierre-Darrieutort (@Pierre-Darrieutort) on CodePen

)

 

The problem is persistent after change my errors by your previous GSAP functions 😕 

I still observing a bug when I resize my window to execute a second time my tween and if I refresh all is okay for the first tween and after one resize the same problem happens.

Link to comment
Share on other sites

Ya, the suggestions I made were just improvements unrelated to the core issue. 

 

It's hard to tell exactly what's going on because your approach is a bit muddied to me at least. I don't really understand why you need anything other than setting or removing the class (if that) in the callbacks. Your logic in the click listener is also a bit confusing to me (I understand what it's doing, just not why you set it up to be that way). I also don't really understand the purpose of the .set() calls in the timeline itself. 

 

Perhaps it would be helpful to create a version that only uses .fromTo()s so that you can nail down exactly what you're wanting the values to go to and from? That might help in figuring out which piece isn't acting like you expect it to on resize.

 

Personally I would create the animation of the blob by animating the d attribute and perhaps using a scaleX. It's best to avoid animating width and left for performance reasons. 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Hi, I'm back, I've followed your advices and solved my issue, it was about the default units of gsap was set to pixels and pass them to percent solved everything in addition to set "fromTo" tweens instead of "from" or "to" tweens and cherry on the cake, the timeline is now easily readable ! 🙂

 

Now i just need to take care about others "left" unit values in my others tweens or it's possible to limit the propagation to a module 🤔 ?

I could otherwise redefine gsap.config with each function call ?

 

See the Pen bGdxbvm?editors=0010 by Pierre-Darrieutort (@Pierre-Darrieutort) on CodePen

  • Like 1
Link to comment
Share on other sites

On 3/22/2020 at 10:27 AM, PedroZorus said:

Now i just need to take care about others "left" unit values in my others tweens or it's possible to limit the propagation to a module 🤔 ?

I could otherwise redefine gsap.config with each function call ?

I don't understand - what are you trying to do? Change the default unit every update?

 

Redefining gsap.config every function call is probably not the best idea. Most likely there's a better solution. 

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