Skip to content

Instantly share code, notes, and snippets.

View dagalti's full-sized avatar
🎯
Focusing

dagalti

🎯
Focusing
View GitHub Profile
@dagalti
dagalti / dynamic-keyframes.js
Last active February 17, 2019 03:42
Dynamic Css Keyframes
///Create keyframes for moving X position TranslateX
//How to use?
// import {animate} from dynamic-keyframes.js
// animate(element, from_X_pos, to_X_pos, callback_function_after_animation_finish)
export const animate = (elm, from, to, done) =>{
var animfn = "linear"
var duration = "300ms"
var direction = "forwards" ///or "backwards"
var style = document.createElement('style');
@dagalti
dagalti / vue-viewmore-directive.js
Last active February 27, 2019 15:43
Simple View more / Read more directive for vuejs based on number of lines. Add v-viewmore="MAXIMUM_LINES_T0_SHOW" to content div. Demo : https://codepen.io/dagalti/pen/vPOZaB
/* How to Use?
1. Add v-viewmore to content div.
2.Add CSS to the component.
3. Javascript
import { viewmore } from 'vue-viewmore-directive.js'
export default {
@dagalti
dagalti / vue-material-swipe-tabs-with-animation.html
Last active June 11, 2024 14:37
Vuejs Material design tabs with swipe, transitions effects without using extra libraries.
<!---
1. Set Tabwidth in data
2. Tabs are swipeable
3. Scrollable tabs
4. No external libraries used expcept vuejs
5. Using vuejs transition for animation
Demo : https://dagalti.github.io/vue-tabs.html
Codepen : https://codepen.io/dagalti/pen/pYKXQW
-->
@dagalti
dagalti / vue-timeago-filter.js
Last active March 31, 2019 00:09
Vuejs timeago filter (Milliseconds to Readable string)
/*
It converts timestamp / milliseconds to readable time ago string. for eg. 12 mins ago, 1 month ago
How to use?
import { timeago } from '@/filters.js';
export default {
name: ...,
filters:{timeago},
}