Nisanez Posted July 15, 2020 Share Posted July 15, 2020 Hi GreenSock forum! I am working on migrating some code-base to GSAP 3. However, I noticed a difference in behaviour that makes my life a little difficult and maybe there is a solution I am not aware of. While using GSAP 2, I used the assumption that undefined values are ignored and does not effect the animation. As can be seen in this codepen I created: Quote So some of the code has objects that part of the time contains 'undefined' values in case they does not interest me. When trying to migrate to GSAP 3 I noticed that when an undefined value is encountered the timelines just stops or behaves undefined. Forcing me to create 'clean' object for every scenario and make sure there are no undefined values. As can be seen in this codepen: See the Pen yLeqBJq by Nisanez (@Nisanez) on CodePen Is there a way I can migrate without the huge change of code? Thanks! Nissim See the Pen YzwLjvd by Nisanez (@Nisanez) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted July 15, 2020 Share Posted July 15, 2020 Hi @Nisanez First off, I don't think your syntax is quite up to par when it comes to timelines. What you are doing there can be achieved in a much cleaner way. Second, in your case there really is no need to use .fromTo - for what you are doing there, you can just use .to for the seperate animations. The timeline takes the values of the previous animation into account for the upcoming. And that probably also gets rid of your 'undefined' problem. Check this pen and look how easy that seems: See the Pen 220761a8a79111b5fba65a06bcc055a9 by akapowl (@akapowl) on CodePen Hope I understood you right, and this helps. And maybe also check the docs to get a better understanding of timelines: https://greensock.com/docs/v3/GSAP/Timeline Cheers, Paul 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 15, 2020 Share Posted July 15, 2020 Using relative tweens as Paul suggests is a good idea. You could bring the code to the next level by using GSAP 3's defaults and keyframes features! The same code above could be written like so: gsap.to( ".orange", { defaults: {duration: 2}, keyframes: [ { x: 300, duration: 3, rotation: 360, scale: 0.5 }, { rotation: 270, scale: 2 }, { scale: 1 }, { rotation: 90 }, { x: 200 } ]}); 2 Link to comment Share on other sites More sharing options...
Nisanez Posted July 19, 2020 Author Share Posted July 19, 2020 Thank you for the responses! I learned from you suggestions, However they still neglect the undefined values. While using GSAP 2 I used classes to store the animation information. For example: class Animation { x: number y: number rotation: number duration: number constructor(...) {} } const createAnimation = (tl: gsap.core.Timelime, animData: Animation[]) => { for( let i = 0; i < animData.length ; i++ ) { tl.to(someElement, {...animData[i]}) // Doesn't work if the Animation object containes undefined value. } } Once the animation has some undefined value, (because it is not needed) the animation stops. Before changing the logic to work with GSAP 3, I wanted to be sure I am not missing something. Thanks again! Link to comment Share on other sites More sharing options...
OSUblake Posted July 19, 2020 Share Posted July 19, 2020 There is a timeline type. No need to do gsap.core.Timeline. (tl: GSAPTimelime, animData: Animation[]) I don't think you should be using Animation as class name. That already exists. https://developer.mozilla.org/en-US/docs/Web/API/Animation If you want to use a class like that, then you should provide default values. class MyAnimation { x: number = 0 y: number = 0 rotation: number = 0 duration: number = 0 constructor(...) {} } But I would recommend just using plain old JavaScript objects. GSAP adds properties to the object, like delay, ease, and overwrite. 2 Link to comment Share on other sites More sharing options...
Nisanez Posted July 19, 2020 Author Share Posted July 19, 2020 40 minutes ago, OSUblake said: There is a timeline type. No need to do gsap.core.Timeline. (tl: GSAPTimelime, animData: Animation[]) I don't think you should be using Animation as class name. That already exists. https://developer.mozilla.org/en-US/docs/Web/API/Animation If you want to use a class like that, then you should provide default values. class MyAnimation { x: number = 0 y: number = 0 rotation: number = 0 duration: number = 0 constructor(...) {} } But I would recommend just using plain old JavaScript objects. GSAP adds properties to the object, like delay, ease, and overwrite. Thanks, the code was just an example of the code I am using. The real class name is not 'Animation' . Thank you all, what I will do is manually clean the objects from the undefined values, just to make things work. And later think of a way to refactor the logic when using GSAP. Link to comment Share on other sites More sharing options...
GreenSock Posted July 19, 2020 Share Posted July 19, 2020 Yeah, GSAP trusts you to define the values you want set, so I would recommend not assuming that GSAP will ignore values that you ask it to set to undefined. Cleaning your objects of those is a good idea. 👍 And to be clear about what was happening, GSAP wasn't just stopping the whole timeline when it encountered one of those - it was literally setting the value you requested (undefined) but since browsers won't honor something like transform: translate(undefined, 0px), they ignore the [invalid] transforms altogether. Since the other properties you were setting were ALSO transform-related (rotation and scale), those were all part of the invalid transform value, thus they weren't honored by the browser. That's why it looked like it just stopped the timeline. Does that clear things up? And in GSAP 3, we really tried to streamline things and get the file size down. GSAP 2 had a lot of code that tried to read the developer's mind, do a lot of fallbacks, work around poorly formatted code, invalid syntax, etc. but I realized over the years that was actually creating some problems: It expanded the file size which everyone "pays for" (in terms of kb) It encouraged bad habits in developers. So in GSAP 3, it was a strategic decision to build things in a way that would allow developers to bump into things that would expose problems in their code and ultimately create cleaner solutions that'd also minimize file size for everyone. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted July 19, 2020 Share Posted July 19, 2020 2 hours ago, OSUblake said: GSAP adds properties to the object, like delay, ease, and overwrite. It shouldn't add those to the vars object, no, but it does to the animation instance itself. Link to comment Share on other sites More sharing options...
OSUblake Posted July 19, 2020 Share Posted July 19, 2020 1 hour ago, GreenSock said: It shouldn't add those to the vars object, no, but it does to the animation instance itself. It does. See the Pen be4368bacd082ccbcf8fa2c7601f2711 by osublake (@osublake) on CodePen 1 Link to comment Share on other sites More sharing options...
GreenSock Posted July 20, 2020 Share Posted July 20, 2020 Yeah, I forgot that the defaults get applied directly to that object. That was an intentional choice for performance reasons (rather than taking the time to copy every value into a separate object...for every tween). Thanks for reminding me 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