Having an issue with the "y" property in gsap.to()

[nikolev]

Hey guys so I added a tiny highlight to my ice cream. However when I move it down with gsap.to() it starts at a higher point then the other elements. I put the same Y offset for the pink ice cream ball and the highlight. Yet the highlight starts higher. If I switch the y offset for the higlight to -130 instead of -150 it looks more like what I am trying to achieve but I am not sure why.
 

Beginning: 

 

End: 

 

Here's my codepen: 

 

P.S. I tried using gsap.fromTo() but I get "Uncaught TypeError: gsap.fromТо is not a function". Is there a file I haven't imported correctly?

 

Thanks!

See the Pen LYpYvoM by nikolev (@nikolev) on CodePen

[PointC]

If I correctly understand what you're trying to do, I think you'd want a relative distance for these tweens.

 

gsap.from("#pink-highlight", {y: "+=" + yOffset, duration: 8});

Does that help?

 

Happy tweening.

 

[nikolev]

1 hour ago, PointC said:

If I correctly understand what you're trying to do, I think you'd want a relative distance for these tweens.

 

gsap.from("#pink-highlight", {y: "+=" + yOffset, duration: 8});

Does that help?

 

Happy tweening.

 

That's exactly what I was trying to achieve. I thought that the below code was actually offseting it relatively to the original position. Isn't that the same as saying "transform: translateY(-150px)"?

 

gsap.from("#pink-highlight", {y: yOffset, duration: 8});

 

[PointC]

In this case you have a transform matrix applied to that element so the travel distance at first glance appears to be incorrect, but that is the behavior I would expect. 

 

Here's a quick demo which may help.

 

See the Pen dyYRyOP by PointC (@PointC) on CodePen

 

Three circular paths. Red --> no matrix, Green & Blue --> -50px change in the y position via a matrix. Now I animate Red and Green from y:150 and Blue from y:"+=150". You can see that Red and Green start at the same position, but Green travels to its home of -50 we set in the matrix. It actually moved 200 pixels rather than 150. Whereas Blue was set to a relative distance so it only traveled the expected 150px.

 

In your case, you can use a relative distance as I wrote above, wrap a <g> around that path and animate the group as you've done with most of the other elements or you can redo the vector file so no matrix is applied upon export.

 

Hopefully that makes sense. Happy tweening.

 

[nikolev]

2 hours ago, PointC said:

In this case you have a transform matrix applied to that element so the travel distance at first glance appears to be incorrect, but that is the behavior I would expect. 

 

Here's a quick demo which may help.

 

 

See the Pen

See the Pen dyYRyOP by PointC (@PointC) on CodePen

by PointC (@PointC) on CodePen

 

 

Three circular paths. Red --> no matrix, Green & Blue --> -50px change in the y position via a matrix. Now I animate Red and Green from y:150 and Blue from y:"+=150". You can see that Red and Green start at the same position, but Green travels to its home of -50 we set in the matrix. It actually moved 200 pixels rather than 150. Whereas Blue was set to a relative distance so it only traveled the expected 150px.

 

In your case, you can use a relative distance as I wrote above, wrap a <g> around that path and animate the group as you've done with most of the other elements or you can redo the vector file so no matrix is applied upon export.

 

Hopefully that makes sense. Happy tweening.

 

Thanks for spending the time to put this visual example. I appreciate it.

AI added the matrix. If I want to get rid of it, is there a way to tell AI not to add it?

[PointC]

24 minutes ago, nikolev said:

If I want to get rid of it, is there a way to tell AI not to add it?

Convert elements to compound paths when possible. Also use the background rectangle I mentioned in the other thread and keep all elements within those bounds too.

 

In your demo I'm not sure why the ellipse had the skew, scale and position changes on it. A simple ellipse probably would have done the trick. You can also animate the cx/cy attributes for ellipses. Not that I'm saying that would be better. Just a general FYI. It's also helpful to remember that there is some crossover between CSS properties and SVG attributes. x/y etc... Just little things to keep in mind.

 

Best of luck. I'm looking forward to seeing the completed ice cream cone project when it's ready. Happy tweening.

[nikolev]

6 hours ago, PointC said:

Convert elements to compound paths when possible. Also use the background rectangle I mentioned in the other thread and keep all elements within those bounds too.

 

In your demo I'm not sure why the ellipse had the skew, scale and position changes on it. A simple ellipse probably would have done the trick. You can also animate the cx/cy attributes for ellipses. Not that I'm saying that would be better. Just a general FYI. It's also helpful to remember that there is some crossover between CSS properties and SVG attributes. x/y etc... Just little things to keep in mind.

 

Best of luck. I'm looking forward to seeing the completed ice cream cone project when it's ready. Happy tweening.

Thanks, that's awesome. I am using the rectangle tip all the time now. Major pain relief!

[PointC]

I should mention that having a matrix certainly isn't the end of the world. Sometimes it's necessary. Just be aware of its existence and animate accordingly.

 

You can also take advantage of gsap's .set() method too. In fact, if it's something you plan to animate, that's my personal preference. Sometimes creating all elements at coordinates 0,0 makes sense too. Having everything start at zero makes animating super easy, but it's not always practical to do so.

 

Happy tweening.