<Div> to <Div> animation sequence/transition?

1

I’ve realized I could most readily actualize this, precisely, with ‘canvas’ and in JS-- Yet before getting to that point, I was looking for a bit of a ‘sound-check’ on this thought.

Code is here: https://codepen.io/abalducci/pen/OzbRME

Relevant action is ‘Learn something new’ which brings up a random Wiki.

I know the end result is a bit messy right now because I am in part wondering ‘where’ I can go with this.

‘Ideally’, I’d like the logo to shrink and transition to the upper left corner alongside the search bar.

I tried a little bit of something here like that by doing a ‘bait-and-switch’ mechanism-- Or animate and then reveal the ‘real DIV’.

Before going totally ‘roll your own’, I thought I might ask if there was any established way to formulate the same effect ?

2

Oh crud, CodePen did not save my earlier edits on this-- Have to adjust.

3

I think this sort of effect would ideally be done using an SVG, but otherwise what you’ve described is legitimate.