Jump to content
Search Community

Accordion like motion 3d transform with float

Oscar Rottink test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I got an idea but can't figure out if it's possible in a simple way. I tried to find an answer on Google and I came by http://oridomi.com/ but that's much more complicated than what I want.


At the codepen you see squares and they get transformed. But since they are in a 3D space their will be gaps left behind between the squares. It makes sense that float: left doesn't help.


But how can I prevent those gaps and keep the things together? Or is it much simpler to do something like this using SVG's since you can combine corner points?


I'm puzzled :)

See the Pen ONxKKV by OzBoz (@OzBoz) on CodePen

Link to comment
Share on other sites

SVG will not be your silver bullet in this case. Primarily because SVG doe not (as far as I know) supports 3D in the specs yet. There's been a similar question not long ago about it: http://greensock.com/forums/topic/13844-foldingunfolding-animation/?hl=fold#entry58458 I haven't tried that yet myself but I can imagine it will. by its own nature be a complicated setup for a little while now.


I would imagine that, if you have a very specific way in which you want the image to fold, you can always make a series of nested divs to hold some sort of hierarchy and rotate them. Or, calculate one div's position based on another's rotation.


You can always use other libraries like THREE.js but my guess is that, too, falls under the complicated setup you are trying to avoid.

  • Like 1
Link to comment
Share on other sites

Thanks @Dipscom,


I just have the feeling what I want shouldn't be that complicated but I might be wrong. If I use Chrome to watch one of the transforming elements in the developer tools I see a tooltip with the actual size in pixels (width) of the transforming element. So I guessed (maybe wrong) that there was a way I could at least use that value. And call a function on update repositioning the other divs.


For me it's an option to look further into oridomi.com but I prefer programming something myself. Less overkill and I learn more. I'll keep looking for some answers. If you look at oridomi.com you see that it's pretty nifty and lots of nested divs.


I don't need overlapping items so the content is just on one square. Maybe I should have finished some eduction, oh wait, no internet back then ;)

Link to comment
Share on other sites

OzBoz, I'm in the same boat as you. More often than not, I would try and write some code tailored to my specific needs.


You can do exactly what you imagined - pick the transformations and reposition the divs accordingly. That was the second suggestion I have made 'Or, calculate one div's position based on another's rotation'.


It is very possible and not terribly complicated. It's just a matter of knowing enough of trigonometry, sin, cos and the such (none of which I am too hot at).

  • Like 1
Link to comment
Share on other sites

Hello OzBoz,


Looks like you are missing some of the CSS properties when using CSS 3D Transforms ..


If adding 3D to an element make sure you add either perspective to the parent of the element with 3D transforms. Or add transformPerspective to give only the element itself perspective.


Also on the element you have the 3D Transform on, make sure you add transformStyle: "preserve-3d"

// add perspective to parent of 3D transformed elements
TweenMax.set("#container", {perspective: 1000};

// tells the browser that the following elements use 3D
TweenMax.set(["#secondRow", "#firstRow"], {transformStyle: "preserve-3d"});

// OR use 'transformPersepctive' which adds
// it to the element it is applied to

TweenMax.set(["#secondRow", "#firstRow"], {
    transformStyle: "preserve-3d"
    transformPerspective: 1000

Also don't forget you can use backface-visibility depending if you need the 3D backface visible ;)


I am also seeing that the HTML markup in that oridami.com link  is such that each fold piece has there own parent so it can have an anchor point so to speak for the origin of where it will fold towards. So the HTML markup is crucial for this 3D fold effect to work.


More info on CSS transforms:

CSS Transforms: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Using CSS Transforms: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

CSS transform-style: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style

CSS perspective: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

CSS transform perspective: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

CSS backface-visibility: https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility


Hope this helps :)

  • Like 1
Link to comment
Share on other sites

My first try would be to translate the adjacent elements as the others are being transformed in 3D space, but my guess is that it could generate an issue of the elements not being correctly lined-up as both animations are happening at the same time. Also in your codepen all the elements have the transform origin on the center, which in this particular case has to change to the left/right side depending on the element's fold direction.


Perhaps you'll need to tag some trigonometry and some math into it, or get into the 3D matrix calculations in order to get the right positions.


The easy part of it is that you can set the animation progress using Draggable, so you just need to get the other stuff done ;)

  • Like 1
Link to comment
Share on other sites

That looks sweet Oscar, nice job!!


Hey @Rodrigo


Maybe you know, I was testing some things and I wonder why the movement is so choppy. If you look at 

See the Pen RajZqd by OzBoz (@OzBoz) on CodePen

you see a very slow animation but especially at the end it's not smooth at all. Is it a bug or is it me? :)


edit: i see the width is not using subpixels, so that's what makes it choppy.


edit2: fixed if I use x instead of width.


edit3: yes! autoround:false did the trick and prevented the width from being whole numbers. Must say that in combination with the other things in the tween I didn't assumed it was neccesary.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...