Which code works best

[L.E. Dowe]

Hi, I am new to the community and to coding.  I have a question regarding an animation I would like to develop.   I have one letter in two colors each saved as an individual SVG....one needs to move down and the other up.  At the same time I have text moving from right to left.  Can someone advise which code would work best for this.

 

Thanks

L.E. Dowe

[PointC]

Hi @L.E. Dowe 

 

Welcome to the forum and thanks for joining Club GreenSock.

 

From what you're describing, you can move one class of letters along the positive y axis while the other moves negative y. The text would just move along the x axis. You could do it with a timeline or probably just a couple tweens. Without seeing your setup, it's hard to give specific advice. 

 

Maybe you could make a demo?

If you're just getting started with GSAP, I'd recommend the learning section.

https://greensock.com/learning/

 

Happy tweening and welcome aboard.

 

[tailbreezy]

Here is how this might be achieved with SVG patterns and GSAP.

If you would like more control you can always add a bunch of divs and use gsap on those.

 

See the Pen 8a988d38760ee90dd3b6d7c7572faaea?editors=1010 by dadacoded (@dadacoded) on CodePen

[mikel]

Hey @tailbreezy,

 

Super. Some minor adjustments

 

See the Pen 4970b7f5bd5413ad0236bf57201306ab?editors=0010 by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[tailbreezy]

Looks great, mikel.

 

Maybe adding time(1.2) to avoid the standstill in the beginning. Since everything is pattern anyway

action.time(1.2) 

 

[ZachSaucier]

4 hours ago, tailbreezy said:

Maybe adding time(1.2) to avoid the standstill in the beginning. Since everything is pattern anyway

action.time(1.2) 

It might be good to create and use a label for that so the start point is not hard coded to a specific numerical time.