tictail / bounce.js Goto Github PK

Reported by https://twitter.com/ThiRaBr_TNK/status/476287253640396800. A quick fix would be to encode the URL, but a nicer solution would probably be to fetch a short URL when the CSS is exported.

Is there a way to pause an animation?

I am often using your tool to create "open" and "close" animations. I love the ease of use by the way. But it would be great to use your online editor to get the "open" animation just the way I want it, and then be able to push a button or something and generate the reverse "close" animation, which would be the exact same, but in the opposite direction. Do you think that would be possible?

As far as I can tell it currently only supports fixed pixel values, is it possible to allow percentages as well?

The general idea is to allow something like this:

$elements = $('#foo') # assume <div> element with width and height equal to 100px

animation = new Bounce()

animation.translate(
  from: { x: 0, y: 0 },
  to: { x: 0, y: '100%' }, # Translate up 100% (at time of evaluation, 100px)
  easing: 'bounce',
  duration: 1500,
  delay: 0,
  bounces: 2,
  stiffness: 5
).translate(
  from: { x: 0, y: 0 },
  to: { x: '100%', y: 0 }, # Translate right 100% (at time of evaluation, 100px)
  easing: 'bounce',
  duration: 1500,
  delay: 0,
  bounces: 2,
  stiffness: 5
)

animation.applyTo($elements)

The reason is that it makes bounce animations much more dynamic with respect to either the current DOM properties of the applied elements (and could be even more flexible if we could interpolate with the current values established by previous components in the chain).

EDIT: After further thought and inspection, I'm wondering - is this even possible with the usage of matrices?

Let me know. Thanks, cheers.

If you compare the support tables on caniuse.com, no browser has ever unprefixed keyframes before transforms. For more complex animations, this needlessly bloats the code by a significant amount.

Great project! To make copying and pasting the exported css easier, it would be nice to add a field to set the animation name so you don't have to change that in your code every time. Also omit the .animation-target {} rule from the output and put that in some documentation instead. This would make the workflow super efficient. Thanks again, great job.

Can you please write some documentation (How to use).

Hi Joel, I've just read your article on Medium and I was thinking it would be nice to be able to visualise the animation curves (original and approximate) in Bounce.js :) What do you think?

Hi, thanks for creating great tool. Is it possible to add multiple animation into one page? I tried to create two different classes, but its only applying the last animation style.

Thanks

Is it possible to add opacity support? It is useful in animations (without bounce) :)

domain seems abandoned

When a div is animated using Swoosh animation (example) , the text inside the div is getting blur and during the animation and getting set properly after the animation.

Fiddle example

thoughts?

Is it possible to have starting points for the animations? for example, if I'm using the "jelly" preset, the animated elements animation starts at coordinates center center. Can I change them to start top left for example. x:0 and y:0?

Very nice tool, but many animations gets quite a lot of CSS-code for most of the presets. A "simplify" button would be nice, so the code maybe do the animation in fever steps and therefore saves some kb. Maybe a slider, so the user can find the perfect point between smooth animation and an acceptable number of CSS-lines.

Hi, it is difficult for me to locate the files required to use Bounce. I want to know how large the files are, and how to include it in the browser using script and link tags.

If you can make it a little more straightforward that would be nice.

Thanks.

Is there any scope in this project for 3D transforms?

Hey! Great project!
Im new to GitHub so I hope this is the correct place to post this. Love the webapp but Bounce.js is so crunk. Again, props bro.

I was experimenting with saving multiple instances of Bounce & then reapplying them to other elements. The object automatically gets renamed because in "Bounce.prototype.applyTo" the "this.define()" is passed without a name, so if you did have a name it gets ignored/reset.

I was kind of wondering if there was a reason behind this? Thanks.

Bounce.prototype.define = function(name) {
    this.name = name || Bounce.generateName();
    this.styleElement = document.createElement("style");
    this.styleElement.innerHTML = this.getKeyframeCSS({
      name: this.name,
      prefix: true
    });
    document.body.appendChild(this.styleElement);
    return this;
  };

  Bounce.prototype.applyTo = function(elements, options) {
    var css, deferred, element, prefix, prefixes, _i, _j, _len, _len1, _ref;
    if (options == null) {
      options = {};
    }
    this.define();
    if (!elements.length) {
      elements = [elements];
    }
    prefixes = this.getPrefixes();
    deferred = null;
...