Skip to content

Instantly share code, notes, and snippets.

View timrijkse's full-sized avatar

Tim | Rubber Ducky timrijkse

View GitHub Profile
@timrijkse
timrijkse / paginator.js
Created January 23, 2017 11:22
paginator mixin for vue
import clamp from 'lodash/clamp'
export default {
props: {
/**
* The items inside the paginator
*/
items: {
type: Array,
@timrijkse
timrijkse / scroll-percentage.js
Created October 8, 2019 09:24
Get scroll percentage of element. When the top of the element hits the top of the screen percentage will be 0. When the bottom of the element hits the bottom of the screen percentage will be 100.
const { top, height } = this.$el.getBoundingClientRect()
const { pageYOffset, innerHeight } = window
const min = top + pageYOffset
const max = min + height - innerHeight
const percentage = ((pageYOffset - min) * 100) / (max - min)
@timrijkse
timrijkse / smooth-scroll.js
Last active October 10, 2019 09:35
Smooth scroll example GSAP+Vue
<template>
<div class="page" :style="{height: `${pageHeight}px`" }>
<div ref="page" class="page-inner">
</div>
</template>
<script>
import { TimelineMax, TweenMax, Linear } from 'gsap'
@timrijkse
timrijkse / AuthProvider.tsx
Last active March 6, 2024 12:35
MSAL Auth Provider for React
import React, {
createContext,
useContext,
useLayoutEffect,
useState,
} from "react";
import {
InteractionRequiredAuthError,
PublicClientApplication,
} from "@azure/msal-browser";