kalininmax
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by kalininmax
-
-
19 minutes ago, mvaneijgen said:
Hi @kalininmax welcome to the forum!
xPercent and x are to different properties, if you want your logic to work you also have to animate the element using there x and y property, not there xPercent and yPercent values. In CSS there is just one property translateX, but having them split in GSAP can be really powerful. If you want to keep the percentage based movement, just that the elements width and height an multiply it by the value you want to get, for 70% multiply by 0.7 or for 120 multiply by 1.2.
Hope it helps and happy tweening!
Thank you so much! I just removed Percent and it works like I wanted!
But yes I need responsive, so I got the part size via
item.getBoundingClientRect().width
anditem.getBoundingClientRect().height
and multiply it like you said.Why I need to init Draggable in onComplete callback? It works even without it, like in my demo.
-
I have a SVG logo (screenshot 1). It has some parts for draggable, I want to snap them to its initial positions (sceenshot 1) when dragging them,
that's why I use
points: [{ x: 0, y: 0 }]
.But also I need to animate the parts with
gsap.to()
to move them from its initial positions (screenshot 2).That's how I do this:
// init draggable Draggable.create(draggableEls, { type: 'x,y', bounds: container, liveSnap: { points: [{ x: 0, y: 0 }], radius: 20, }, }); // move parts from its initial positions gsap.to(draggableEls, { xPercent: (index) => LetterPos[index]?.x, yPercent: (index) => LetterPos[index]?.y, ease: 'power3.out', duration: 1, });
But for some reason liveSnap snaps the parts to
gsap.to()
final positions (screenshot 2), but not to initial (sceenshot 1). I thought if I init Draggable beforegsap.to()
it will save the initial positions for snapping. How can I init/config Draggable so that it remembers the initial positions of the pieces before animation, and snaps to initial positions (screenshot 1)?See the Pen oNOWxKY by kalininmax (@kalininmax) on CodePen
How to control Draggable initial positions for snap
in GSAP
Posted
@mvaneijgen is there I way to trigger some callback when one or all parts are snapped on its places? I want to make some Congrats animation when pazzle is solved. I see only
onDragEnd
calback, but how to define when I put the piece on its place.