[Setting transformOrigin to a position absolute div]

Working on the codepen example I found my mistake, so I just aded the codepen demo, it may help someone else.

 

Thank you!

[Setting transformOrigin to a position absolute div]

Hi,

 

I'm trying to animate a set of cards so when they animate in they rotate to a specific angle, these cards are stacked one on top of each other, so I have position them absolutely inside another div, but the transformOrigin does not seem to have an effect.

 

Any help will be much appreciated.

 

*** UPDATE ***

After working on a codepen example I found what I did wrong, the codepen link has a working example.

The problem was a reference to an extra div element.

 

Regards,

Ricardo

See the Pen wvKBmem by nardove (@nardove) on CodePen

[How to stagger and array of objects?]

Legend! thanks a lot

[How to stagger and array of objects?]

Sure, have a look at my codesandbox

 

At the end of the createGrid() method you will find the timeline object I'm trying to create, but the animation goes one at a time

[How to stagger and array of objects?]

@OSUblake,

 

Thank you, when tweening threejs onbjects we have to select the object and the property to tween like mesh.rotation then tween the x, y, or z values

how can I stagger a collection of threejs elements to they animate like the stagger example using a DOM element?

 

Also where can I find the stagger object properties documentation?

 

Cheers

[How to stagger and array of objects?]

I'm working on animating a grid of threejs boxes and I would like to implement the grid option available in the stagger object of the timeline, but when doing so I get an error:

Quote

a[(tonumeric wrapAt)].getBoundingClientRect is not a function

 

The example code only shows how to use the stagger options applied to DOM elements so I wonder if I'll need to create my own objects with properties that the grid optins will understand, which I can easly do, but I dont know what it is required. Hope that makes sense.

 

Here is my setup:

- There is an array of threejs Meshes layout in a grid

- I want to create a timeline to animate all elements in the grid using the stagger grid options like:

stagger: {
  amount: 1.5,
  grid: "auto",
  from: "center"
}

- But I'm getting the error quoted above

 

Any help will be much appreciated.