Animation FromTo with ease none not looking like I expect

[rae]

Pretty new to learning this library would love a little help.

 

I want the bird (school group “bird”) to move linearly but for some reason she moves in very fast and then slows down towards the end. I tried setting ease to none / power0 but it doesn’t help. Can you advise?

 

Also regarding the same svg sub group. In my “stop” function I can’t return it to the unanimated state the way I do with other tweens. Using progress(0.375) works fine but I imagine there’s a cleaner way of doing that. This is not critical but would appreciate advice as well.

 

Thank you for your help and your time.

See the Pen vYNpNLa by RadaCodes (@RadaCodes) on CodePen

[OSUblake]

The problem is because you have stuff in the from vars like repeat: -1. Animation specific values, like duration, ease, repeat, yoyo, etc go in the to vars.

 

Not sure if that's a bug for @GreenSock to look at.

 

I would highly recommend writing your objects inline. It's very hard to read the way you currently have it.

 

var varsBirdHorTo = {};
varsBirdHorTo.repeat = -1;
varsBirdHorTo.x = "500";
varsBirdHorFrom.ease = "none";
varsBirdHorFrom.duration = 8;

// vs
var varsBirdHorTo = {
  x: 500,
  repeat: -1,
  ease: "none",
  duration: 8
};

 

I would also recommend running your svg through SVGOMG to get rid of all the inkscape meta stuff.

https://jakearchibald.github.io/svgomg/

 

You could also use a timeline. Using v3 syntax.

 

See the Pen 0e6eda746addbbe39513aa145116b303 by osublake (@osublake) on CodePen

 

 

[rae]

Thank you, removing those attributes from the "from" vars resolved my issue!

 

Appreciate the note about in-line definition.

[rae]

Oh wow I just saw that you cleaned up my pen too! Thank you!!

[ZachSaucier]

7 hours ago, OSUblake said:

Not sure if that's a bug for @GreenSock to look at.

Not a bug - special properties should always go in the toVars