gsap x,y vs javascript offsetLeft, offsetTop

[huymax]

Hi everyone,

can anyone tell me why javascript offsetLeft, offsetTop does not match with gsap x,y? I have an example about fly to cart, on this link https://stackblitz.com/edit/js-bqhafu?file=index.js. When the user presses '+ Thêm', I clone an image from product's image, and get it's DOM offset top and offLeft, and assign those position to x,y of gsap. but there was some wrong, I don't know where the gsap relative is?

[mvaneijgen]

Hi @huymax welcome to the forum! 

 

x and y will move the elements from its current position that amount of pixels on the x or y axis, right now your element will be moved 16px down and 466px to the right. It will not move them to a specific coordinate space on the page.

 

It sounds like you're looking for the Flip Plugin take look at the docs https://greensock.com/docs/v3/Plugins/Flip/  and the collection page on Codepen probably has a few add to cart animations in there, if you're looking for examples.

 

Hope it helps and happy tweening! 

[huymax]

thanks for replying, but I still don't understand that, could you fix on my example?

[mvaneijgen]

Hi @huymax there isn't really a fix for your example, it needs to be rewritten using another plugin. At the moment I don't have time to do that and also  what's the fun in that, you're the developer, so you should be the one to learn how to implement the ideas you have. There is the  "Jobs & Freelance" forum for paid consulting, if that is what you're looking for.

 

But don't take this the wrong way, in theory it is really simple! Just check out this video from the docs, the logic from 2 minutes in does exactly what you want! So you just have to implement that logic into your example and you fixed it, better yet you'll be learning another tool you can use in your tool belt as a developer! 

 

And if you're stuck, just post a new demo with the problem you're stuck at and someone will be sure to help you out again.