[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70656":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":21,"defaultBranch":22,"hasWiki":20,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":33,"discoverSource":34},70656,"lax.js","alexfoxy\u002Flax.js","alexfoxy","Simple & lightweight (\u003C4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.","",null,"JavaScript",10486,485,1,13,0,2,68.26,"MIT License",true,false,"dev",[24,25,26,27,28,29],"animation","css","effects","parallax","scroll","transitions","2026-06-12 04:00:56","# Archive Notice\nDue to other commitments I am unable to continue maintaining this project. As far as I know it still works, but there are likely better, more up to date alterantives out there. \n\n# lax.js\n\nSimple & lightweight (\u003C4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll. \n\n![Lax 2.0 Gif](https:\u002F\u002Fi.imgur.com\u002FXNvvAOv.gif)\n\n[>> DEMO \u003C\u003C](https:\u002F\u002Falexfox.dev\u002Flax.js\u002F)\n\n---\n## What's new with Lax.js 2.0\nLax.js 2.0 has been completely re-written with a focus on modularity and flexibility giving you more tools to create awesome animations.\n- New javascript animation syntax, allowing for more advanced effect combos\n- Use any value to drive animations, for example mouse position, time of day .. and of course scroll!\n- Animations can be given inertia when scrolling\n- Create custom CSS bindings \n- Animation easings\n- And much more..\n\n## Examples\n- [Scroll effect](https:\u002F\u002Falexfox.dev\u002Flax.js\u002Fexamples\u002Fscroll)\n- [Horizontal snap scroll](https:\u002F\u002Falexfox.dev\u002Flax.js\u002Fexamples\u002Fsnap-scroll)\n- [Inertia](https:\u002F\u002Falexfox.dev\u002Flax.js\u002Fexamples\u002Finertia)\n- [Video\u002FGif playback](https:\u002F\u002Falexfox.dev\u002Flax.js\u002Fexamples\u002Fsprite)\n- [Cursor position](https:\u002F\u002Falexfox.dev\u002Flax.js\u002Fexamples\u002Fcursor)\n- [Text input](https:\u002F\u002Falexfox.dev\u002Flax.js\u002Fexamples\u002Finput)\n- [Update HTML content](https:\u002F\u002Falexfox.dev\u002Flax.js\u002Fexamples\u002Fon-update)\n- [Preset Explorer](https:\u002F\u002Falexfox.dev\u002Flax.js\u002Fpreset-explorer)\n\n\n# Documentation\n\n### 1. Getting started\n\n- [Setup](#setup)\n- [Using presets](#using-presets)\n- [Usage with UI frameworks](#dom-behavior-and-usage-with-frameworks)\n- [Adding drivers](#adding-drivers)\n- [Adding elements](#adding-elements)\n\n### 2. Going deeper\n\n- [Custom animations](#custom-animations)\n- [Optimising performance](#optimising-performance)\n\n### 3. Glossary\n\n- [CSS properties](#css-properties)\n- [Special values](#special-values)\n- [Supported easings](#supported-easings)\n\n# Getting started\n\n### NPM Setup\n\n```bash\n# https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Flax.js\n\nnpm install lax.js\nyarn add lax.js\n```\n```js\nimport lax from 'lax.js'\n```\n\n### HTML setup\n\n```html\n\u003Cscript src=\"path-to-lax.min.js\">\u003C\u002Fscript>\n\u003C!-- or via CDN -->\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Flax.js\" >\u003C\u002Fscript>\n```\n\n\n## Setup\n\nTo implement lax you need to create at least one _driver_, to provide values for animations, as well as the element animation bindings. Below is a simple example:\n\n```html\n\u003C!-- JS -->\n\u003Cscript>\n  window.onload = function () {\n    lax.init()\n\n    \u002F\u002F Add a driver that we use to control our animations\n    lax.addDriver('scrollY', function () {\n      return window.scrollY\n    })\n\n    \u002F\u002F Add animation bindings to elements\n    lax.addElements('.selector', {\n      scrollY: {\n        translateX: [\n          [\"elInY\", \"elCenterY\", \"elOutY\"],\n          [0, 'screenWidth\u002F2', 'screenWidth'],\n        ]\n      }\n    })\n  }\n\u003C\u002Fscript>\n\n\u003C!-- HTML -->\n\u003Cdiv class=\"selector\">Hello\u003C\u002Fdiv>\n```\n\n## Using presets\n\nThe easiest way to get started is to use presets via html classes. For example: \n\n```html\n\u003Cdiv class=\"lax lax_preset_fadeIn:50:100 lax_preset_spin\">\u003C\u002Fdiv>\n```\n\nMultiple presets can be chained together and they can be customised to suit your needs. Use the [preset explorer](https:\u002F\u002Falexfox.dev\u002Flax.js\u002Fpreset-explorer) to explore effects and see a simple example [here](https:\u002F\u002Falexfox.dev\u002Flax.js\u002Fexamples\u002Fhtml-inline).\n\n## DOM behavior and usage with Frameworks \n\nTo increase performance, `lax.js` indexes the list of elements to animate when the page loads. If you're using a library like React, Vue or EmberJS, it is likely that you are adding elements after the initial window.onload. Because of this you will need to call `lax.addElements` when you add components to the DOM that you want to animate, and `lax.removeElements` when the component unmounts.\n\nPlease find a React example [here](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Flaxjs-react-example-nc4h7). Other examples will be available soon for Vue.js and Angular.\n\n## Adding drivers\n\nDrivers provide the values that _drive_ your animations. To set up a driver just call `lax.addDriver` with a name and a function which returns a number. This method is called every frame to calculate the animations so keep the method as computationally _light_ as possible. The example below will be the most common use case for lax which returns the scrollY position of the window.\n\n```javascript\nlax.addDriver(\n  'scrollY',                          \u002F\u002F Driver name\n  function(laxFrame) {                     \n    return window.scrollY    \u002F\u002F Value method\n  },\n  { }                                 \u002F\u002F Options\n)\n```\n\n### Driver options\n\n#### `inertiaEnabled: boolean = false`\n\nIf enabled, the driver will calculate the speed at which its value is changing. Used to add inertia to elements using the [inertia element option](#inertia-number).\n\nSee this in action in the [here](https:\u002F\u002Falexfox.dev\u002Flax.js\u002Fexamples\u002Finertia).\n\n#### `frameStep: number = 1`\n\nBy default each driver updates its value every animation frame, around ~60 times per second. You can use the `frameStep` to reduce frequency of the driver value updating. For example a value of `2` would only update ~30 times per second and a value of `60` would only update about once per second.\n\n## Adding elements\n\nYou can add lax animations to an element using the `addElements` method:\n\n```javascript\nlax.addElements(\n  '.selector',  \u002F\u002F Element selector rule\n  {             \u002F\u002F Animation data\n    scrollY: {  \n      opacity: [\n        [0, 100],\n        [1, 0]\n      ]\n    }\n  },\n  {             \n    style: {}   \u002F\u002F Element options\n  }\n)\n```\n\n### Element options\n\n#### `style: StyleObject`\n\nAdd static CSS to each element, for example:\n\n```css\n{\n  transform: '200ms scale ease-in-out';\n}\n```\n\n#### `elements: Array\u003CDOM nodes>`\n\nPass references to raw DOM elements to allow for more flexible selection patterns. In this case, a unique `selector` must still be passed as the first argument, however it does _not_ need to be a valid DOM selector.\n\nThis allows the library to tag the elements for removal later. Example:\n\n```js\nconst myDomElements = $('.selector')\n\n{\n  elements: myDomElements\n}\n```\n\n#### `onUpdate: (driverValues: Object, domElement: DomElement) => void`\nA method called every frame with the current driverValues and domElement. This could be used to toggle classes on an element or set innerHTML. See it in action [here](https:\u002F\u002Falexfox.dev\u002Flax.js\u002Fexamples\u002Fon-update).\n\nThe driver values are formatted as follows:\n```js\n{\n  scrollY: [  \u002F\u002F Driver name\n    100,      \u002F\u002F Driver value\n    0         \u002F\u002F Driver inertia\n  ]\n}\n```\n\n# Going deeper\n\n## Custom animations\nCustom animations are defined using an object.\n\n```javascript\n\u002F\u002F Animation data\n{\n  scrollY: {                \u002F\u002F Driver name\n    translateX: [           \u002F\u002F CSS property\n      ['elInY', 'elOutY'],  \u002F\u002F Driver value map\n      [0, 'screenWidth'],   \u002F\u002F Animation value map\n      {\n        inertia: 10        \u002F\u002F Options\n      }\n    ],\n    opacity: [\n      \u002F\u002F etc\n    ]\n  }\n}\n```\n\n### Driver name\nThe name of the driver you want to use as a source of values to map to your animation, for example, the document's scrollY position. Read about adding drivers [here](#adding-drivers).\n\n### CSS property\nThe name of the CSS property you want to animate, for example `opacity` or `rotate`. See a list of supported properties [here](#css-properties).\n\n> Some CSS properties, for example `box-shadow`, require a custom function to build the style string. To do this use the [cssFn](#cssfn-value-number--string) element option.\n\n### Value maps\nThe value maps are used to interpolate the driver value and output a value for your CSS property. For example:\n\n```javascript\n[0, 200, 800]  \u002F\u002F Driver value map\n[0, 10,  20]   \u002F\u002F Animation value map\n\n\u002F\u002F Result\n\n| In  | Out |\n| --- | --- |\n| 0   | 0   |\n| 100 | 5   |\n| 200 | 10  |\n| 500 | 15  |\n| 800 | 20  |\n```\n\nWithin the maps you can use strings for simple formulas as well as use special values. e.g:\n\n```javascript\n['elInY', 'elCenterY-200', 'elCenterY',\n```\n\nSee a list of available values [here](#special-values).\n\nYou can also use mobile breakpoints within driver value maps and animation maps for more flexibility.\n\n```javascript\nscrollY: {\n  translateX: [\n    ['elInY', 'elCenterY', 'elOutY'],\n    {\n      500: [10, 20, 50], \u002F\u002F Screen width \u003C 500\n      900: [30, 40, 60], \u002F\u002F Screen width > 500 and \u003C 900\n      1400: [30, 40, 60], \u002F\u002F Screen width > 900\n    },\n  ];\n}\n```\n\n### Options\n\n#### `modValue: number | undefined`\nSet this option to modulus the value from the driver, for example if you want to loop the animation value as the driver value continues to increase.\n\n#### `frameStep: number = 1`\nBy default each animation updates its value every animation frame, around ~60 times per second. You can use the `frameStep` to reduce frequency of the animation updating. For example a value of `2` would only update ~30 times per second and a value of `60` would only update about once per second.\n\n#### `inertia: number`\nUse to add inertia to your animations. Use in combination with the [inertiaEnabled](#inertiaenabled-boolean--false) driver option.\n\nSee inertia in action [here](https:\u002F\u002Falexfox.dev\u002Flax.js\u002Fexamples\u002Finertia).\n\n\n#### `inertiaMode: \"normal\" | \"absolute\"`\nUse in combination with `inertia`. If set to `absolute` the inertia value will always be a positive number via the `Math.abs` operator.\n\n#### `cssUnit: string = \"\"`\nDefine the unit to be appended to the end of the value, for example \nFor example `px` `deg`\n\n#### `cssFn: (value: number, domElement: DomElement) => number | string`\nSome CSS properties require more complex strings as values. For example, `box-shadow` has multiple values that could be modified by a lax animation.\n\n```javascript\n\u002F\u002F Box-shadow example\n(val) => {\n  return `${val}px ${val}px ${val}px rgba(0,0,0,0.5)`;\n};\n```\n\n#### `easing: string`\nSee a list of available values [here](#supported-easings).\n\n## Optimising performance\nLax.js has been designed to be performant but there are a few things to bare in mind when creating your websites.\n- Smaller elements perform better. \n- Postion `fixed` and `absolute` elements perform best as they do not trigger a layout change when updated.\n- Off-screen elements do not need to be updated so consider that when creating your animation value maps.\n- The css properties `blur`, `hue-rotate` and `brightness` are graphically intensive and do not run as smoothly as the other available properties.\n\n# Glossary\n\n## CSS properties\n\n| name       |\n| ---------- |\n| opacity    |\n| scaleX     |\n| scaleY     |\n| scale      |\n| skewX      |\n| skewY      |\n| skew       |\n| rotateX    |\n| rotateY    |\n| rotate     |\n| translateX |\n| translateY |\n| translateZ |\n| blur       |\n| hue-rotate |\n| brightness |\n\n## Special values\n\n| key          | value                                                                            |\n| ------------ | -------------------------------------------------------------------------------- |\n| screenWidth  | current width of the screen                                                      |\n| screenHeight | current height of the screen                                                     |\n| pageWidth    | width of the document                                                            |\n| pageHeight   | height of the document                                                           |\n| elWidth      | width of the element                                                             |\n| elHeight     | height of the element                                                            |\n| elInY        | window scrollY position when element will appear at the bottom of the screen     |\n| elOutY       | window scrollY position when element will disappear at the top of the screen     |\n| elCenterY    | window scrollY position when element will be centered vertically on the screen   |\n| elInX        | window scrollX position when element will appear at the right of the screen      |\n| elOutX       | window scrollX position when element will disappear at the left of the screen    |\n| elCenterX    | window scrollX position when element will be centered horizontally on the screen |\n| index        | index of the element when added using `lax.addElements`                          |\n\n## Supported easings\n\n| name           |\n| -------------- |\n| easeInQuad     |\n| easeOutQuad    |\n| easeInOutQuad  |\n| easeInCubic    |\n| easeOutCubic   |\n| easeInOutCubic |\n| easeInQuart    |\n| easeOutQuart   |\n| easeInOutQuart |\n| easeInQuint    |\n| easeOutQuint   |\n| easeInOutQuint |\n| easeOutBounce  |\n| easeInBounce   |\n| easeOutBack    |\n| easeInBack     |\n","lax.js 是一个轻量级（压缩后小于4KB）的纯JavaScript库，用于在滚动时创建流畅且美观的动画效果。它支持多种动画驱动方式，如鼠标位置、时间等，并且特别擅长处理基于滚动的动画，提供惯性效果和自定义CSS绑定功能。此外，lax.js 2.0版本通过增强模块化与灵活性，使开发者能够组合更复杂的动画效果。该库适用于需要增加交互性和视觉吸引力的网页设计场景中，如个人网站、产品展示页面或任何希望提升用户体验的地方。尽管目前项目已归档不再维护，但对于寻求简单高效实现滚动动画解决方案的开发者来说，仍然是一个不错的选择。","2026-06-11 03:33:13","high_star"]