Understanding how Timeline works with backgroundPositionX

[Atap Tailor]

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.
 

See the Pen yLrgKRg by AtapJs (@AtapJs) on CodePen

[mvaneijgen]

Hi @Atap Tailor welcome to the forum!

 

GSAP records its starting values and when you set repeat: -1, it will repeat to its original position, so you have to call repeatRefresh: true, to have it recalculate new values on each repeat. 

 

When working with timelines I would put all the logic on the timeline and keep the tweens just for animations. 

 

Also check out our Seamlessly loop elements along the x-axis might be helpful https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/

 

Hope it helps and happy tweening! 

 

See the Pen oNOByvj?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

[Atap Tailor]

Thanks A LOT @mvaneijgen! You just make my day happy xD

I have looked the documentation you said. It is likely what i want but not exactly what i want. Anyway i found it very interesting, thanks for the link
I don't know if i could ask for a little more help in this topic or i should create another one. I will try here but let me know :).

Now i'm fancing the second part of my objective, the "impulse". I updated my codepen with your code and my code to add the impulse. My problem here is that there is a little stop when the impulse ends. I think the library is working correctly this time, but i would need a smooth transition to the "normal" speed. Could you (or someone else) help me archieving that?

Also, i don't know if my approach for the "impulse" is the best. I accept any suggestions.

PD: I also added some tags for other people, so they can find this helpful topic (at least for me xD) easily.

[mvaneijgen]

No worries. 

 

I would keep the question to the same topic, no need to create a new one. Even if the pen stays the same just post the link again in the most up to date reply that way we know what the most up to date version is. 

 

What I would do is update the timeScale() of the current timeline and then after some time set it back to the normal speed. https://gsap.com/docs/v3/GSAP/Timeline/timeScale()/ 

 

If it was an element that was not in a background-image and just a normal dom element you could have two tweens on the same element one that moves the xPercent and the other the x doing this would allow the main timeline to never stop playing and the other to just move is some amount, but that will require a rewrite of your current setup. Hope it helps and happy tweening! 

 

See the Pen gOygjzJ?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

You can even create a single timeline to actually tween the timescale and make it smoother:

See the Pen NWmdLjp by GreenSock (@GreenSock) on CodePen

 

Happy Tweening!