Reply To: Section border shape change on scroll

[Shikkediel]

The basic idea looks quite simple, placing two divs at the top of the section and change their size based on the scroll position. The triangle shape itself seems to have been done with the border trick.

https://css-tricks.com/snippets/css/css-triangle/

Essentially nice but quite horrible for page performance when used as an animation. It requires a lot of repaints that are noticeably slowing things down.

Here’s something (far from perfect) I alternatively threw together:

codepen.io/anon/pen/qRJYaB

I think transforms are a better way to go (they don’t require repaints)…