Transitioning static logo to animation

[TheNomadicAspie]

I have a logo that's always in the corner of my app like in the image attached.

 

I also occasionally have a loading animation that plays after fading out the buttons and text on the screen like this.

 

I would really like to animate the logo from the corner of the screen to the center while transitioning from the static image to the gif I'm using. Is there someway to do that? Would I need to buy the license to have access to morph SVG or is there another method I could use? I've never used GSAP before so I'm not sure how to approach this.

 

[Cassie]

 

Hey there NomadicAspie

Morph SVG definitely won't morph between an SVG and a GIF - this sounds like a good case for neatly layering the two on top of each other and crossfading between them.

[Cassie]

Oh also - all the club plugins are available to test and mess around with on codepen.

So if you did want to experiment with morphing (between two SVG shapes) you wouldn't need to pay for access. ☺️

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

[TheNomadicAspie]

Hi Cassie, thank you very much. I'll start experimenting, just wanted to make sure I was using (Or not using) the correct tool/approach. Thanks again.

[GreenSock]

Yep, and in terms of positioning there's a chance that Flip plugin may prove quite useful. Tough to say without seeing a minimal demo. 

[TheNomadicAspie]

23 hours ago, GreenSock said:

Yep, and in terms of positioning there's a chance that Flip plugin may prove quite useful. Tough to say without seeing a minimal demo. 

I just bought the business green license because I can tell this will save me a lot of time, but when using Flip instead of it replacing the image with the same position and size, it starts out much smaller. I've been trying to figure this out over the last day by debugging line by line but can't figure it out. Any idea what's happening here?

 

You can't really tell what's going on from the preview since the app needs to be full screen, but if you go to the link you should see what I mean. It's on a one second delay, you can comment or uncomment the showLogoAnimation function to see.

 

See the Pen WNjMeEJ by TheNomadicAspie (@TheNomadicAspie) on CodePen

[GreenSock]

19 minutes ago, TheNomadicAspie said:

I just bought the business green license because I can tell this will save me a lot of time

🎉 🙌

 

19 minutes ago, TheNomadicAspie said:

when using Flip instead of it replacing the image with the same position and size, it starts out much smaller. I've been trying to figure this out over the last day by debugging line by line but can't figure it out. Any idea what's happening here?

It looks to me like the main issue is that you've got radically different padding values that you didn't include in the Flip animation, so the padding is choking out the logo at small sizes. Also, you captured the state AFTER you made a bunch of changes to the DOM/styling. 

 

I assume you were looking for something more like this?: 

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

 

Notice I just put the Flip.getState() first in the function (before you make your changes) and I added the props: 

const state = Flip.getState(".logo", {props: "paddingTop,paddingBottom,paddingLeft,paddingRight"});

Does that clear things up? 

[TheNomadicAspie]

33 minutes ago, GreenSock said:

🎉 🙌

 

It looks to me like the main issue is that you've got radically different padding values that you didn't include in the Flip animation, so the padding is choking out the logo at small sizes. Also, you captured the state AFTER you made a bunch of changes to the DOM/styling. 

 

I assume you were looking for something more like this?: 

 

 

 

Notice I just put the Flip.getState() first in the function (before you make your changes) and I added the props: 

const state = Flip.getState(".logo", {props: "paddingTop,paddingBottom,paddingLeft,paddingRight"});

Does that clear things up? 

It does, that's exactly what I needed, now I can start learning more about the different options and plug-ins and hopefully not waste too much more of your time for awhile. Thanks so much for the help!

[Cassie]

No time wasted at all!

Make sure to pop back. We'd love to see this once it's finished. It looks like a really interesting project 👀