npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

svfx

v0.0.6-minorupdate-fix6

Published

Animation effects that use the use directive in svelte.

Downloads

19

Readme

svfx

This is a js animation library that animates your commponents using the svelte use: directive.

This is how you use it.

  <script>
    import {scrollFunctions, typeAnimation, Animation} from "svfx"
  </script>

  <main>
    <p 
      use:scrollFunctions
      on:enterscreen={Animation({name: "keyframe name"})}
      use:typeAnimation = {{duration: 2000}}
    >
      Hello
    </p>
  </main>

  <style>
    @keyframes -global-in {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  </style>

Curently it has the functions: scrollFunctions, Animation, Sequence, typeAnimation, typeCorectionAnimation and ImageSlade.

typeAnimation

This function animates any text that is directly in the p or h tags. It has only two argument witch are duration and delay and they control the timing of the type animation. Function header:

typeAnimation(node, args = {duration:1000, delay:0, once:false})

typeCorectionAnimation

This function is simular to the typeAnimation function but it has two more arguments: corections: [] and playtype: "normal".

This function cycles through worlds given in the corections argument and types them on the screen before it erases it and type the next word. It goes on infinitely.

The playtype arguments can be either normal or pingpong. Normal is just normal and pingpong make the text alimate the erasing proccess as well.

typeEncryptFX

It is simular to the other type functions. This scrambles the innerText of a element an makes it look corupted/encrypted and then is decrypts the text, few letters at a time. The function header is:

encryptFX(node, args = {duration:1000, scrambleTime:1000, delay:0, cycles:10, once:false})

TYPE ANIMATIONS SUBFUNCTIONS

Every function that has the the type prefix has its subfunctions. If you can these functions with no arguments it returns an array of two functions: one function is to be put in the use directive of the svelte element and the other is to triger the animation. Example:

<script>
	import {typeAnimation} from "svfx"
	let [fx, play] = typeAnimation();
</script>

<main>
	<p use:fx={{duration: 500}} >Hello</p>
	<button on:click={play} >PLAY</button>
</main>

isnted of:

<script>
	import {typeAnimation} from "svfx"
</script>

<main>
	<p use:typeAnimation >Yo sup my nigga how has it been. the last time I saw you you were fucking that bitch jessica. %</p>
</main>

So this alows you to have more control over the type animations. This is optional.

Animation

This function returns a function that when called applies a specified animation to the element.

Here is the function header:

Animation({name, duration = 1000, delay = 0, timing = "", once = false, reset = false})

The args are:

  • name - the name of the css keyframes animation.
  • duration - the time duration of the animation.
  • delay - animation delay.
  • timing - animation timing.
  • once - this determans if the function is going to be played only once.
  • reset - this determans if the element is going to return to the css stete before the animation was played.

Sequence

This function is like animation but you can make sequence out of those animations that is triggered with a function.

Here is the function header: Sequence({wholeDuration, animations = [], sequencer = "sametime"})

Explaining the arguments:

  • animations - this is where you make a list of animation function arguments like the name, duation ... so and so.
  • wholdeDuration is not working curenty.
  • sequencer - this argument determans if the sequence of animations are going to be played at the same time (aka. sametime) or one after another (aka. tail).

It returns an array of the animation play triger and the animation functions.

So the code will look somthing like this:

<script>
	import {Sequence} from "svfx"

	let s = Sequence({
		sequencer: "tail", 
		animations: [
			{name: "in", duration: 800, delay: 400}, 
			{name: "in"}
		]
	});

  // animTrigger is the animation play trigger 
  // and sq1 and sq2 are the animation applier functions.
	let [animTrigger, [sq1, sq2]] = s;
</script>

<main>
	<button on:click={() => {animTrigger()}} >
      hello
    </button>
	<div class="b" use:sq1></div>
	<div class="b" use:sq2></div>
</main>

ImageSlade

This function needs an empty div element and it will make an image slide show.

Function header: ImageSlade(node, args = {images: [], timing: 1000, fadeTiming: 500})

Explining arguments:

  • node - ref to the empty div.
  • images - links to the images you want to show.
  • timing - the duration of image before switching.
  • fadeTiming - the duration he switching animation.

scrollFunctions

This function will give the 7 custom event's:

  • onscreen - will fire when the element is on screen.
  • enterscreen - will fire when element enter's the screen.
  • leavescreen - will fire when the element leaves the screen.
  • entertop / enterbottom - fires when element enter from either top or bottom of the screen.
  • leavetop / leavebottom - fires when element leaves from either top or bottom of the screen.

It also has some arguments:

  • fromTop - this offset's the screen top by some value in pixels. If you want it to work in percentages you need to turn the value in to a string with specifiend percent value.
  • fromBottom - same as fromTop but from bottom.
  • onscreen, enterscreen ... - these are the custom event's specified at the top. Here you put in the animation params just like the Animation function. So insted of this:
      <p 
        use:scrollFunctions
        on:enterscreen={Animation({name: "keyframe name"})}
      >
    you can do this:
      <p 
        use:scrollFunctions = {{
          enterscreen: {name: "keyframe name"}
        }}
      >