Jump to content
GreenSock

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

Migrating to GSAP 3 - dealing with undefined values.

Recommended Posts

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

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

 

 

  • Like 3
Link to comment
Share on other sites

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 }
]});

 

  • Like 2
Link to comment
Share on other sites

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

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.

 

  • Like 2
Link to comment
Share on other sites

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

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:

  1. It expanded the file size which everyone "pays for" (in terms of kb)
  2. 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. 

  • Like 1
Link to comment
Share on other sites

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

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

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