Streaming live at 10am (PST)

Origami Animation Effect


#1

Has anyone seen something like this done natively in Webflow… or even using a javascript library like this? I’m redesigning my site with the new grid and I wanted to create an “origami” like effect that unfolds the page.

https://oridomi.com/#demos


#2

Hey @spoulos

I think this can be done natively in Webflow. Start with something like this project.

Then add transforms and interactions to get the desired effect. You’ll probably need to utilize combo classes to target specific panels. Also remember to use the transform origin which will dictate off which edge the folding or rotating happens.

Sounds like it could be a very interesting effect if used appropriately to delight visitors. Hope this helps give you a starting point.


#3

Thanks @matthewpmunger Alot of good inspiration here. It looks like I have some late nights of experimentation ahead of me :wink:


#4

Hey @spoulos those are the best kind of nights. :stuck_out_tongue_winking_eye: Please come back here if you hit a wall or just want to show off your progress. Excited to see what you come up with!


#5

I’m getting somewhere, although it needs a lot of fine tuning. However, I would need to figure out how to make this a repeatable process so that if you clicked on any tile on the grid it would have a similar effect. I had to do a lot of positioning for each fold.

https://preview.webflow.com/preview/grid-test-6c618f?utm_source=grid-test-6c618f&preview=00a508a31881624404de1991e243cfb9


#6

From your shot on twitter, just wanted to check if you’re using the alignment options provided by grid. If so is that playing nicely with the rotate transform interaction?


#7

No actually, maybe I should? I basically have 6 divs laying on top of each other on the image tile. And then I used interactions to change the starting point position of each “flip”. I adjusted the transform origin for each flip div on where it’s hinged based on your suggestion above.

https://preview.webflow.com/preview/unfold-test?utm_source=unfold-test&preview=bab1c4eb971c8d371e9e67c98d2f5952


#8

When I gave the advice above, I wasn’t thinking about using grid. With grid it would be possible to have the flipping tiles directly on the grid using the grid options to control the origin. Not sure that it’s a better solution than what you’ve done, but it is another option.