[Animating padding with overwrite]

Cheers both, I just went with the solution below as I wanted the two animations to be independent of each other, so just set the padding with some data attributes.

 

See the Pen BaZpzVo by MichaelHeyDonny (@MichaelHeyDonny) on CodePen

[Possible to combine Draggable and Flip plugins for sorting?]

Forgot to mention more recently, I've had success using Draggable and FLIP together for what I needed. Here's an example that includes a bit of my final solution: 

 

See the Pen yLXVxbx by MichaelHeyDonny (@MichaelHeyDonny) on CodePen

 

The top left blue bars are the triggers. There's a few things missing in this example like how to handle empty parent containers etc but thought I would share. The FLIP plugin has certainly helped greatly in providing a solution to what this has replaced. So thanks GSAP as always!  

[Animating padding with overwrite]

Hi all, 

 

In the CodePen I've set up a basic toggle that opens and closes a div. As part of the animation, the padding also expands from 0px to 20px. The 20px is however currently hard coded. What's the best way to store the divs original padding and refer to this for future animations? As currently if for example the button is toggled before the animation completes, the padding would return for example 10px if it wasn't hard coded. 

 

I was wondering if gsap had any way to store such properties? Or just storing it in a data attribute on the div is a fine solution. 

See the Pen BaZQVQq by MichaelHeyDonny (@MichaelHeyDonny) on CodePen

[Draggable: onAutoScroll event?]

Oh of course, that works fine! Thanks Jack 

[Draggable: onAutoScroll event?]

Hi all, I'd like to disable certain behaviour while I'm using Draggable and autoScroll is in play. Has anyone got any suggestions for the best approach to do this? 

[Possible to combine Draggable and Flip plugins for sorting?]

Thanks for the feedback Jack, yes I threw that together pretty quick. I've worked a little more on it today, and will refine further soon and also look to integrate your approach. Note I think for now this demo requires a min width of 500px to work properly. 

See the Pen MWpLLeb by MichaelHeyDonny (@MichaelHeyDonny) on CodePen

[Possible to combine Draggable and Flip plugins for sorting?]

Thank you both, yes I'm thinking the same, in regards to using a placeholder element. 

[Possible to combine Draggable and Flip plugins for sorting?]

Hi, as the Flip plugin can move things around the DOM, could it be used together with Draggable to make sorting items with variable heights easier? For example in the provided Codepen, I'd like to sort these two items with behaviour similar to: 

See the Pen mAyyQP by joelcoxokc (@joelcoxokc) on CodePen

 

Clearly it's not playing well together currently, but would it be possible? 

See the Pen zYZeOmJ by MichaelHeyDonny (@MichaelHeyDonny) on CodePen

[Flicker on updating duration on repeating animation]

Fantastic, thanks Jack. Yes that clears things up rather nicely

[Flicker on updating duration on repeating animation]

Thanks very much Jack, both the beta and .time(0) resolves the issue. At least in Google Chrome, I first viewed in Brave and the issue seems to persist.. 

 

I'm wondering if there's a different approach to what I'm aiming to achieve as you mentioned it's very uncommon. As well as applying random x and y, I also wish to apply a random duration on each repeat. Is there another approach to changing in onRepeat? As I would have thought updating the duration if an animation is repeating wouldn't have been too unusual? 

[Flicker on updating duration on repeating animation]

Hi all, 

 

The animation flickers when updating the duration onRepeat. What am I missing here? 

See the Pen XWXrPyr by MichaelHeyDonny (@MichaelHeyDonny) on CodePen

[Looping around a value range]

All works well thanks Carl, much appreciated. 

[Looping around a value range]

Hi all, 

 

I'm animating both back and forward between 4 set values (0, 8, 16, 24). These values are part of the range 0-34. When I'm at value 24 and need to move forward, the animation needs to play to 34 then return to 0. Also when at 0 and need to move back, it would need to play back to 34, moving to value 24.

 

What's the easiest approach to achieve this loop? 

I'd also like to know how to apply this in the AS3 framework please. 

 

Thanks!