search

dyyyl / tennis-concept

Game Development Tennis for Great Good! 🎾 🏓
4 stars 0 forks source link

Box not moving to onClick location as expected #1

Closed dyyyl closed 5 years ago

dyyyl commented 5 years ago

Rudimentary implementation of box movement attempted.

Expected: on click within window, spinning pinkish box should move to clientX/clientY

Actual: no movement 😭

dyyyl commented 5 years ago

Plot twist: when animation is removed from Box component, this works as expected.

ConnorMinielly commented 5 years ago

for our future reference ELI5: So GSAP typically overwrites the "transform" property of it's target when animating. That's actually the nature of most of it's animations, and the key to performance with such libraries, is that they manipulate the very efficient existing CSS rendering system. So when the click event was firing it was wiping out the rotation transform animation being provided via the styled component and replacing it with the location transform. GSAP respects other GSAP animations though and seems to easily capable of blending two TweenMax animations, one for the repeating spin, one for the event driven move. Code adapted to reflect this in this commit: https://github.com/dyyyl/tennis-concept/commit/5420aa42bae7e12f3146ec5ff09574350f9ffd0b