Ever want to have items stagger in from alternating directions or colorize them using an array of colors?
With gsap.utils.wrap() you can.
In the video below I’ll show you how I build out a seemingly complex animation sequence with 3 simple tweens.
Watch the video
Sample Code
Make each target element animate in from alternating y values of -100 and 100
gsap.to(chars, {y:gsap.utils.wrap([-100, 100])});
Starter Demo
Homework
Edit the demo above to add the multi-color effects shown in the video.
More on Function-based Values
Part of the magic behind gsap.utils.wrap() is that we are using it as a “function-based value”. What this mean is that we are declaring a function that will be run for every target in our tween to generate unique values.
Functions that are used as tween values are automatically sent an index value representing the current index of the element in the targets array. Using this index value gsap.utils.wrap() can properly pull the proper array value and send it back.
I have an in-depth lesson on function-based values in my premium course: GSAP 3 Beyond the Basics.
Creative Coding Club
My Creative Coding Club courses are packed with lessons just like this. Let me guide you on your journey towards mastering the GreenSock Animation Platform.
