Flip between different targets with multiple elements

[drtPepp]

Hi!

I'm newby in these scripts.
I couldn't find a working result for the following. What's the trick to make it clickable separately and to open the "secondary content/image" with the appropriate animation?
In the first thing I did was of course to read through the forum, but somehow I didn't find a good solution.
Thanks!

See the Pen VwdOwoV by PeppinoMugenno (@PeppinoMugenno) on CodePen.

[Rodrigo]

Hi @drtPepp and welcome to the GreenSock forums!

 

The issue is that the example you're using as a base has a click event attached to the document element that works with the first element of the class thumbnail and full-size it finds (querySelector).

 

This is a fork of your example that works for both thumbnails and full size images:

See the Pen mdKYxEX by GreenSock (@GreenSock) on CodePen.

 

Also take a look at these examples as they may provide extra inspiration:

See the Pen wvGOJGQ by GreenSock (@GreenSock) on CodePen.

 

See the Pen JjXqMZK by GreenSock (@GreenSock) on CodePen.

 

Happy Tweening!

[drtPepp]

1 hour ago, Rodrigo said:

The issue is that the example you're using as a base has a click event attached to the document element that works with the first element of the class thumbnail and full-size it finds (querySelector).

Thank you Rodrigo!
I misunderstood the role of "data-flip-id".
I saw your presented samples, but I was looking for a completely raw (minimal) solution, testing how it's works (may I can to use it). The Fork what you fixed is the perfect answer to my question.

Thank you so much again!