Features

As usual, to craft something like this in Framer, we need to establish components and variants that we can connect with interactions. Framer then smartly animates between them.

I divided the scene into multiple parts and created two variants for each one individually.

So, for instance, I have a "Foreground", "Can", and "Background" component, each having an "Orange" and "Pineapple" variant.

Once I have all of the necessary variants, completing the animation is simply about setting up the interactions correctly.