Hello, Adir-SL, I hope this Pull Request finds you well 😄

I recently came across your module here, and thought it was really cool! However, it wasn't working with my project, as I wanted to use it on elements that had various opacity levels. Thus, I have solved the problem by adding optional functionality for setting the maximum opacity used by the fadejs rendering.

Problem:

Currently, when using the "fadejs" rendering, if the target element also has a stylesheet class that sets it's opacity below 100%, the fadejs rendering will make the element appear as if it were set to 100%.

Solution:

I Added logic that can extract a custom html tag attribute, "fadejs-data", that a page can use to define an element's maximum opacity. Then, the algorithm in place will allow the cascaded fadejs rendered element's opacity to match the intended opacity for the element, while still having the same effect, to scale.

The algorithm used is a branching algorithm containing several polynomials generated via Lagrange Interpolation after taking precise measurements by the thousandth decimal place for the "correct value", after using a baseline formula for all 4 rendered fadejs elements: [f(x) = x / 1.805555555, f2(x) = .75f(x), f3(x) = .5f(x), f4(x) = .25f(x)].

Usage:

The attribute is added to a tag like so (a leading 0 is required, but the semicolon and space is not):

<div id="someDivElement" class="fadejs someOtherStyle" fadejs-data="opacity: 0.65;"/>

It uses a value of 1 by default (if the attribute is missing from the tag or the value exceeds 1), which will emulate the same behavior as fadejs currently has (making this feature optional and non-breaking).

Impact:

I have not benchmarked performance at all. I would imagine it's very minimal. I used a branching algorithm to make this calculation as efficient as possible. Obviously this increases the file size of the *.js file quite a bit, relatively.. Perhaps a minified *.js could be provided to negate the impact in terms of file-size.

A Note on Opacity Animations:

One other important thing to note: When the fadejs class is used, even with a maximum opacity set, any CSS "from-to" keyframe animations involving setting the opacity will still not work as intended, and will have a severe flicker effect. However, a working solution is to do something like this:

Assume that 0.65 is my intended opacity. First, I get the "maximum" opacity of the animation as 0.1875. I get this using this formula: y = (x + 0.1) / 4. Next, you set the animation to cap out at 25%. Then, you increase the speed of your animation using the formula: y = 12x . So, in this instance, I initially wanted the animation to fade from 0 - .65 opacity in .5s. Using the following combination of keyframe animations will accomplish this, with the Fadejs effect on the transform animation!!

.myAnimationClass {
	visibility: hidden;

	transition: all 0.5s ease !important;
	animation:  0.5s ease 0.25s 1 slideIn, 6s 0s 1 fadeIn;
	animation-fill-mode: forwards;
}

@keyframes slideIn {
	from { transform: translateX(250px); }
	to { transform: translateX(0); }
}

@keyframes fadeIn {
	0% {
	  opacity: 0;
	  visibility: visible;
	}
	25% {
	  opacity: 0.1875;
	}
	100% {
	  visibility: visible;
	}
}

Voilà!