Streaming live at 10am (PST)

Flip Box not showing backside


#1

With the lagacy interactions it was easy (https://university.webflow.com/article/3d-card-flip-animation)… But with Interactions 2.0 it doesn’t work.

How can I flip a div block to show the backside (the rotated div behind the originaly shown div) with 2.0 interactions ?


#2

Hi @bobmatthyssens,

could you share a Read-Only Link to your project?


#3

Here you are : https://preview.webflow.com/preview/flip-box?preview=3f3f4e776db0790edc334b7ca3ca2e24


#4

The problem is that you only flip the front. If you give your back card, for example, a solid color, you will see that on flip you don´t see the back with the solid color.


Flip Box is no longer working
#5

I flip the Flip Box containing the (turned) Back Side and the Front Side.


#6

I made a little example for you here.

Try to rebuild this for your case and the first time without interactions only hover and after this works I would add interactions.


#7

Made a version for Hover…
Duplicated everything and duplicated all classes…
Then I added the hover style in the first version…
… and the actions in the second version…

And this is the result : https://preview.webflow.com/preview/flip-box?preview=3f3f4e776db0790edc334b7ca3ca2e24


#8

Alright :+1:t2:
I updated my example project. Take a look and try to adapt this to your project, hopefully, this works for you.


#9

That’s a work-around… You rotate both sides separately.

My flip

  • is defined on a class
  • is part of a bigger action
  • is started by an external object

so I wan’t to flip the card as one object. This is not working.

Thanks, Maurice… But I think it’s a bug.


#10

Yeah, I think it has something to do with IX 2. Maybe somebody else has a clue if it is a bug?