querySelectorAll not working in GSAP Flip

How To
1

Hey :slight_smile:
I´m trying out GSAP Flip for the first time and I´m not 100% sure if I´m doing everything correctly.
I just wanna rearrange some images. For that I created a class with the styles that I wanna apply to the images.
It DOES work if I use “Custom (Document QuerySelector)” as Target Element in Flip but then it only rearranges one single image and not all of them.
When I set it to “Custom (Document QuerySelectorAll)” I get an error.

Can someone help me with this? What am I doing wrong? Why does it work with “Document QuerySelector” and not with “Document QuerySelectorAll”?

queryselectorall
queryselectorall2144×850 81 KB

queryselectorall-error

Thanks a lot in advance :slight_smile:

Btw: The images are in fact all there with the class “reorder”. They´re all shown in the DOM.

2

You should add Flip to the parent and toggle “Include children”. :slight_smile:

3

Hey Daniele :slight_smile: Thanks for your help!

I just tried that but unfortunately it still doesn´t seem to work :frowning:

I attached some more images to make it easier to see if everything is setup correctly.

bf1
bf12560×1320 153 KB

bf2
bf22560×1323 160 KB

bf3
bf32555×833 89.5 KB

bf4
bf42531×1288 398 KB

I noticed that it adds the data-attribute data-flip-id="auto-1", etc. but as it seems it also adds it do the container. The images get that attribute, too but the class “reorder” isn´t toggled.

What am I doing wrong here?

4

Could you open a ticket sending access? This way I could check what’s wrong here :slight_smile:

1 Like
5

Done :slight_smile: If you need any further information, please let me know :slight_smile:

6

Thanks very much! Indeed I found an issue with gsapFlip and querySelectorAll. Fixed it in your environment. Will be deployed with 3.0.0 :slight_smile:

1 Like
7

Oh wow!!! You´re awesome! Thank you so much!! :blush:

1 Like