Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Understanding gsap.set( ) method

Recommended Posts

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.


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

Link to post
Share on other sites

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.

  • Like 2
Link to post
Share on other sites

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?

Link to post
Share on other sites

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. 


  • Like 1
Link to post
Share on other sites

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



  • Like 4
Link to post
Share on other sites

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.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.