Jump to content
Search Community

CSS-Grid & Draggable

Donatello666 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

Hi,

 

i´m getting a "layoutout-crash" if i try to apply  "draggable" to en elment which is styled/position using the css grid property. Everything works fine by dragging (outside top,left, bottom) till i drag the element to the right ouside of my grid-container. When i grap it again -> layout-crash

 

Am i doing something the wrong way?

 

Here is a codePen:

See the Pen vWxNGR by Michelangelo666 (@Michelangelo666) on CodePen

 

Link to comment
Share on other sites

59 minutes ago, Michelangelo666 said:

Am i doing something the wrong way?

 

Kind of, but not really. You're setting autoScroll on your draggable, which may add an extra element to your draggable's container when you drag. So sometimes there will be 7 elements inside your second row instead of 6, which messes everything up. That is probably something @GreenSock will need to investigate.

 

Seems to work fine without autoScroll turned off.

 

See the Pen WXprgO by osublake (@osublake) on CodePen

 

 

  • Like 3
Link to comment
Share on other sites

Thanks a lot OSUblake,

 

im really relieved now...

... and even know how "autoscroll" works ;)

 

may i ask you answering me one more question?:

 

you mentioned in this topic:

if you want to change the grid (e.g.: columns, rows) , it is better to get the position of all items in the grid, then apply the new layout  (css-properties) to the grid-container and finally move (tween) all items from their original position to their new position.

 

i played with tweening the css-property directly like:

 

TweenMax.to( gridContainer, timeE, { css:{ gridTemplateRows: '2fr 6fr', '-ms-grid-rows' : '2fr 6fr' }, ease: 'normal' } );  //ease: 'normal' is my custom ease...

 

is this way a bad idea?

 

Link to comment
Share on other sites

2 hours ago, Michelangelo666 said:

i played with tweening the css-property directly like:

 

TweenMax.to( gridContainer, timeE, { css:{ gridTemplateRows: '2fr 6fr', '-ms-grid-rows' : '2fr 6fr' }, ease: 'normal' } );  //ease: 'normal' is my custom ease...

 

is this way a bad idea?

 

That's perfectly fine if all you want to do is change some dimensional aspect of your grid.

 

The technique I show in that thread deals more with animating structural/layout changes like this.

 

 

 

I guess the official name for that technique is now FLIP.

https://aerotwist.com/blog/flip-your-animations/

 

I do stuff a little bit different to allow for animation blending, but overall it's the same process.  Here's some really good slides that explain more about FLIPing animations.

 

http://slides.com/davidkhourshid/flipping#/

 

 

  • Like 3
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...