5 ms·

Show HN: cta.js – Animate your 'action-to-effect' paths

32 points by chinchang 12y ago

joshcrowder 12y ago
I like the effects but the fact it only works with Chrome is a no-go for me. I don't see it being be too difficult to get this working in safari, firefox or modern IE..
- chinchang 12y ago
  That is the first thing on my priority list. Will be coming soon.
  - Excavator 12y ago
    I'm curious, what is it that makes it Chrome only? Looks like only CSS transition and animation is special cased for WebKit but that's been unprefixed in Firefox since years back. https://hacks.mozilla.org/2012/07/aurora-16-is-out/ https://hacks.mozilla.org/2012/07/aurora-16-is-out/ Edit: Seems like getComputedStyle is buggy in Firefox? « window.getComputedStyle($0).background » "" « window.getComputedStyle($0).backgroundColor » "rgb(74, 144, 226)" « window.getComputedStyle($0).backgroundImage » "none" $0 is the currently inspected element, in this case: .js-modal-2 Edit2: Possibly "works as intended"?: > getPropertyCSSValue is required to return null for these, and we implement getPropertyValue in terms of getPropertyCSSValue. https://bugzilla.mozilla.org/show_bug.cgi?id=889091 https://bugzilla.mozilla.org/show_bug.cgi?id=889091 If so, the fix would be to use the actual attributes rather than the composite attribute.
    - chinchang 12y ago
      Fixed for firefox now. Using computed style's `backgroundColor` key.
      - Excavator 12y ago
        Splendid! Nicely done. :-)
cheriot 12y ago
> Carefully choreographed motion design can effectively guide the user’s attention and focus through multiple steps of a process or procedure, avoid confusion when layouts change or elements are rearranged, and improve the overall beauty of the experience. I could not agree more!
dimlyaware 12y ago
This is really amazing JS Library. I like how on click the new element grows from the button clicked. It really shows a great UI Interface. I hope to see it expanded out to more browsers and then I can really see this implemented into my future designs.
softdev12 12y ago
This looks nice. It seems to have much of the same functionality as jquery coupled with jquery-ui, right? Or am I missing something? I've used jquery to do all sorts of slide animations and it's cross browser (which may help you with the Chrome only issue - if you decide to port as a jquery plugin). I do really like the sidebar pop-out. I've never seen that in jquery before - or perhaps missed it in the docs. Good job.
thebouv 12y ago
Chrome only makes it hard to use, but I've starred it and if I can somehow squeeze in time, I'd love to fork the project and see if I can help bring it to other browsers.
- chinchang 12y ago
  Cross browser is on top of list. Would really appreciate any contribution.
  - chinchang 12y ago
    Latest Chrome, FF and Safari are now supported.
neilellis 12y ago
Great, yep that's what we need. I prefer to use animation only to guide the user - not for 'oooh-ahhh' Flash-esque nonsense. So a library geared towards just that would save so much time. Well done - and thank you, looking forward to cross browser version!
jasonlfunk 12y ago
It seems a little ironic that the main call to action on the website ("Get Started") doesn't seem to use the library.
- chinchang 12y ago
  I know, I was to implement a modal on the 'getting started' button. But in the end had to do without it for time reasons. But I would still like to have it soon.
mcherm 12y ago
I tried this and found it to be incredibly poor. Then I discovered by reading the comments that this is because it doesn't work correctly in my browser. Normally, I would advise you to prominently display information about where it works... except that in today's world, not being cross-browser makes a library like this essentially useless. Instead, I would suggest not bothering to publicize this until you have it working in all major browsers.
- chinchang 12y ago
  The library works in all major browsers now. Thanks for the feedback.

32 points by chinchang 12y ago

I like the effects but the fact it only works with Chrome is a no-go for me. I don't see it being be too difficult to get this working in safari, firefox or modern IE..

chinchang 12y ago
That is the first thing on my priority list. Will be coming soon.
- Excavator 12y ago
  I'm curious, what is it that makes it Chrome only? Looks like only CSS transition and animation is special cased for WebKit but that's been unprefixed in Firefox since years back. https://hacks.mozilla.org/2012/07/aurora-16-is-out/ https://hacks.mozilla.org/2012/07/aurora-16-is-out/ Edit: Seems like getComputedStyle is buggy in Firefox? « window.getComputedStyle($0).background » "" « window.getComputedStyle($0).backgroundColor » "rgb(74, 144, 226)" « window.getComputedStyle($0).backgroundImage » "none" $0 is the currently inspected element, in this case: .js-modal-2 Edit2: Possibly "works as intended"?: > getPropertyCSSValue is required to return null for these, and we implement getPropertyValue in terms of getPropertyCSSValue. https://bugzilla.mozilla.org/show_bug.cgi?id=889091 https://bugzilla.mozilla.org/show_bug.cgi?id=889091 If so, the fix would be to use the actual attributes rather than the composite attribute.
  - chinchang 12y ago
    Fixed for firefox now. Using computed style's `backgroundColor` key.
    - Excavator 12y ago
      Splendid! Nicely done. :-)

cheriot 12y ago

> Carefully choreographed motion design can effectively guide the user’s attention and focus through multiple steps of a process or procedure, avoid confusion when layouts change or elements are rearranged, and improve the overall beauty of the experience. I could not agree more!

dimlyaware 12y ago

This is really amazing JS Library. I like how on click the new element grows from the button clicked. It really shows a great UI Interface. I hope to see it expanded out to more browsers and then I can really see this implemented into my future designs.

softdev12 12y ago

This looks nice. It seems to have much of the same functionality as jquery coupled with jquery-ui, right? Or am I missing something? I've used jquery to do all sorts of slide animations and it's cross browser (which may help you with the Chrome only issue - if you decide to port as a jquery plugin). I do really like the sidebar pop-out. I've never seen that in jquery before - or perhaps missed it in the docs. Good job.

thebouv 12y ago

Chrome only makes it hard to use, but I've starred it and if I can somehow squeeze in time, I'd love to fork the project and see if I can help bring it to other browsers.

chinchang 12y ago
Cross browser is on top of list. Would really appreciate any contribution.
- chinchang 12y ago
  Latest Chrome, FF and Safari are now supported.

neilellis 12y ago

Great, yep that's what we need. I prefer to use animation only to guide the user - not for 'oooh-ahhh' Flash-esque nonsense. So a library geared towards just that would save so much time. Well done - and thank you, looking forward to cross browser version!

jasonlfunk 12y ago

It seems a little ironic that the main call to action on the website ("Get Started") doesn't seem to use the library.

chinchang 12y ago
I know, I was to implement a modal on the 'getting started' button. But in the end had to do without it for time reasons. But I would still like to have it soon.

mcherm 12y ago

I tried this and found it to be incredibly poor. Then I discovered by reading the comments that this is because it doesn't work correctly in my browser. Normally, I would advise you to prominently display information about where it works... except that in today's world, not being cross-browser makes a library like this essentially useless. Instead, I would suggest not bothering to publicize this until you have it working in all major browsers.

chinchang 12y ago
The library works in all major browsers now. Thanks for the feedback.