GSAP Flip - scaling vectors (specifically Lottie files!)

[Mattrudd]

Hi,

 

My latest aim is to build a Flip gallery (very similar to the walkthrough example 

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

)

Key complication is I need it to showcase a bunch of animated Lottie files.

 

Figured it best to start at the beginning with Flip and test how I might trigger the Lottie to play once it's nestled into the new container (FLIPpin' clever btw 👏)

 

That led me to my question... still got my training wheels on so bear with me here...

 

Is it possible to ask Flip to scale the SVG vector (think I'm correct in stating this would be scaling the SVG attributes rather than transforms?) in such a way as to avoid the pixellation you can see in my (very rough) demo

I could likely just make the original Lottie file a higher resolution, but figured there may be a cleverer way - if nothing else to keep file sizes down.

 

Thanks as ever.

 

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

[Rodrigo]

Hi,

 

The gallery example that you're using as inspiration, actually doesn't re-parents the image. It takes the position of the thumbnail adds some data such as image source and others to a container and then animates that container from the state of the selected thumbnail. If you reparent the thumbnail the whole grid would become a mess. If you want to do something like that check this mini tutorial by @Cassie and the live example:

https://youtu.be/byyHoLPSxSQ

https://codesandbox.io/s/flip-codesandbox-challenge-9c8vwc

 

Finally I believe Lottie files are SVG paths, so there shouldn't be any pixelation whatsoever. If you inspect the DOM element where the Lottie animation is being played you can see only SVG and it should scale up and down without any issues, you just need to style the main SVG to fit the container it resides in. But I'm not an expert in SVG, perhaps Cassie (GSAP's resident SVG wizard) or @mvaneijgen can share more insight about it.

 

Happy Tweening!

[Mattrudd]

Hey @Rodrigo - thanks for your reply man.

Yes - I see the reparenting going on - I chose this example because it behaves the way I want my Lottie gallery to behave... unless I'm incorrect I figured I couldn't somehow use a Lottie json link as a data source in the same way this example uses the img tag? If this was possible it would be a pretty straightforward swap I guess - but that's likely a sign I need to go back over JS arrays and try and incorporate.

 

You're right of course about Lottie files being SVGs... the pixellation was a case of Safari striking again! It must've rasterised the image and thrown me... seems fine in Chrome. Because of this Safari paint I figured that Flip was scaling just the container without respecting the SVG... I should have much more faith in GSAP ha! 

 

The pen below is very rough and ready - I'm still pretty noob and only part way through (haven't yet centred/overlaid the new container over the thumbnails with Flip.fit etc.) This pen should give you an idea of what I've got in mind though.

 

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

All that said I'll pause and get my head around  @Cassie's how-to - got a feeling at a glance that it's a much better way... I'll be sure to check that after some sleep 😬 Thanks for pointing me towards it 🤝
 

[Cassie]

You should just be able to replace the image with a lottie container (or the inner SVG) without issues, they're just DOM elements after all!

Pop back if you struggle after watching that mini tutorial ✨

[Mattrudd]

Here's my effort so far... I def need to go over all the docs a few more times! (No surprise that the only reason I'm learning JS is to use GSAP more fully!)

 

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

I’m looking to have each Lottie in the gallery flip from thumbnail (originalContainer) to centre stage in the middle of the grid (newContainer), then play through. 

 

Worked on this effort over the weekend, and made some progress! I took a good look at your example above @Cassie, as well as your wheel style one, but figured the gallery example at the top of this thread is the closest to what I’m after - reparenting in a larger empty container rather than swapping existing image placements?

 

There are a few things wrong with my attempt - the main issue related to Flip is how best to make the Flip work for each thumbnail, not just one!

• Tried to get an array of each thumbnail so that clicking on each would flip to the new container, but my JS is still sketchy as! I’m only getting close with the first (top left) thumbnail. Looking into nodes as I type!

The rest is just incase anyone's feeling generous and has any insight 😬

• The area the newContainer takes in the middle isn’t clickable. I guess I could turn this off with ‘pointer-events: none’ but that would likely mean the open div couldn’t be clicked to close?
• I’d quite like the blue border on all four sides of the thumbnail (added during the flip) to stick while the image is in the newContainer. Tried a few methods including onComplete to toggle this border class but didn’t crack it
• Not sure how to fix opacity so that the unselected thumbnails dim while the selected thumbnail is active, then un-dim once thumbnail returns to original position.
• This last issue is a biggy - literally scoured the internet to try and find a play/reset method that would allow for the Lottie to only play once it’s taken place centre stage in the new container after the initial Flip click, then reset to the beginning ready for a potential second click. The closest solution I could find is the inline ‘onClick=function’ method, but this limits things so that the animation only plays on the first click… and I haven’t yet managed to build in a delay so each Lottie would play after the flip and not before.
  In my head this would involve calling a play function in the flip.from timeline? I could add the delay there too I guess.
  There are few if any working examples I can find of a gallery page featuring lots of Lotties! One for their forum though, I understand! 

[Cassie]

Hey again. Good attempt, nicely done!

 

So, I think you'll probably be best off looping around all the Lottie's and creating an event listener for each one. Then you can change the position of the clicked Lottie element to fixed to 'enlarge' it. I don't think reparenting is really necessary.

I've also popped the onClick events off the div's, we can just call play when the FLIP animation is called.

Hope this helps!

 

See the Pen abGjbWM?editors=0111 by GreenSock (@GreenSock) on CodePen

[Mattrudd]

@Cassie THANK YOUUUUUUUUU!  Absolute ⭐

 

Oh my days player.seek()! How did I miss that in the docs!

 

Very grateful and will learn a lot from chewing over your solution 😁

[Cassie]

Always happy to help!