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

by chinchang • 11 years ago

32 15 11 years 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..

chinchang6• 11 years ago

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

Excavator2• 11 years 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/

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.

cheriot• 11 years 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!

softdev12• 11 years 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• 11 years 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.

chinchang6• 11 years ago

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

chinchang6• 11 years ago

Latest Chrome, FF and Safari are now supported.

neilellis• 11 years 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• 11 years ago

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

chinchang6• 11 years 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• 11 years 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.

chinchang6• 11 years ago

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

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

Related Stories