Linear gradient loop

[fripi]

Hi,
I'm trying to make an infinite gradient loop, should fill the entire background for any format.
There are some parametres: 4 colours, gradient angle, animation speed and animation mode (yoyo or loop) 

yoyo works well but I can't make the loop infinite

 

Any advice ?
 

See the Pen raMReMG by fripi (@fripi) on CodePen.

[geedix]

Hi,

Your animation does have an infinite repeat; it runs the tween without 'yoyo: true' because there's no mode found in the parameters, and each replay jumps back to the beginning, but either tween does loop infinitely. What were you hoping to see different?

[fripi]

there are 2 modes, yoyo and loop, yoyo works well when I activate it, but the loop has a jump on repeat, I'm searching for a solution for seemless loop, that the gradient cycles without interuption or jump... 

I pas the params in the url normally, which can't be done here, so I put loop as default

[fripi]

There are 2 modes, yoyo and loop, yoyo works well when I activate it, but the loop has a jump on repeat, I'm searching for a solution for seemless loop, that the gradient cycles without interruption or jump... 

I pas the params in the url normally, which can't be done here, so I put loop as default

 

I tried another way, but I haven't the sliding look anymore

 

See the Pen OPRqpdq by fripi (@fripi) on CodePen.

[geedix]

Okay, I think I understand. If you animate the position of your gradient and then repeat that animation, it will appear to jump unless the gradient itself repeats. In other words, the colors at the starting position need to match the colors at the end. This means revising your gradient rather than revising your animation. 

[fripi]

I remember in flash such a loop I had to duplicate the gradient, move them in some way align it all and find the exact frame where I could jump back to frame 1, but never dit it in pure code, so for now my second test seems to work, it's far from perfect, I color cycle so I miss the smooth movement, even more visible as the colours are very different

[fripi]

Just found a way to do in css, not sure how to do it with gsap, what is heavier cpu wise? that CSS or JS/GSAP ?

 

See the Pen EagMvaV by fripi (@fripi) on CodePen.

[Rodrigo]

Hi,

 

Nothing wrong with your demo everything is working the way is supposed to. The issue is that when you setup the animation to any number of repeats when that happens the value you're tweening goes back to it's initial value, hence the jump you're seeing. To avoid that you could create your gradient so when the background position tween ends, the color scheme is the same as when the animation starts. Another option is to create another element that creates the effect of getting back at the starting point.

 

Other alternative is to tween the colors of your gadient as shown in this demo:

See the Pen NPRJvwJ by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[Rodrigo]

30 minutes ago, fripi said:

what is heavier cpu wise? that CSS or JS/GSAP ?

You'll have to test that, but my guess is that this in this particular case it shouldn't be much difference when it comes to performance. The difference is mainly in the fact that GSAP lets you orchestrate complex animations like this with ease, while creating the same sequences with CSS is a bit more complicated and time investing.

 

Happy Tweening!

[fripi]

I would really like to achieve the same effect I've done in CSS with GSAP, because I have a better control over time, play/pause/stop/reverse... but for now I don't know how to do it.

The CSS version can be configured in "width" of every color, speed and angle, it's already something