\n\n------\n\n## NOTICE\n\nThis package is not compiled with Babel, which means that your build step should babelify it.\nMeaning, if your bundler's babel config excludes `node_modules`, you should add `jupiter` as an exception.\nIn your webpack babel loader config:\n\n```es6\nexclude: [\n /node_modules([\\\\]+|\\/)+(?!@univers-agency\\/jupiter)/\n]\n```\n\n\n## Application\n\n### Config\n\n- `respectReducedMotion` - default `true`\n\n\n### Available CSS vars\n\n- `--vp-initial-inner-h` - Initial window inner height\n- `--vp-initial-outer-h` - Initial window outer height\n- `--vp-initial-inner-w` - Initial window inner width\n- `--vp-initial-outer-w` - Initial window outer width\n\n\n### Methods/functions\n\n- `registerCallback(type, callback)`\n - Registers `callback` to be called when an event `type` occurs.\n - Example:\n ```es6\n const app = new Application()\n\n app.registerCallback(Events.APPLICATION_PRELUDIUM, () => { ... })\n app.registerCallback(Events.APPLICATION_INITIALIZED, () => { ... })\n app.registerCallback(Events.APPLICATION_READY, () => { ... })\n ```\n\n- `isScrolled()`\n - If application is scrolled or not\n\n- `scrollLock()`\n - Lock the application's scrolling\n\n- `scrollRelease()`\n - Release the application's scrolling\n\n- `scrollTo(target)`\n - scroll to target\n\n- `pollForElement(target, time = 500, callback = () => {})`\n - Checks if `target` is in DOM every 500ms until successful, then calls `callback`\n\n- `pollForVar(variable, time = 500, callback = () => {})`\n - Checks if `variable` is true every 500ms until successful, then calls `callback`\n\n\n## Dom\n\nSome utility functions for dealing with the DOM.\n\n- `Dom.html`\n - References the `html` element\n\n- `Dom.body`\n - References the `body` element\n\n- `Dom.find('header')`\n - Returns the `header` element\n\n- `Dom.find(header, 'nav')`\n - Returns the `nav` element inside `header`. `header` is an element, not a string.\n\n- `Dom.all('li')`\n - Returns all `li` elements\n\n- `Dom.all(header, 'li')`\n - Returns all `li` elements inside `header`. `header` is an element, not a string.\n\n- `Dom.addClass(element, 'one', 'two', 'three')`\n - Adds classes to `element`\n\n- `Dom.removeClass(element, 'one', 'two', 'three')`\n - Removes classes to `element`\n\n- `Dom.hasClass(element, 'one')`\n - Checks if `element` has class `one`\n\n- `Dom.toggleClass(element, 'one', 'two', 'three')`\n - Toggles `one`, `two`, `three` classes on `element`\n\n- `Dom.overlapsVertically(element1, element2)`\n - Returns number in pixels element1 and element2 overlaps\n\n- `Dom.offset(element)`\n - Returns `top` and `left` offsets for `element`\n\n- `Dom.position(element)`\n - Returns `top` and `left` positions for `element`\n\n- `Dom.getCSSVar(key)`\n - Get `key` as CSS var on root\n\n- `Dom.setCSSVar(key, val)`\n - Sets `key` with `val` as CSS var on root\n\n\n\n## Events (application)\n\n- `APPLICATION:PRELUDIUM`\n\nCalled before initialization\n\n- `APPLICATION:INITIALIZED`\n\nCalled after initialization\n\n- `APPLICATION:READY`\n\nCalled when application/dom ready\n\n- `APPLICATION:REVEALED`\n\nCalled after `#fader` removed\n\n- `APPLICATION:MOBILE_MENU:OPEN`\n\nCalled on opening mobile navigation menu\n\n- `APPLICATION:MOBILE_MENU:CLOSE`\n\nCalled on closing mobile navigation menu\n\n- `APPLICATION:SCROLL`\n\nCalled on application scrolling\n\n- `APPLICATION:RESIZE`\n\nCalled on application resizing\n\n- `APPLICATION:SCROLL_LOCKED`\n\nCalled when scrollbar is locked with `app.scrollLock()`\n\n- `APPLICATION:SCROLL_RELEASED`\n\nCalled when scrollbar is released with `app.scrollRelease()`\n\n- `APPLICATION:FORCED_SCROLL_START`\n\nCalled when application is forced to scroll, for instance on clicking anchors, triggering `scrollTo`\n\n- `APPLICATION:FORCED_SCROLL_END`\n\nCalled at end of forced scroll.\n\n- `APPLICATION:OUTLINE`\n\nCalled if user presses ``. Tells us the user is using tabbed navigation\n\n- `APPLICATION:VISIBILITY_CHANGE`\n\nCalled when application becomes hidden or visible\n\n- `APPLICATION:HIDDEN`\n\nCalled when application becomes hidden\n\n- `APPLICATION:VISIBLE`\n\nCalled when application becomes visible\n\n\n## Events (other)\n\n`IMAGE:LAZYLOADED`\n\nCalled when an image marked for lazyloading finishes loading. Gets called on the element itself:\n\n```es6\nimport * as Events from jupiter\nconst image = document.querySelector('.my-image')\nimage.addEventListener(Events.IMAGE_LAZYLOADED, () => { console.log('lazyloaded') })\n```\n\n`SECTION:LAZYLOADED`\n\nCalled when a section enters the viewport and its pictures are done loading\n\n```es6\nimport * as Events from jupiter\nconst section = document.querySelector('.my-section[data-lazyload-section]')\nsection.addEventListener(Events.SECTION_LAZYLOADED, () => { console.log('lazyloaded') })\n```\n\n## Lightbox\n\nCan be initiated with a sectioned name `data-lightbox-section`. The lightbox will only\ninclude images from this section. Otherwise, all lightboxed images will be included.\n\n```html\n\n \n \n\n
Click to trigger
\n \n\n```\n\n#### Options\n\n- `trigger` - `false` - selector representing an element you want to use as a trigger to open lightbox\n- `captions` - `false` - whether to show captions or not in the overlay\n- `swipe` - `true` – if swipe is true, native zoom won't work, so allow choosing\n- `elements` - `object` - switch out default elements in the overlay\n - `arrowRight` - `function` - returns an element\n - `arrowLeft` - `function` - returns an element\n - `close` - `function` - returns an element\n - `dot` - `function` - returns an element\n- `onBeforeOpen` - `function` - hook for before opening lightbox\n- `onOpen` - `function`- hook for opening lightbox\n- `onClose` - `function` - called when closing the lightbox\n- `onAfterClose` - `function` - called after closing the lightbox\n- `onImageIn` - `function (lightbox)` - called on image fade in.\n You can check for the first transition at `lightbox.firstTransition`. The image to tween is at\n `lightbox.nextImage`. Timeline is at `lightbox.timelines.image`.\n- `onImageOut` - `function (lightbox)` - called on image fade out. The image to\n tween is at `lightbox.currentImage`. Timeline is at `lightbox.timelines.image`.\n- `onCaptionIn` - `function (lightbox, captionHasChanged)` - called on caption fade in. The caption\n to tween is at `lightbox.elements.caption`. Timeline is at `lightbox.timelines.caption`.\n- `onCaptionOut` - `function (lightbox, captionHasChanged)` - called on caption fade out. The caption\n to tween is at `lightbox.elements.caption`. Timeline is at `lightbox.timelines.caption`.\n- `onClick` - `function (lightbox, section, event)` - called when lightbox is clicked. The pointer\n direction is available at `lightbox.pointerDirection`\n- `onPointerLeft/onPointerRight` - `function (lightbox)` - callback for when pointer direction changes\n\n\n\n## Links\n\n#### Options\n\n- `triggerEvents` - `boolean` - `true` - If we should trigger events when scrolling.\n This affects the fixed header amongst other things.\n- `scrollDuration` - `number` - `0.8` - how long the scroll lasts\n\n\n\n## Moonwalk\n\nMoonwalks are divided into sections that are run in a timeline. Multiple\ntimelines can run at the same time.\n\nYou reference the configured `walks` by the `data-moonwalk=\"walkname\"`\nsyntax. If no value is provided, we run the `default` walk.\n\n#### Options\n\n- `on` - default `Events.APPLICATION_REVEALED`\n - Automatically fire on `APPLICATION_REVEALED` event. Set this to `() => {}` if\n you need to do customized initialization before firing.\n\n- `initialDelay` - default `0`\n - Set a delay before calling the `ready` function. Useful for timing reveal against\n other reveals happening towards the `APPLICATION_REVEALED` event for instance.\n\n- `clearLazyload` - default `false`\n - Clear out all `data-ll-srcset` from moonwalk elements\n\n- `clearNestedSections` - default `true`\n - Clear nested `data-moonwalk-sections` since they usually just break functionality.\n\n- `clearMoonwalkOnAnchors` - default `false`\n - Removes all moonwalks if called from a link with hash/anchor.\n\n- `rootMargin` - default `'-15%'`\n - Determines how early the IntersectionObserver triggers\n\n- `threshold` - default `0`\n - How much of the element must be visible before IO trigger. From 0 to 1 where 1 is the entire element\n\n- `uniqueIds` - default `false`\n - Create unique `[data-moonwalk-id=\"\"] prop for each moonwalk element\n\n- `addIndexes` - default `false`\n - Create `[data-moonwalk-idx=\"X\"] inside of each section per key\n\n- `runs`\n - Example\n ```es6\n runs: {\n heroAnimation: {\n threshold: 0.5,\n callback: element => {\n // This function runs when `element` comes into view\n }\n }\n }\n ```\n - Call this with `
`\n\n- `walks`\n - Configures tweens\n - Example:\n ```es6\n walks: {\n default: {\n /* How long between multiple entries in a moonwalk section */\n interval: 0.1,\n /* How long each tween is */\n duration: 0.65,\n /* Add a separate tween for opacity/visibility.\n Can be set to `true` for the default tween, or `false` to skip */\n alphaTween: { ease: Sine.easeIn, duration: 1 },\n /* The transitions that will be tweened */\n transition: {\n from: {\n y: 5\n },\n to: {\n /* skip autoAlpha here, since we have our own alphaTween that sets it for us */\n // autoAlpha: 1,\n ease: 'sine.out',\n force3D: true,\n y: 0\n }\n }\n }\n }\n ```\n\nSample code\n```html\n
\n
\n Default walk\n
\n
\n `Fast` walk\n
\n
\n```\n\n### Named sections\n\nA named section will autoplay its children when intersecting with the viewport.\nNeeds the `sectionTargets` key in config. If `sectionTargets` is not provided,\nthe section's immediate children are used instead.\n\nYou can force a custom order of the staggered reveal by adding `data-moonwalk-order=\"1\"` etc\nto the targeted elements.\n\nNamed sections can have `startDelay`, a delay added before the first staggered tween.\n\nSample code\n\n```html\n
\n
\n \n ...\n \n \n ...\n \n
\n
\n```\n\nSample config:\n\n```es6\nslider: {\n sectionTargets: '.image',\n interval: 0.2,\n duration: 1.2,\n alphaTween: true,\n transition: {\n from: {\n autoAlpha: 0,\n y: 21\n },\n to: {\n ease: 'sine.out',\n y: 0\n }\n }\n}\n\n```\n\n### Stages\n\nA stage will run a transition on itself before introducing the rest\nof the moonwalks. For instance, if a section should be animated to\n\"open\" by scaling Y from 0 to 100. When the stage's tween is finished,\nthe rest are called as they intersect.\n\nSample code\n\n```html\n
\n
...
\n
...
\n
...
\n
\n```\n\nSample config\n\n```es6\nwalks: {\n scaleup: {\n interval: 0,\n duration: 1,\n startDelay: 1,\n transition: {\n from: {\n scaleY: 0,\n transformOrigin: '50% 50%'\n },\n\n to: {\n scaleY: 1,\n ease: 'sine.out'\n }\n }\n }\n}\n```\n\n### Set children\n\nSometimes you might have a dynamic number of children that you want to moonwalk,\nfor instance paragraphs in an article. You can do this by setting `data-moonwalk-children`\non the parent element. You can also supply a value to this attribute if you want to set a\nspecific walk to the children:\n\n```html\n\n
Paragraph one
\n
Paragraph two
\n ...\n\n```\n\nParagraph one and two will then get a `data-moonwalk=\"slide\"` attribute.\n\n\n## Popup\n\n### Options\n\n- `tweenIn: (el, popup) => {}`\n - Function that gets called to tween popup + background in.\n - `el` is the popup element itself, while `popup` is the `Popup()` class.\n - Backdrop can be accessed as `popup.backdrop`\n\n- `tweenOut: (popup) => {}`\n - Function that gets called to tween popup + background out\n - Backdrop can be accessed as `popup.backdrop`\n\n- `onClose: (popup) => {}`\n - Function that gets called right before `popup.close`\n\n### Example\n\nExample HTML\n\n```html\n
\n```\n\n## StickyHeader\n\n * header element should not have position: fixed\n\n### Options\n\n- `onClone` - default `h => h.el.cloneNode(true)`\n - Hook to customize how the auxillary header element is created\n\n- `on` - default `Events.APPLICATION_REVEALED`\n - Automatically shows on `APPLICATION_REVEALED` event.\n\n- `pinOnOutline` - default `false`\n - Pin header when user tabs\n- `pinOnForcedScroll` - default `true`\n - Pin header when scroll is forced (`application.scrollTo`, clicking anchors etc)\n- `unPinOnResize` - default `false`\n - Unpin header when window is resized\n\n- Events\n - `onMainVisible`\n - Triggers when main nav is in viewport\n - `onMainInvisible`\n - Triggers when main nav leaves viewport\n - `onPin`\n - Triggers when the auxillary nav gets pinned\n - `onUnpin`\n - Triggers when the auxillary nav unpins\n - `beforeEnter`\n - Triggers during initialization. Useful for preparing elements\n before tweening into view\n\n\n## FixedHeader\n\n * header element needs position: fixed;\n\n### Options\n\n- `on` - default `Events.APPLICATION_REVEALED`\n - Automatically enter on `APPLICATION_REVEALED` event.\n- `pinOnOutline` - default `false`\n - Pin header when user tabs\n- `sections`\n - Here you can set a config per section (body[data-script=\"section\"])\n - `unPinOnResize` - auto unpin while resizing\n - `offset` - when is header triggered\n - `offsetBg` - when is offset background triggered (i.e. if there's another bg for content)\n - events are same as under default.\n\n- Events\n *Standard events*\n - `enter`\n - Triggers 'enter' animation on the event set in `opts.on`\n - `beforeEnter`\n - Triggers during initialization. Useful for preparing elements\n before tweening into view\n - `onOutline`\n - When document is outlined. Default behaviour is to pin the header.\n\n *Section-specific events*\n - `onPin`\n - Triggers when the auxillary nav gets pinned\n - `onUnpin`\n - Triggers when the auxillary nav unpins\n - `onAltBg`\n - Triggers when the altBg offset is passed\n - `onNotAltBg`\n - Triggers when the altBg offset is passed to reg background\n - `onSmall`\n - Triggers when we're small\n - `onNotSmall`\n - Triggers when we're not small\n - `onTop`\n - Triggers when we're at the top\n - `onNotTop`\n - Triggers when we're not at the top\n - `onBottom`\n - Triggers when we're at the bottom\n - `onNotBottom`\n - Triggers when we're not at the bottom\n - `onMobileMenuOpen`\n - Triggers when mobile menu opens\n - `onMobileMenuClose`\n - Triggers when mobile menu closes\n\n ```\n header[data-nav] {\n @include container();\n\n z-index: 10;\n position: fixed;\n width: 100%;\n top: 0;\n left: 0;\n right: 0;\n backface-visibility: hidden;\n transition: padding-top 500ms ease, padding-bottom 500ms ease;\n\n @each $bp-name, $bp-size in $grid-breakpoints {\n @include media('>=#{$bp-name}') {\n @each $key, $val in map-get($header-padding, $bp-name) {\n #{$key}: #{$val};\n }\n }\n }\n\n &[data-header-small] {\n transition: padding-top 500ms ease, padding-bottom 500ms ease;\n\n @each $bp-name, $bp-size in $grid-breakpoints {\n @include media('>=#{$bp-name}') {\n @each $key, $val in map-get($header-padding-small, $bp-name) {\n #{$key}: #{$val};\n }\n }\n }\n }\n }\n ```\n\n\n## HeroVideo\n\nSet a cover image by supplying a `data-cover` element.\nAllow different srcs for mobile/desktop by setting\n`data-src='{\"phone\": \"<%= get_global(\"hero_link_phone\") %>\", \"desktop\": \"<%= get_global(\"hero_link_desktop\") %>\"}'`\n\nHero example:\n\n```html\n\n
\n
\n \n
\n \n
\n \n
\n
\n \n
\n \n
\n We specialise in branding \n and identity design.\n
\n \n
\n \n \n ↓\n \n \n \n\n```\n\n### Options\n\n- Events\n - `onFadeIn: (hero) => {}`\n - `onPlayReady: (hero) => {}`\n - `onClickPlay: (hero) => {}`\n - `onClickPause: (hero) => {}`\n - `onFadeInCover: (hero) => {}`\n - `onFadeOutCover: (hero) => {}`\n\n- Elements\n - `elements.play`\n - string SVG representing the play icon\n - Gets wrapped in a button with `[data-hero-video-pause].\n - `elements.pause`\n - string SVG representing the pause icon\n - Gets wrapped in a button with `[data-hero-video-pause].\n\n\n## Parallax\n\n### Options\n\n- `el`\n - default `[data-parallax]`\n\n- `fadeContent`\n - default `false`\n - If true, fades out `[data-parallax-content]` as we move towards bottom of parallaxed element\n\n\nExample:\n\n```html\n\n\n\n
![](\"https://github.com/univers-agency/jupiter/workflows/CI/badge.svg\"){kind=icon}
\n ![\"npm](\"https://badge.fury.io/js/%40univers-agency%2Fjupiter.svg\"){kind=icon}
\n![](\"/img/wide.jpg\")
\n