Logo Animation for preloader

[james182]

I am new to GSAP and I am trying to stagger each of the "banners" within the SVG to appear in a certain order and loop in fading in /out.

eg. [banner-1, banner-2, banner-3, banner-4] the order should be [4,2,1,3] and repeat.

 

TweenMax.staggerFromTo(" #banner-1, #banner-2, #banner-3, #banner-4", 0.65, {opacity:0, ease:Back.easeOut},{opacity:1, repeat:2, yoyo:false}, 0.5);

See the Pen MWYWPPg by james182 (@james182) on CodePen

[mikel]

Hey @james182,

 

You could use a negative stagger or change the positions " #banner-4, #banner-2, #banner-1#banner-3,"

 

See the Pen JjojzVZ by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel