The elegance of tweens.
This week I had the good fortune of a small exercise to see if I was ready to take on some freelance work for a pretty large ad agency in the NYC area.
As part of their client’s core business, they regularly send out emails with animated banners raising awareness about their latest products.
Enter GSAP.
Like a majestic superhero from a lost time, but wearing one rather large, and ungainly Gym sock, in a vibrant green color matching his cape.
So What is this “gobbledygook” code of which front end developers are raving about far and wide?
It won’t take long to note the elegance:
“tl” means Timeline.
“.to” denotes a stop on said timeline.
So what are those scare-looking CSS-like arguments?
The first argument of our tween is where we pass in the ID of the element your are going to animate.
In this case, we have a variable holding the location of the ID that was declared right before the timeline in our “init” function of my good ol’ Vanilla JS, “App.js” file:
But don’t get lost in the JavaScript weeds.
It might be a bit easier to consider the singular Tween:
The second argument, is the “duration” of the animation step on the timeline. In this case: 2 seconds.
The third argument, is where our “curly boys” live with the actual animation code, written out in a very familiar manner to anyone who has spent more than a single afternoon styling some CSS.
(In GSAP we have “rotation:x”. In CSS, it’s a “transform: rotate(x)”. In GSAP we have ‘transformOrigin: “x y”’. In CSS, it’s “transform-origin: x y;”)
The fourth argument is the “position” argument. This is actually position in the time, however, so don’t get confused.
So the above syntax, “-=5” indicates that the tween will begin .5 second before the ending of the previous tween. A “+=” would make it start .5 second after the tween begins.
So now I’ve shown the elegance of the tween, show some magic in a pen, right?
I’ve made the perfect thing: A beautiful Zebra Beach Ball rolling and changing scale across the screen:
Check it out. Play with the parameters. I hope GSAP animation is as fun for you as it was for me this week. As always, let me know if you find anything fishy in the code.
Happy Coding!
