If you love animation and interactivity then I’m sure you’ve probably seen or heard of the GreenSock Animation Platform library commonly referred to as gsap. For those unfamiliar, the GreenSock Animation Platform is a suite of tools for scripted animation. We’ll look specifically at TimelineMax and a method called
See the Pen Bubble Loader by Dennis Gaebel (@grayghostvisuals) on CodePen.1395
Making It Move
Since svg is pretty sweet lets use that to create our loading circles. Also take note that we’re using a single svg element instead of separate SVGs to create our desired number of circles.
loader, make the timeline frames repeat once our animation has ended, and then reverse the timeline animation playback by using the
yoyo property. Next we count how many circle elements are within the svg element and finally define an empty array with the
bubbles variable. The reason we setup an array is because the first argument of
staggerTo accepts an array of targets (more on that in a bit).
Now that we’ve defined our variables and counted the length of each
circle element within the svg we can select each circle individually and push that grouping of selectors to the empty
bubbles array we defined earlier.
With each circle accounted for and selected the final piece is passing our
bubbles array as an argument to the
The rest of the settings I won't go into further detail, but I thought I would share the thinking behind this approach and use case for this animation method. Happy tweening campers.