

Show HN: cta.js – Animate your 'action-to-effect' paths - chinchang
http://kushagragour.in/lab/ctajs/

======
mcherm
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
The library works in all major browsers now. Thanks for the feedback.

------
joshcrowder
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
That is the first thing on my priority list. Will be coming soon.

~~~
Excavator
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
Fixed for firefox now. Using computed style's `backgroundColor` key.

~~~
Excavator
Splendid! Nicely done. :-)

------
softdev12
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.

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

~~~
chinchang
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.

------
cheriot
> 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!

------
neilellis
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!

------
thebouv
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
Cross browser is on top of list. Would really appreciate any contribution.

~~~
chinchang
Latest Chrome, FF and Safari are now supported.

