![]() All you need to do is include your UMD build in your npm package (not your repo, that's different!). Workflowįor npm package authors, unpkg relieves the burden of publishing your code to a CDN in addition to the npm registry. This will also load more quickly because we won't have to resolve the latest version and redirect them. If you want users to be able to use the latest version when you cut a new release, the best policy is to put the version number in the URL directly in your installation instructions. Redirects are cached for 10 minutes at the CDN, 1 minute in browsers. This is the latest version when no version is specified, or the maxSatisfying version when a semver version is given. URLs that do not specify a package version number redirect to one that does. This works because npm does not allow package authors to overwrite a package that has already been published with a different one at the same version number.īrowsers are instructed (via the Cache-Control header) to cache assets indefinitely (1 year). ![]() The CDN caches files based on their permanent URL, which includes the npm package version. This feature is very experimental Cache Behavior any/file?meta) ?module Expands all “bare” import specifiers in JavaScript modules to unpkg URLs. Query Parameters ?meta Return metadata about any file in a package as JSON (e.g. use a “bare” URL), unpkg will serve the file specified by the unpkg field in package.json, or fall back to main.Īppend a / at the end of a URL to view a listing of all the files in a package. You may also use a semver range or a tag instead of a fixed version number, or omit the version/tag entirely to use the latest tag. 'onComplete': When the animation has finished playing the defined segment, a transition will /: :version/:file Examples A 'position' object will be needed as well as a 'frames' array. 'seek': Sync animation with cursor position. If the cursor leaves the animation, it pauses. 'pauseHold': Hover over the animation for the length of the 'frames' property to cause a transition. If the cursor leaves the animation, it plays in reverse. 'hold': Hover over the animation for the length of the 'frames' property to cause a transition. Example.Ī 'repeat' property containing a number can then be used to define how many times the animation will repeat before transiting 'repeat': Play the animation x amount of times before transiting. Optionally a 'count' property can be defined to transit after x amount of hovers 'hover': Causes a transition when hovering over the animation is detected. Optionally a 'count' property can be defined to transit after x amount of clicks 'click': Causes a transition when clicking on the animation is detected. Transition can have the following values: Transition defines the interaction that will cause Lottie-Interactivity to go to the next interaction link in the chain. The parent div will be taken as a container. The configuration can include a container field as shown in the next example. "cursor" where the scrolling of the animation will be synced to the cursor position within the container. In this case it is set to 100.Ĭonfiguration modes include "scroll" where the animation will be synced to the scrolling of the window and This refers to the percentage of the viewport.Įnsure that the ending frame is the frame you want the interactivity to end at. The visibility arrays first value is the start and the second value is the end. ![]() Multiple objects can be added into this array and therefore multipleĪctions such as "seek","play", "stop" and "loop", can be set.Įach object has a start and end which is essentially a percentage for the height of the lottie container and This object takes an array named actions whichĬonsists of an array of objects. Configuration will contain an actions object. ![]() The name of the player ie: 'firstLottie' in this example is the ID set to the lottie web component on the ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |