GSAP + Web Components

[Noah Lynaugh]

Is it possible to use gsap flip with web component slots?

Here is a simple example of me trying to flip between the slots. 

in this example, a grid is used with img-nth atttributes. Can you do something similar with web component slots so that they can be dynamically filled with images/ videos while keeping layout and styling the same?
 

 

See the Pen WbNQyLp by Noah-Lynaugh (@Noah-Lynaugh) on CodePen.

[GSAP Helper]

I'm not seeing any difference on click. Can you please just comment-out the Flip portions and show a demo that immediately changes the way you're expecting, and then we can introduce Flip and see how to use that to animate between states? Again, at the moment it looks like absolutely nothing is changing layout-wise. 

 

Or are you asking more of a CSS question? We definitely try to keep these forums focused on GSAP-specific questions. Perhaps I'm missing something obvious? 

[Noah Lynaugh]

Yeah try it now...

[Noah Lynaugh]

I am trying to swop the images like this, but I think since I am only changing the src attribute on the slots, flip doesnt register a dom change.

This is exaggerated when you set absolute:true on the flip. The content dissapears for the duration of the flip.

[Noah Lynaugh]

I want the lava image (big Img) to animate to small image (ocean image). 

That way, you could use web components and slots to create layouts and flip the content in them.

[Noah Lynaugh]

See the Pen pvojxeR by Noah-Lynaugh (@Noah-Lynaugh) on CodePen.

^commented out flip

[mvaneijgen]

Hi @Noah Lynaugh welcome to the forum!

 

Here is a basic example how to swap two elements using Flip. I can't figure out how your setup works, but you could try and implement this logic in your setup. Flip needs two DOM elements to keep track of and it will probably not work by just changing the src of an element. Hope it helps and happy tweening! 

 

See the Pen OJNYjmz?editors=0010 by GreenSock (@GreenSock) on CodePen.

[Rodrigo]

Hi,

 

I'm not an expert in web components but to me it seems that it could be related to the template rendering phase (or after that).

 

It seems that you're trying to achieve something like this, right?

See the Pen ByaogvJ by GreenSock (@GreenSock) on CodePen.

 

Flip is based on getting either an initial or final state on some DOM elements, then changes being made to the DOM and then animating between the initial and final state. Somewhere in between there is a problem here. Maybe you can try using both images in the same component or use the targets property in Flip, in order to tell the Plugin where and what to look for:

https://gsap.com/docs/v3/Plugins/Flip/#targets

 

Hopefully this helps

Happy Tweening!

[Noah Lynaugh]

See the Pen pvojxeR by Noah-Lynaugh (@Noah-Lynaugh) on CodePen.

Doing it with a change to the dom that is similar to the example above. Still no luck. I think it is because of the shadow dom.

[GreenSock]

I assume you're trying to do this?: 

See the Pen mydVKNd?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

You just forgot to assign the data-flip-id so that the elements know that they're supposed to swap. Usually you're using the same element in both positions, but in your example, you're actually trying to use a completely different element's state as the prior state. See the docs for details (under "How do I flip between two different elements?"). 

 

I also experimented with making Flip work within the shadowRoot from your original demo, and the result of that (with a beta version of Flip) is here, but you really shouldn't need to do it that way - the example above seems cleaner to me: 

See the Pen zxYrapP?editors=0010 by GreenSock (@GreenSock) on CodePen.