Show HN: cta.js – Animate your 'action-to-effect' paths | Hacker News Reader

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

kushagragour.in

32 pointschinchang15 comments

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.

The library works in all major browsers now. Thanks for the feedback.

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

That is the first thing on my priority list. Will be coming soon.

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/

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

If so, the fix would be to use the actual attributes rather than the composite attribute.

Fixed for firefox now. Using computed style's `backgroundColor` key.

Splendid! Nicely done. :-)

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.

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

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.

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

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!

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.

Cross browser is on top of list. Would really appreciate any contribution.

Latest Chrome, FF and Safari are now supported.

Reply on news.ycombinator.com