useScrollWatcher Update

Summary

This update adds the hook useScrollWatcher and its compatibility in all the library. Also, minor improvements in the internal calculations and some bug fixes.

useScrollWatcher

This hook let you create an scroll context to use it as an scroll reference for all the hooks and components in the library. It just need a reference to an element that has an scroll behavior.

Linear Value Options

Now has another property called "context", this property accepts the object returned by useScrollWatcher and it will use this context instead of the regular context created by ScrollWatcher component.

Remember that most hooks use this options as an optional parameter.

Circle & Rectangle Component

Now both components accept Linear Value Options on "options" prop.

useDirection & useProximity Hooks

Now both hooks accepts "context" as an optional parameter and it should be an scroll context created with useScrollWatcher.

useLinearValue

Fixed a bug were you couldn't use an startValue bigger than a endValue. This was a fail in my logic during implementation.

Small changes to documentation

Summary

• Small changes to the documentation
• Small fixes on internal code

Added more documentation

Release v1.1.1

• Added example to Linear Values Options
• Added default value of every property to the documentation

v1.1.0: Merge pull request #40 from zJaaal/dev

Release v1.1.0

• Fixed bugs on how I calculated some values
• Cleaned project paths
• Added delay and duration options to all animation based hooks. Refer to docs
• Enhance documentation
• Minimal changes to the site

PD: I'm planning of doing a little playground on the site, so you can test how the new options work.

Jalinson "zJaaal" Diaz

First Release

Release

That's it, the lib is out of beta.

The library was mostly in beta because I was improving the way I calculated internal values, because of the way that browsers update the values that are bonded to the scroll state, I could not have exact values all the time. So I used a linear function (math of course) to calculate the current state of the animation, color, values, etc. In the current scroll state. That is the major change of this version. Mostly internal, not much to explain.

useDynamicColor

Works the same, but now you have an options object that I will use to make you capable of modifying the hook’s behavior. For now, it just has one property:

• anchor

This property just can have 3 possible values:

• "top"
• "middle"
• "bottom"

It refers to which edge will use the hook to calculate the current color; I recommend to experiment with this to understand better, how it changed the behavior.

Refer to the docs for more info.

Circle and Rectangle Components

The only change to these components are:

• Elimination of speed prop, because now it will work with linear values
• Size values (radius, height, and width) are now strings, so you can use any type of measurement unit, but "%" because I use relative positions to make this component and I'm still researching why it doesn't work with "%".

useLinearValue

A new hook!

This hook is almost the same as useDynamicColor, but it takes two numbers (startValue and endValue), instead of arrays of numbers, with this hook you can calculate a number on scroll and use it for animations. You can see an example here

I think that the only limit to this hook is your imagination ;)

Please refer to the docs for more info

PD: I'm really happy with the actual state of the library, 100% sure that I'll keep researching and maintaining it. I think is my best project at the time.

See ya later!

Jalinson "zJaaaal" Diaz

v0.5.1 Documentation tweaks

Small tweaks on documentation for better explanations

v0.5.0 Release

Release v0.5.0

In this version, major changes were made. I'll go one by one.

useProximity

Now useProximity returns 3 properties: "x", "y" and "onSight".

X property

This property is a number that goes from negative innerWidth/2 to positive innerWidth/2. Unless the component is wider than viewport width. In that case it will go from negative width/2 to positive width/2.

So if your component width is 2000, it will go from -1000 to 1000, that means, 0 is when your component is exactly at the center of the viewport in X axis.

Y property

This property is a number that goes from negative innerHeight/2 to positive innerHeight/2. Unless the component is taller than viewport width. In that case it will go from negative height/2 to positive height/2.

So if your component heigth is 2000, it will go from -1000 to 1000, that means, 0 is when your component is exactly at the center of the viewport in Y axis.

For these 2 properties if height/width is less than viewport height/width. It will use the viewport values instead. So, if your component is 200h and 200w and your viewport is 700h x 1200w. The values will be from -350 to 350 for Y and -600 to 600 for X. Where 0 for both values is the center of the viewport.

onSight

This property is a boolean that tells you if the component is on the boundaries of the viewport, if is false, it's outside the viewport and if is true it's inside the viewport. It's that simple.

Render

This component got deleted, because onSight property makes the work that Render component made, so the existence of this component is just unnecessary. So in order to cut sizes I decided to eliminate it and just use it as an example.

useDynamicColor

This hook at first place was planned as a Component. I indeed made the component first, but when I started to use it I realized that it would perform better and would have more case of use if it was a hook. So it's now a hook instead of a component.

It takes an object with 3 properties: startColor, endColor and elementRef to work and returns an string that is an CSS RGB valid color like "rgb(255, 123, 43)"

Please read the documentation for further explanation.

PD

These were the major changes of this version, of course, tweaks and bug fixes were made. I'm still working on more ideas and even working on a page with this library to show better how it works and what you can make with it.

This version looks little, but the creation of useDynamicColor was challenging. That's why it has it's own version.

See ya soon!

Added animations components

In this release you will found two new components: Cicle and Rectangle. Please go to the readme to learn about the usage of this components.

Also I made optimizations to useProximity and useDirection, so go ahead and test this new components!

PD: i'm working right now in a proper implementation for a DynamicBackground, so expect new releases soon!

Small fixes

Render Component

Didn't import React, so throw errors on some projects

Added support to X Axis

React Scroll Utilities

Now the whole library supports the X Axis.

Changes

Render Component

Render Component now looks for the acceptable values for X (between 0 and 3) to render its children.

useProximity

Now useProximity returns an object with the x and y values.

{
   x: //float value,
   y: //float value
}

useDirection

Now useDirection returns also "RIGHT" or "LEFT" if you scroll on X Axis.

So what now?

I'm currently working in some utilities components as a Background that changes with the scroll. I'm aiming to made it highly reusable so you can just add this component and configure it as you want. Also I'm working on Shapes that draw/undraw with the scroll. So, expect new versions with some of this components on Beta Phase soon. See ya later!

PD: You can go to src/test-components to see a bit of how this components works. Those are just tests. I'm still thinking on the best implementation, aiming for the best performance.