Animation with embeded video

[jbonlinea]

Hi

 

I did created a nice animated flexbox desing thank's to gsap and your playground !

 

I'm still facing an issue, as when the item are resized, the item and clone item content are displayed in a weird way !

 

Is is possible to properly animate flex div containing an embed video ?

 

Thank's

See the Pen NWNzzWJ?editors=1010 by jbonlinea (@jbonlinea) on CodePen

[ZachSaucier]

Hey jbonlinea. You've got a lot of things going on in this demo. Can you please keep it focused on one issue at a time? Which transition are you talking about? Also please tailor your demo to the issue that you're asking about, we don't need to see all of the unrelated code.

[jbonlinea]

Hi

 

Thank's  for your reply

 

I curated the demo to let only the needed material, sorry I was trying something else at the same time.

 

Basically there are two button that enables to switch between flex-direction and order : this if fine

 

The items are animated, pretty neatly,  however the item content with the video have a weird behaviour.

 

Basicaly, if I'm right tween duplicate the div, hide the original ones, and  make the calculation and resize the duplucateds ones. ok

What happends is that, when switching from row to column flex direction, or the orther way round, the original and duplicated div content are not hidden and resized as neatly as I expected.

 

From row to column, the video is displayed in full size behind its duplicate that is indeed nicely resized

from column to row the div is resized without animation and we an see its duplicate being resized smoothly over it

 

 

Hope I'm understandable

 

Thank's for your support

[ZachSaucier]

1 hour ago, jbonlinea said:

if I'm right tween duplicate the div

Why do you need to duplicate it? I'd just change the DOM. GSAP actually has a helper function for that: 

 

But regardless this seems just like a logical issue to me, not anything related to GSAP. Do you have a GSAP question that we can help with?

 

By the way we recommend GSAP 3. It's better in every way! It's easy to migrate to.

[jbonlinea]

17 hours ago, ZachSaucier said:

Why do you need to duplicate it? I'd just change the DOM. GSAP actually has a helper function for that: 

 

 

 

Hi

 

Well actually I discovered gsap looking for a solution to animate flexbox, and bumped into the playground ! It's pretty amazing, but it do duplicate the item content, why I don't know, but I first belived it was gsap way of implementing animation.

 

Now I know it's not, and I'm glad because I don't want that, it's a pain in the as* if you programmatically populate you div.

 

With this in mind, I'll work on the other questions I have opened elsewhere, which may well pave the way to solve this one too .

 

I'll let you know

 

Cheers