I’m trying to combine a flip card animation with a hover rotate animation to basically try to make a “trading card” style div block. Any ideas ? Whenever I do it, it seems that the original flip card side continues to show, no matter what I do. Setting a z-index just makes the entire thing disappear on flip. (It works fine when I don’t try to add the hover rotate, so worse comes to worse, I can just stick with that.)
Hi @chloer
Welcome to the community! This sounds like a cool idea!
Would you be able to share your project link with me so I can get a better idea of where you are at? ( If you don’t know how to do that go here: Share a read-only link | Webflow University )
Also do you want the card to stay on a specific flipped side?
Happy to help,
Sean
I’d love for it to stay on the flipped side, so that the information remains showing. (Also, irrelevant to current topic but total bonus if you happen to know, you’ll notice there’s a float-in animation on page scroll. I’m trying to get that to trigger every time the elements scroll onto the page, not just the first time, but I cannot for the life of me figure out what sort of setting I should use to make that happen. At this point, I’ve given up on it, but if you happen to know, I’d appreciate it. Again, total bonus 
)
https://preview.webflow.com/preview/mojosodas?utm_medium=preview_link&utm_source=designer&utm_content=mojosodas&preview=20a0f10af89b2f79c57e6b9bc319b50a&mode=preview
Alright I figured it out. First you want to remove the children perspective on partnercardcon
Next you want to add the on second click to both of the partnercardcon and select “card flip reverse”
Next go into “card flip reverse” and edit the rotation that is there y to 0px (must be set to 0px not empty)
Finally if you want it to always go in a full circle you will want to go edit “card flip” and add a second rotation to follow the first rotation rotating to 180 over 0 seconds (otherwise you can skip this step
Hopefully this helps you i will take a look at the float in animation now and get back to you. If you have any other questions about this or anything else let me know 
Sean
Thanks for that ! I was actually struggling with that too lol. But it still doesn’t answer the question of if I can apply the hover rotation effect used in the linked video to the same elements.
Because we cant save the state at which the card is flipped this is as close as I could replicate it.
First create two new divs:
Card holder - which contains partnercardcon - This div will be tilted by card wrapper
Card Wrapper - which contains Card holder - This div will be used to tilt card holder with a mouse over event. It will also be used to flip the card
Card Wrapper be a flex box with 340 px width min and max , 490 px height min and max to replicate and maintain the size of the card through rotation.
Next I added the mouse move over element new animation named hover tilt to Card wrapper. From there I set the mouse actions like the video to 5 deg each way and made sure it was controlling Card Holder class but only children with this class.
So now onto the flipping. Still with Card wrapper selected I added mouse click(tap) and on the first click I selected “card flip reverse” and on the second I selected “card flip” (This will make sense further down)
The last trigger I added to card wrapper was mouse hover and only added card flip to on hover.
Keep in mind the triggers need to be added to both card wrappers. Also remove and triggers on partnercardcon
I hope this is close to what you are trying to achieve.
If you have more questions let me know I will do my best to help,
Sean
So for the float in animation I added it to the section and removed it from the container. I also made a float out to make it disappear so it can reappear.
Inside float in I made sure it was making actions on the container class and on children with this class
For float out I did the same thing add added move down 50px and set opacity to 0% over 1 second.
Now you should be able to add this to any section you want.
If you need further help with this don’t hesitate to ask,
Sean
Thanks for the help - I honestly think I’m going to give up on the “trading card” idea, it’s way too complicated for me to understand. I’m sorry to have wasted your time on that.
I worked on the float-in/float-out animation, though, and I’m still having trouble. I adjusted all of them to trigger on sections, and adjusted the targets so that they were specific to the containers in that section using the combo classes, but for some reason the effect just will not trigger on the first scroll. Any ideas ?
https://preview.webflow.com/preview/mojosodas?utm_medium=preview_link&utm_source=designer&utm_content=mojosodas&preview=20a0f10af89b2f79c57e6b9bc319b50a&mode=preview
That’s ok about the “trading card” idea it is challenging but I like that at least tried it and was happy to help you try and figure it out.
So for the float-in/out animation it looks like you probably duplicated the animations for each section which is fine but forgot to change all the targets. Here is an example that is fixed note I changed the target class to the classes in that section. Prior to me changing the affected class all of them were still affecting container contact.
I’m not certain I understand - I changed all the targets so that they only affected the containers in each section using the combo classes to make sure that they each reflected the same sections, that part is working right. It seems like the only problem is that it doesn’t work on the first scroll thru. When I go back thru, everything behaves really nicely, float-in and float-out both.
Alright I’ll break it down step by step.
- I look at this sections interactions - which is float in partners - So far so good.
- Since we are affecting specific classes you need to change to all elements of this class and then change the assignment to “container” “partner” (when you change to all elements it will automatically adjust to the original class that was used to assign it)
You will want to make sure each interaction is set correctly. The reason it wasn’t loading correctly was because the assignment was generic and not specific.
I hope this makes more sense
Sean
It does, thank you, but unfortunately, as far as I can tell, it still didn’t work 