Material Design Transition Animations - Anchor Points

[PMAGz (Pete M)]

To begin, I am a huge fan of Google’s Material Design principles (Material Design), and would love to use Webflow to implement some cool transition animations. However, I am having trouble trying to figure out a good way to create transitions where there is an anchor point on the clicked element. In other words, if you have a category row of three products…[1] [2] [3]…the transition to the individual product page would begin on the clicked element…ie. [Left] [Middle] [Right].

Here’s a site that I reference often for inspiration: http://www.materialup.com/

And, here’s an example of a transition that appeals to me: Material Design E-Commerce App by Alberto Conti on Dribbble

The example shows a two column row, with the click interaction on the product to the left…hence the animation starts there. If the click was on the product on the right, the animation would start from that side.

My goal is to use Webflow’s CMS to create a website that includes this type of transition animations. Is this possible? Any tips or demos would be very much appreciated.

Thank you!

[PixelGeek (Nelson)]

so something like this? (yes, this isn’t material design, but the different layouts is what i’m referring to)

http://geospace.webflow.io

[PMAGz (Pete M)]

Hi Nelson,

Yes, similar to this…but the starting point would be different, as the element height would not be 100%. I’m not sure if that matters.

Here’s exactly what I am referring to: https://events.google.com/io2015/

If you scroll down to featured sessions and click a video link, you’ll see the transition begins at that element. Go back and click on a few video links to see what I mean. Can we do this in Webflow without a workaround, or custom code?

[PMAGz (Pete M)]

Good evening, Nelson…I just wanted to follow up with you. Did you have a chance to visit the link in my last reply? Any thoughts on this transition animation? Let me know.

Thanks,
Pete

[Waldo (Waldo Broodrÿk)]

Hey @PMAGz these interactions are definitely possible within Webflow

I have a few examples here: http://100-days-of-ui-with-waldo.webflow.io/ and working on some more.

Let me know if you have any questions creating certain interactions.

[PMAGz (Pete M)]

Thanks Waldo…those are very cool demos! Thanks for sharing!

That said, do you currently have, or plan on creating, any examples with anchor points. Again, I know I could create these animations individually…however, I’m trying to create one animation that will adjust based upon the area of the clicked element. This would allow me to use the CMS and create the transition from a collection page to description page. I apologize if I’m missing something or overthinking this idea.