Hello everyone! First of all, thank you very much for this library. I love animations and also this library :). I'm having some problems animating backgroundPositionX because the library is not working the way i expect. I would like if someone could tell me if effectively is the correct behaviour or maybe im doing something wrong. In the case the library i working correctly i would appreciate a lot some workaround to archieve my objective.
My objective is to animate a seamless wave pattern image with a constant movement. Then i will have a button that when clicked will add an "impulse" to the wave, and when the "impulse" ends, the wave should continue with the constant movement.
My problem is with the first part. I expect this code
gsap
.timeline({ defaults: { ease: 'none' } })
.to('.wave', { backgroundPositionX: '+=150', duration: 2, repeat: -1 });
to do the "constant movement" part, but what i get is a repeated animation from 0px to 150px as you will see in the provided codepen. I think this is wrong because when i use the property "x", it works like i expect, adding the value "150" to the previous value.
Thanks again and sorry for my english. If you don't understand something, just tell me so i will find another way to express it.