Streaming live at 10am (PST)

Simple flip interaction


#1

So I have 2-4x4 grids, one on top of the other. The bottom grid has words in each tile and the top grid has a single image covering the whole grid. I am attempting to get each top tile to flip to 0 degrees from 90 and become invisible so the words are uncovered from below, but am having issues. I can get the tile to flip to 0 degrees but not back to 90 degrees and it’s glitchy. Any help would be awesome!


Here is my public share link: LINK
(how to access public share link)


#2

Here is the better way:

  • only one grid. Add your text and an image into your grid tiles divs (grid tiles should be without background images themselves.)
  • place ix triggers on the grid tiles but affect inner images.

This way interaction trigger will not be affected itself by the transforms rendering it “unhoverable”


#3

But how do i still have get one single image on top? The initial idea was to get it to break up when the tile flipped over (hover on, hover off), and then the text would display underneath.


#4

Not sure what you mean. If you are asking how to make sure that images are initally on top of the text, then just give those images z-index: 1


#5

i implemented what i think you were saying, try the share link again you might get a better idea of what i am trying to do.


#6

OK, it was becoming a bit heavy on text so I just set it up for you to study and replicate. Note that everything that I modified on every layer in my example is important.

Here you go.


#7

One last question, I’ve followed everything you did but i seem to be missing something…

The last thing i did is set the position of the H7 heading to absolute. But, it then changes the dimensions of the whole top row of the grid to a smaller height? What am i missing?


#8

No matter, once you populated your whole grid it will look fine


#9

I got that to work, but now i cannot get the text to display once it flips?


#10

You are not paying attention, mate :slight_smile:

Do not rotate the interaction trigger. The “home screen hover” should not be rotated. Consider this: if this is an element that needs to be hovered on, then once you rotate it, you are no longer hovering it since it essentially disappears (after rotation), the hover focus is lost, hover out action is triggered, animation becomes jittery not knowing what to do.

Make sure your hover object and your rotating element are different. In other words, target “image” in your interaction not “home screen hover”.

I am verbose because I want you to understand what’s going on, not simply do what I say and forget about it.


#11

Ahh i see what i did wrong, thank you for the explanation that cleared things up!