Added transitions to pages

Wolfr / clank

Clank: open source prototyping framework for mobile apps

http://getclank.com/

Other

890 stars 81 forks source link

Added transitions to pages #89

Closed aklatzke closed 10 years ago

aklatzke commented 11 years ago

You can now transition between page fragments.

Page fragments are auto-loaded based on their URL - I added two sample pages and an "indexcontent.html" file that mirrors index.html. This allows the header to remain static when transitioning pages. Works by jumping in the way of any "a" click. Can be fleshed out but proves a POC for the prototyping.

You can adjust the transitions with "data-exit" and "data-enter." These work with: http://daneden.me/animate/

You can use any of his exit or entrance animations in order to transition between pages. I have it set to bounce in and out.

Wolfr commented 11 years ago

Thanks for the work.

This is a great start for me. Maybe me should start an page-animations branch on the Clank project? Please let me know if you'd like to work on this with me.

Here's my feedback:

You can't go to an external link e.g. http://www.google.com anymore
It only works by manually setting the content changes in the JS (it is dependant on the filenames index.html and indexContent.html - do you have ideas about how to make this more generic?

aklatzke commented 11 years ago

I can certainly flesh it out more.

As for your bullet points:

I will push up a fix for this this evening (time permitting)
That's actually false - the target is set on the link itself. If you look at index.html ( or indexcontent.html ) you'll see that it's pointing to static/pg2.html which isn't defined anywhere in the JS, and static/pg2.html points to pg3.html. The reason index is defined in the JS is so that we can load the page fragment (indexcontent.html) without reloading the head and header of the index file again (which would lead to more requests and double nav bars in this instance). As of now, it will load any static content you throw it as long as you supply the correct path in the href property.

aklatzke commented 11 years ago

Just added another commit that resolves the external linking issue.

Wolfr commented 11 years ago

OK this is now a new branch under Clank: https://github.com/Wolfr/clank/tree/aklatzke-page-transitions

I like where this is going. But I noticed you put the anims on the page itself. Would it be possible to put the trigger on components in the page itself? E.g. one element on the page might trigger a slide up and another element a left bounce.

I'm probably going to replace animate.css with a set of animations that mimic the different design patterns in iOS/Android

aklatzke commented 11 years ago

Shouldn't be too difficult to add that.

Feel free to replace the animations. Can you add them into specific classes similar to how it's done in the current animation file? That makes appending the animation through JS super simple.

Wolfr commented 11 years ago

Yeah that seems like the way to go, will do.

On Mon, Aug 26, 2013 at 5:39 PM, aklatzke notifications@github.com wrote:

Shouldn't be too difficult to add that.

Feel free to replace the animations. Can you add them into specific classes similar to how it's done in the current animation file? That makes appending the animation through JS super simple.

— Reply to this email directly or view it on GitHubhttps://github.com/Wolfr/clank/pull/89#issuecomment-23271877 .

Wolfr commented 10 years ago

I am working with a developer to make this happen in a clean way.