Div folding open: best approach

[bparticle]

For my client I need to develop a theme that revolves around div's that "fold open", sort of. They are pretty simple animations, but I need to make them work on different screens, and it needs to be as smooth and performative as possible. I am leaning towards SVG, because I will ned the morphsvg plugin in other parts of the website for sure, but for this folding div's, can I somehow specify and animate the four corners of the rectangle in a timeline? Something like: first left-upper corner move 100px to the left, then right-upper corner move 75px up, and so forth? What would be the best way to go about the project?

open-video_s.mp4

[Carl]

Hi and welcome to the GreenSock forums,

 

I couldn't open your video file. Apparently QuickTime (Mac) doesn't like it.

 

Not exactly sure of the effect you want. Animating the position of div corners isn't really a standard thing.

 

But if  you want to do something like:

 

http://jsfiddle.net/ajgagnon/traebhhe/5/

 

It uses GSAP and perspectivetransform.js which you can read about here: https://github.com/edankwan/PerspectiveTransform.js

 

Is there something on youtube or another site that can help us better understand the effect you are after?

[bparticle]

Hello Carl, thank you for looking into this, despite the failing video.

 

I will need to try this library out on the project, but by the looks of it, it might just be perfect for the job! Will report back.