PedroZorus Posted March 20, 2020 Share Posted March 20, 2020 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 More sharing options...
ZachSaucier Posted March 20, 2020 Share Posted March 20, 2020 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}); 1 Link to comment Share on other sites More sharing options...
PedroZorus Posted March 21, 2020 Author Share Posted March 21, 2020 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 More sharing options...
ZachSaucier Posted March 21, 2020 Share Posted March 21, 2020 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. 2 1 Link to comment Share on other sites More sharing options...
PedroZorus Posted March 22, 2020 Author Share Posted March 22, 2020 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 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 23, 2020 Share Posted March 23, 2020 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 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