Algoud Marek marekalgoud
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import barba from '@barba/core' | |
| import animin from './anims/in' | |
| import animout from './anims/out' | |
| barba.hooks.before(() => { | |
| barba.wrapper.classList.add('is-animating') | |
| }) | |
| barba.hooks.after(() => { | |
| barba.wrapper.classList.remove('is-animating') |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import(/* webpackChunkName: "article" */ `./pages/article`).then(module => { | |
| try { | |
| const Article = module.default | |
| const article = new Article() | |
| article.init() | |
| } catch (err) { | |
| console.error(err) | |
| } | |
| }) |
marekalgoud
/ dynamic-lazyloading.js
Created
September 26, 2019 09:49
dynamic lazyloading with webpack
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import(/* webpackChunkName: "[request]" */ `./pages/${className}`).then(module => { | |
| try { | |
| const DynamicClass = module.default | |
| const page = new DynamicClass() | |
| page.init() | |
| } catch (err) { | |
| console.error(err) | |
| } | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| beforeLeave: ({ current }) => { | |
| barba.wrapper.style.height = current.container.offsetHeight + 'px' | |
| }, | |
| beforeEnter: ({ current, next }) => { | |
| barba.wrapper.style.height = next.container.offsetHeight + 'px' | |
| current.container.style.zIndex = -1 | |
| next.container.style.zIndex = 1 | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [data-barba='wrapper'] { | |
| position: relative; | |
| } | |
| [data-barba='container'] { | |
| will-change: transform; | |
| .is-animating > & { | |
| position: absolute; | |
| width: 100%; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| barba.hooks.before(() => { | |
| barba.wrapper.classList.add('is-animating') | |
| }) | |
| barba.hooks.after(() => { | |
| barba.wrapper.classList.remove('is-animating') | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import anime from 'animejs/lib/anime.es.js' | |
| export default (targets) => { | |
| targets.style.opacity = 0 | |
| targets.style.transform = 'translateY(100px)' | |
| const translateY = '0' | |
| const opacity = 1 | |
| const anim = anime.timeline({ | |
| easing: 'easeInOutSine', |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>{{ pageTitle }}</title> | |
| </head> | |
| <body class="{{ pageClass }}"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import barba from '@barba/core' | |
| import animin from './anims/in' | |
| import animout from './anims/out' | |
| barba.init({ | |
| transitions: [ | |
| { | |
| leave: ({ current }) => { |