Have you explored the new cycle feature that was introduced in the latest version v1.18.0 of GSAP?
You can create a looping effect with delay by setting 0 as the stagger value in your staggerTo calls.
In addition, you can use the position parameter in your staggerTo calls to make them overlap with the preceding tweens.
Here is a modified pen for reference.
JavaScript:
...
animateElement = function() {
timeline.from(main, 0.3, { scaleY: '0%', ease: Back.easeOut.config(1.7) })
.staggerFrom(dataBlocks, 0.3, { cycle: { delay: function(index) {
return index * 0.1;
}}, scale: '0%', y: 100, ease: Back.easeOut.config(1.7) }, 0)
.from(lineGraphLines, 1.5, { drawSVG: 0, ease: Power1.easeOut }, '-=0.5')
.from(lineGraphAreas, 1, { opacity: 0, ease: Back.easeOut.config(1.7) }, '-=2.0')
.staggerFrom(lineGraphDots, 0.2, { cycle: { delay: function(index) {
return index * 0.1;
}}, scale: 0, ease: Back.easeOut.config(1.7) }, 0, '-=1.0')
.staggerFrom(donutCharts, 0.6, { cycle: { delay: function(index) {
return index * 0.1;
}}, drawSVG: 0, ease: Power1.easeOut }, 0, '-=2.0')
.from(menuBackground, 0.3, { scaleX: '0%', ease: Back.easeOut.config(1.7) }, '-=6')
.staggerFrom(menuElements, 0.3, { cycle: { delay: function(index) {
return index * 0.1;
}}, scaleX: '0%', ease: Back.easeOut.config(1.7) }, 0, '-=1')
.from(headerBackground, 0.5, { scaleX: '0%', ease: Power1.easeOut }, '-=5.5')
.staggerFrom(headerBoxes, 0.3, { cycle: { delay: function(index) {
return index * 0.1;
}}, scale: '0%', ease: Back.easeOut.config(1.7) }, 0, '-=1.0')
.staggerFrom(headerText, 0.4, { cycle: { delay: function(index) {
return index * 0.1;
}}, scaleX: '0%', ease: Back.easeOut.config(1.7) }, 0, '-=1.0')
.from(headerText, 0.4, { scaleX: '0%', ease: Back.easeOut.config(1.7) }, '-=4');
};
...
This may not be the exact type of animation you were looking for, but you can customize the position parameter in each tween according to your preference. The key takeaway here is utilizing cycle with delay.
I hope this information proves helpful in some way.
P.S. It's worth noting that you can input negative values for stagger, but they hold a different significance. They initiate the staggered animation from the last element instead.