Our great sponsors
-
vue-scrollactive
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.
After doing this, I iterate over the HTML content, parse out every h1 tag, and register the headlines with this neat little library called vue-scrollactive: https://github.com/eddiemf/vue-scrollactive It allows easily displaying a table of contents of sorts. From the RichText component, I render the resulting table of contents into the sidebar using a vue-portal. Vue-scrollactive takes care of rendering the list of headlines, making them clickable with a smooth transition, and updating the currently enabled item as the user scrolls through the content. It also fires a callback every time the currently active item changes.
-
The method is using stroke-dasharray. Here, for each path in the svg, I calculate the length of the path, and set a dash array in CSS that is exactly as long as the path, but also offset it exactly as far as the path is long. That means it's practically invisible. Then, I simply animate the stroke-offset to 0 in CSS which creates the line draw effect. It looks especially cool on this SVG IMO: https://jason-e.dev/project/init
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.