Google I/O 2015 Site: paper-ripple or something custom?

[Darin Hensley]

On the Google I/O 2015 site, if click on About, Schedule, Video.... the ripple covers/travels the whole header panel element, completely. In addition, the color effect is to where the ripple color changes the header panel color to the ripple color. Is this paper-ripple element being used or custom code? 

[Eric Bidelman]

It's custom.  There's a hidden element that covers the entire masthead area and the ripple emanates from the click point.

We used web animations + promises to do the coordination of the ripple + color swap + page slide out + new page slide in.

See

https://github.com/GoogleChrome/ioweb2015/blob/21d7a80aefd6a76474fcdb700ac9965cd4c7800f/app/scripts/helper/page-animation.js

https://github.com/GoogleChrome/ioweb2015/blob/21d7a80aefd6a76474fcdb700ac9965cd4c7800f/app/scripts/helper/util.js#L242

https://github.com/GoogleChrome/ioweb2015/blob/21d7a80aefd6a76474fcdb700ac9965cd4c7800f/app/styles/components/_masthead.scss#L97-L118

On Sat, Oct 24, 2015 at 9:34 AM Darin Hensley <darin....@gmail.com> wrote:

On the Google I/O 2015 site, if click on About, Schedule, Video.... the ripple covers/travels the whole header panel element, completely. In addition, the color effect is to where the ripple color changes the header panel color to the ripple color. Is this paper-ripple element being used or custom code? 

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/8e07a031-0462-4d79-9a4b-c8917e74e144%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.