Jump to content
Search Community

Nine Flipcards

Sceik test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey there master-tweeners,

 

So for an online portfolio I'm creating I wanted to add a container with ''things I'm good at''. I wanted to make it out of 9 flipcards with an image or logo on the front, and a small text on the back. Onclick they're supposed to flip around and stay that way untill clicked again. Now so far I've come across two methods to achieve this, but both come with some complications. 

 

The first method

On first glance it looks like it does exactly what I want. The animation is smooth and steady. The problem though is when you click on the (first) card twice in a row, the second animation starts halfway through the first animation disaligning the starting position. (Bad explanation, try it yourself in the codepen lol)

 

The second method

This is much less Tweening which is nice because I have to do it for nine cards, but there's something I want, but cant get with this method. I really like the way the cards bounce with the bounce ease when they flip. Since this method uses a reverse, the bounce reverses too which looks weird, obviously. 

 

Just get to the point already

I guess my questions are the following,

- Is there a way to fix the problem in the first method?

- Is there a way to fix the problem in the second method?

- Most importantly, what method do you guys recommend?

- What's the most efficient way to get this to work on nine cards, without copy-pasting the whole thing nine times?

 

Thanks in advance ?

 

Codepens used in the process (the one on the bottom is mine):

See the Pen vjGxH by rhernando (@rhernando) on CodePen

See the Pen JtljL by chrisgannon (@chrisgannon) on CodePen

See the Pen PrObve by sceik96 (@sceik96) on CodePen

Link to comment
Share on other sites

4 hours ago, Sceik said:

Is there a way to fix the problem in the first method?

 

You'd want to look at the isActive method to prevent clicks when the animation is playing.

https://greensock.com/docs/TimelineMax/isActive()

 

4 hours ago, Sceik said:

Is there a way to fix the problem in the second method?

 

You could break the timeline into two or use an addPause in the middle. We've had a few discussions about different eases for reverse.

 

4 hours ago, Sceik said:

Most importantly, what method do you guys recommend?

 

That's entirely up to you.

 

4 hours ago, Sceik said:

What's the most efficient way to get this to work on nine cards, without copy-pasting the whole thing nine times?

 

Loops are your friend.

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Hey there PointC,

 

Thank you so much for your answer!!

I'm kind of new to JavaScript so the only thing I don't really understand is the loops thing. Can you give me an example? Let's say we're using the first method and every front and every back is different

 

Thanks again!

 

 

Link to comment
Share on other sites

The pen with the colors and bread images uses looping to cut down on the JS  length. Analyze it to see an example of how to do it.

 

If you're talking about looping the HTML, it technically is possible using a pre-processing language like Pug, but that likely won't help you much since you need to put unique content in each one. I'd just make use of the copy-paste functionality :)

  • Like 1
Link to comment
Share on other sites

Yep, definitely study and reverse engineer the bread demo. That one uses jQuery each() to loop through. More info:

https://api.jquery.com/each/

 

If you don't want to use jQuery, you can use a regular loop. Here's a demo from a different thread, but shows the basics of looping through a node list and adding a listener. 

 

See the Pen bPVeNd by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

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