Jump to content
Search Community

Flip example - gsap.utils.toArray object relation

klyvoon test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hey GSapers !! How are you ?!😃

 

[EDIT] I can't put the example right away, it appears at the bottom 

 

I'm deciphering this flip example : 

 

Overall i get it, i could use it, no problem... But i'm curious about this piece of code inside the updateFilters() function : 

 

 const state = Flip.getState(items), // get the current state
        classes = filters.filter(checkbox => checkbox.checked).map(checkbox => "." + checkbox.id),
        matches = classes.length ? gsap.utils.toArray(classes.join(",")) : classes;

Here is the glitch : the "matches" const:

 

"classes", extract among the "filters" GSAP array, the checked box from which it extract the id attributes. So far so good.

 

"matches", when the ternary operator gets a truthy value, retrieves a GSAP array related to the "items" GSAP array?! What the hell is going on ?!😨

When i console.log this stuff i get something like : 

 

[<div class="item orange" data-flip-id="auto-2" style="display: inline-flex;"></div>,<div class="item orange" data-flip-id="auto-4" style="display: inline-flex;"></div>]

 

I can't connect how it relates to the "items" GSAP array, since there's no reference to it in the "matches" const line ! 


Thank you for reading !

 

 

 

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

Link to comment
Share on other sites

Nah, the items Array contains ALL of the items. It's just a bunch of elements (any with the ".item" class). Let me walk you through the code...

 

classes = filters.filter(checkbox => checkbox.checked).map(checkbox => "." + checkbox.id)

"filters" is an Array of checkbox elements ("Green", "Orange", "Purple"), so this line loops through them all and for any that are selected/checked, it records their id with a "." in front because we'll use it as a class selector next. So, for example, if the orange and purple checkboxes are checked, we'd get an Array like: 

[".orange", ".purple"]

Which is what we feed into the next line: 

matches = classes.length ? gsap.utils.toArray(classes.join(",")) : classes

If the Array actually has stuff in it (and it does in this case - ".orange" and ".purple"), it joins that into selector text like:

gsap.utils.toArray(".orange, .purple"); // select all the elements with the "orange" or "purple" class

It isn't directly related to the "items" Array other than the fact that it happens to contain a subset of those elements. But again, this line is purely about feeding selector text into the toArray() so that it returns an official Array. It's sorta like doing this: 

matches = Array.from( document.querySelectorAll(".orange, .purple") );

Does that clear things up? 

  • Like 2
Link to comment
Share on other sites

I think, I totally misunderstood the "gsap.utils.toArray" function.

 

What I now understand is that it looks for any selector text in the DOM, and as it

finds a match, it will extract the entire element where the selector text is.

 

Thank you for the reply !

 

 

Link to comment
Share on other sites

  • Solution

gsap.utils.toArray() is multi-talented...

  • (most common:) Feed it selector text and it will find the elements in the document and return them in an Array, just like doing Array.from( document.querySelectorAll("your-selector-text") )
  • Feed it a NodeList and it'll turn it into an Array
  • Feed it an Array and it'll check to see if it contains selector text. If so, it'll grab those elements and return them in Array. If not, it'll just return the original Array

Basically, you can throw almost anything at it and it'll return it in an Array. It's a great way to normalize things and make sure you're getting back an Array.

  • Like 1
Link to comment
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.
×
×
  • Create New...