Understanding gsap.set( ) method

[Hemanta]

Hey Folks,

 

I was going through a codepen demo (layered pinning from bottom) from gsap. I understood the code except the following snippet.

 

gsap.set(".panel", {zIndex: (i, target, targets) => targets.length - i});

 

The z-index property is set to a function. Can somebody explain me the function in detail?

 

Thanks a lot.

Hemanta

See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen

[Richard1604]

It’s a JavaScript arrow function which is called for each or the panel elements and sets the z indices Of the panels to a series of descending values .

you might imagine that there is an implied for each loop generated by the function which runs over each of the targets.

[Hemanta]

Hi Richard,

Thanks for your reply. My specific questions were as follows: 

 

1. What are target and targets? What is the difference between them?

2. What is the result of targets.length?

3. Why is target included as a parameter when we haven't used it in the function body?

[Richard1604]

think of it as a short hand for writing a rather longer piece of code;

you are passing a selector ".panel"  to gsap.set().

 this creates an array of targets to process [".panel", ".panel", ".panel"] with three elements.

the loop is effectively:  for each target in targets: target.z-index = targets.length-i

where i is the loop index use to address the array.  

my description may not be the precise way that an expert would use but this is the gist. 

 

[Hemanta]

Thanks Richard.

 

[Carl]

Hi Hemanta,

 

I believe you may be a student of mine. In GSAP3 Beyond the Basics there is a lesson: Tweening Function-based Values.

It will explain how for each target in a tween you can run a custom function to get a unique value. 

 

As Richard said, the code in the GreenSock demo is a short and clever way to loop through each panel with very little code. The code loops through each target (panel) and sets a custom zIndex

 

The important thing to understand is that the demo you referenced needs to reverse the stacking order of the DOM elements so that panel "one" is visually stacked on top of "two" and "two" is on top of "three". The demo basically gives the panels these zIndexes

 

Panel | zIndex

ONE:      3

TWO:      2

ONE:      1

 

I made a more verbose version of what the GreenSock demo is doing that adjusts the y value of 4 boxes. It basically displays them in reverse order.

 

Be sure to open up the console and read what is being logged out

 

See the Pen rNeewEG?editors=0011 by snorkltv (@snorkltv) on CodePen

 

Also, I have a future ScrollTrigger lesson planned to help beginners demystify what is happening in some of these demos. This was on my list!

 

Hope this helps

 

 

[Hemanta]

Hi Carl, Yes, I am a student of yours. I went through the lesson: tweening function based values. Things are clear now. Thanks a lot.