Hemanta Posted August 15, 2020 Share Posted August 15, 2020 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 Link to comment Share on other sites More sharing options...
Richard1604 Posted August 15, 2020 Share Posted August 15, 2020 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. 2 Link to comment Share on other sites More sharing options...
Hemanta Posted August 15, 2020 Author Share Posted August 15, 2020 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 comment Share on other sites More sharing options...
Richard1604 Posted August 15, 2020 Share Posted August 15, 2020 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. 1 Link to comment Share on other sites More sharing options...
Hemanta Posted August 15, 2020 Author Share Posted August 15, 2020 Thanks Richard. Link to comment Share on other sites More sharing options...
Carl Posted August 15, 2020 Share Posted August 15, 2020 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 4 Link to comment Share on other sites More sharing options...
Hemanta Posted August 16, 2020 Author Share Posted August 16, 2020 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 comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now