Flipping an element in a mouseover hover

[Mattrudd]

Hi GSAPpers,

I'm close to figuring this one out, but not quite close enough...

In my setup, a video element fades in on mouseover of each li element. 

Each video of course corresponds to each li element via a data-id.

I've set a flip.to so that when each li is clicked, the video flips to a larger fixed size.
This seems to work ok on initial click, but then on subsequent clicks on lines, the flip doesn't animate, it just jumps.

Furthermore, I'd like to animate the lines out on click (while flipping to new state)

Then animate lines back in as the video flips back to old state.

Not sure where I'm going wrong - know it's likely an ordering of tweens and Flips but can't quite figure it out after re-reading the docs!

Thanks all.
 

See the Pen RwqyPwq by matt-rudd (@matt-rudd) on CodePen

[Rodrigo]

Hi,

 

This is not the simplest thing to achieve but basically you are incorrectly using the Flip plugin in terms of reparenting. Unfortunately we don't have the time resources to provide a custom functionality like the one you're after but hopefully this example shows a better approach to the correct way of reparenting the elements:

See the Pen BaGxmdR by GreenSock (@GreenSock) on CodePen

 

Finally is always a good idea to NOT use Flip immediately. Like when using ScrollTrigger we recommend users to not use ScrollTrigger until their animations work in the way they want. Same thing with Flip, be sure to have everything but Flip working as expected (such as re-parenting and others) before using Flip for the animations.

 

Hopefully this helps.

Happy Tweening!

[Mattrudd]

Good advice thanks.

Had another run at this, using reparenting a bit better/like a previously use version I've studied...

The only thing left to fix here I think is how to fade out the intial hovering video (connect to cursor position) on each li element... it fades for the first line but not the others.

See the Pen vYQjpGZ by matt-rudd (@matt-rudd) on CodePen

 

 

[Mattrudd]

Think I've managed to get there... remembered seeing a class added as a kind of marker as part of the flip, and that's done the trick to fade the hover video but not the flipped video.

 

Seems to work ok. Bit of a fade still on the outgoing hover video but think I can live with that.

See the Pen vYQjpGZ by matt-rudd (@matt-rudd) on CodePen

[Rodrigo]

Hi,

 

Is great to hear that you have something working!

 

Like I said before this is not the simplest thing to achieve. For the mouse leave feature you can add some sort of conditional logic in your code to prevent the mouse leave animation if the element has been enlarged.

 

Happy Tweening!