Page transition animation?

[zozo]

How is it possible to make page transition animation? (Just as example with turbolinks: http://www.xtagon.com/music)

To make it possible I need some way to override code that changes html in $target. Is it possible?

Thanks

[igor-alexandrov]

Hmmm, good question.
Can you give me a code, how it is done with Turbolinks?

[zozo]

Actually, I didn't worked with turbolinks :)

But I found example here: http://paweljaniak.co.za/2013/05/15/Rails-4-turbolinks-and-wiselinks/

$(document).on 'page:fetch', ->
  $('#content').fadeOut 'slow'

$(document).on 'page:restore', ->
  $('#content').fadeIn 'slow'

Seems like this is usable also for wiselinks if would be possible to override the way wiselinks changes html of $target. I think it's somewhere here (lib / assets / javascripts / _request_manager.js.coffee:80):

$target.html(response.content()).promise().done(

[igor-alexandrov]

Wiselinks have similar events page:loading and page:done. You can try to use them.

[Appwerks]

To make the animated page transition, you can use the following code as starting point

window.wiselinks = new Wiselinks($('#your-target-container'))

$(document).off('page:loading').on('page:loading', function(event) {
    $('#your-target-container').hide()
    // This is your starting animation
});

$(document).off('page:always').on('page:always', function(event) {
    $('#your-target-container').fadeIn('normal')
    // This is your ending animation
});

The above code will hide the loaded contents of the target container and then fade in the contents of the linked page. You can adjust the jQuery effects as needed for your site or applications. For even smoother transitions, you can attach CSS3 animations (via addClass() method) to your target container.

[benbonnet]

@Appwerks what if it loads too fast ?

[pjldesign]

what if the target container is 'body'?