Jump to content
Search Community

Flip between different targets with multiple elements

drtPepp test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 1
Link to comment
Share on other sites

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!

  • 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...