Skip to content

Instantly share code, notes, and snippets.

View prashantsani's full-sized avatar

Prashant Sani prashantsani

47 followers · 14 following
View GitHub Profile
@prashantsani
prashantsani / Gandhijis-Charkha-in-Pure-CSS3.markdown
Created December 5, 2013 13:05
A Pen by Prashant Sani.
@prashantsani
prashantsani / Digital-Christmas-Tree.markdown
Created December 25, 2013 18:09
A Pen by Prashant Sani.
@prashantsani
prashantsani / franchise-animography-text-editor.markdown
Created February 1, 2017 22:35
Franchise - Animography Text Editor

Franchise - Animography Text Editor

Have fun tapping on your keyboard.
I exported the franchise characters from After Effects using Bodymovin
Each character is an svg.
Each animated with js.
Adjust colors, tracking, and more on the options panel in the top right.
Don't miss the uppercase version of each char!
These animations were not conceived for real time animation, so some characters are much more performant than others but I wanted to respect the original projects.
The best experience is on Chrome.

@prashantsani
prashantsani / Seamless Page Transitions
Last active February 5, 2017 14:26
//Navigating Pages
$(document).on('click','nav a',function(event){
event.preventDefault();
var $this = $(this),
toPage = $this.attr('href');
//Adds loading gif as a background to <html> tag
$('html').addClass('loading');
//This is usually a class from 'animate.css'
$('body').addClass('fadeOut');
@prashantsani
prashantsani / Scrol Magic Factory Function
Last active March 10, 2017 10:38
I created a function for adding scroll magic animations, this avoids repetition, aids readability & understanding.
//Ideally all the code below should be inside a self executing anonymous function
var controller = new ScrollMagic.Controller();
function setSMAnim(tweenArray,triggerElement,triggerHook,dur,funcOnStart){
var tweenQuote = new TimelineMax();
tweenQuote.add(tweenArray);
new ScrollMagic.Scene({
triggerElement: triggerElement,
@prashantsani
prashantsani / youtube-vimeo-id-check.js
Created May 12, 2017 10:39
Way to detect and parse IDs of youtube and vimeo video
function parseVideo(url) {
// - Supported YouTube URL formats:
// - http://www.youtube.com/watch?v=My2FRPA3Gf8
// - http://youtu.be/My2FRPA3Gf8
// - https://youtube.googleapis.com/v/My2FRPA3Gf8
// - Supported Vimeo URL formats:
// - http://vimeo.com/25451551
// - http://player.vimeo.com/video/25451551
// - Also supports relative URLs:
// - //player.vimeo.com/video/25451551
@prashantsani
prashantsani / fav-js-libraries.md
Created October 23, 2017 01:52
Favorite JS Libraries & Examples
@prashantsani
prashantsani / IntersectionObserver
Last active November 6, 2019 07:41
JavaScript IntersectionObserver Utility Function - Trigger When Element in View
// View Comment section for explanation
function _$(elem){ return d.querySelectorAll(elem) }
function observer(trigger, func_vis, func_hidden, threshold){
var t = threshold ? threshold : 1,
observable_var;
@prashantsani
prashantsani / VanillaJS_ScrollTo
Last active March 12, 2024 10:37
Native Alternate(Vanilla JS) to jQuery's ScrollTo Plugins
const supportsNativeSmoothScroll = 'scrollBehavior' in document.documentElement.style;
function scrollToView(elem) {
if(supportsNativeSmoothScroll){
// https://caniuse.com/#feat=mdn-api_window_scrollto
// As of publish date of this gist,
// this is only supported in 52% browsers,
// So, the next section (`else{`) is a fallback
window.scrollTo({
behavior: 'smooth',
@prashantsani
prashantsani / array-flat.js
Created March 5, 2020 15:03
Flatten An array of Integers not using Array.flat()
// Write some code, that will flatten an array of arbitrarily nested arrays of integers into a flat array of integers.
// e.g. [[1,2,[3]],4] -> [1,2,3,4].
function flatten(arr){
let newArray = [];
for(let i=0; i< arr.length; i++){
if(Array.isArray(arr[i])){
newArray = newArray.concat(flatten(arr[i]))
}else{
newArray.push(arr[i])