mikkoh / fancyeffects Goto Github PK

Because the Adobe CSS Filters can be "anything" it would be good to write just a general parser to parse out css properties.

Obviously it would be good to use standard data types such as rgb[a], matrix, etc.

Read in CSS Animation properties and initialize and setup effects from those.

Create effects based on the properties set for: "transition-property"
Get the duration of an animation from: "transition-duration"
Get ease function from: "transition-timing-function"

Basically what I was thinking was to be able to do something along these lines:

var moveSE = new Effect();
moveSE.add(new EffectBottom(400));
moveSE.add(new EffectLeft(400));

var fadeOut = new Effect();
fadeOut.add(new EffectOpacity(1, 0)); //force 1.0 to 0.0

var fadeIn = new Effect();
fadeIn.add(new EffectOpacity(0, 1)); //force 0.0 to 1.0

var start = new Effect();
start.add(moveSE, 0, 100); //goes from 0 to 100%
start.add(fadeOut, 0, 50); //goes from 0 to 50%
start.add(fadeIn, 50, 100); //goes from 50% to 100%

var end = new Effect();
end.add(new Effect(Width(500)));

var combined = new Effect();
combined.add(start, 0, 75);
combined.add(end, 75, 100);

combined.applyTo($(".box1, .box2")); //effect affects both elements .box1 and .box2

So combined what occurs is this:

0-37.5% - fade out
37.5%-75% - fade in
0-75% - moves south east
75%-100% - width expands to 50%

When combined's percentage is changed it affects both the .box1 and box2 elements.

Since effects are relative to the original width. If a div's position is set to relative it's still in the box model and will get page width as it's start width if width is not defined.

Right off the bat the width of the div should be subtracted from the change amount.

Change the start values of the ItemProperties.

Effects should be changed accordingly. For instance if an effect didn't set a start value off the bet it was expecting that it's start value will be inherited from the object it's effecting. Since this is the case it should get the new updated start value.

Also. If the start value changes all of the effects should be reapplied.

This is a LONG term goal.

It would be neat for a designer to go in and create "effects".

It would also be neat to be able to preview what that animation/effect would look like without certain effects. EG no filter effects because the browser doesn't support it.

These should be "effects" that get added to effects to change the value which used use to update effects.

So let's say we have an "effect effector" that will apply BouncEase we'd add it as an effect to an effect and it would do it's thing.

Here's a cheat sheet of easing equations:
http://easings.net/

Furthermore it would be interesting to for instance add a "randomizer" that randomizes more at 0 and not at all at 1. Or an "oscillator" that uses a SINE curve for instance to oscillate the value more at 0 and not at all at 1.

There needs to be an effects timeline so you can sequence effects.

This should still be percentage based also.

For example:
EffectLeft should effect from 0-0.25
EffectTop should effect from 0.15-0.6
EffectWidth should effect from 0-1.

You can apply multiple box shadows to one object.

eg: box-shadow: 0 0 10px 5px black, 40px -30px lime; //two box shadows

Right now we can change values only if there is one box shadow.

eg: box-shadow: 0 0 10px 5px black;

This should be the first part of the ID. It should be used to cross reference for instance if an effect can be used on a specific browser. Eg WebKit filter only for safari and chrome.

This could also be used to look up whether an effectEffect can be built to css animation

Since CSS Animations are said to have better performance there should be a function to build an effect to a CSS Animation.

Right now you cannot control animations to frame by frame but rather you can just play and stop and listen for end events so it should be expected that you cannot have the same level of functionality for the CSS animation when its built.

It maybe good to have a Class that is a CSS Animation builder function since this maybe a feature that becomes deprecated as browser performance becomes better.

This will allow developers to go in and grab effects from effects easier after-the-fact.

This way if you want to add a new effect to a timeline inside a timeline you can.

Parse out "advanced" css properties like filter.

Implement destroying effects. This destroy function should take a boolean whether CSS properties should be reset back to the original state.

Parse out "advanced" css properties like transform.

There are many css properties that just have a string as their value.

EG. Position: static, fixed, absolute, relative, inherit.

Think of a way to handle these.

For instance let's say the item originally was using relative. Then an effect sets it to absolute. Another effect comes and sets it to absolute again.

Perhaps there should be a counter for how many times it's been set to absolute.

What should happen if one effect sets it to relative and another sets it to absolute.

Add in a function to animate percentages.

This should be independent of frame rate like Tweening engines.

Perhaps it would be good to be able to define somehow what engine is used to do this animation.

Apply and setup effects from html5 data attributes.

http://www.remvst.com/article-15-setters-getters-for-internet-explorer-9.html