Development Method

LeakySandwich
LeakySandwich
Hi All,

I have a quick question about development. I have been seeing more and more complicated animation and interaction in websites recently but I am not sure what is used to build them to keep them so quick, while also being responsive. For example:

1*hN3nEa-vtqotXdqO5GxJww.gif

or

1*SB-dVMdOnHALOz2Z5Oj6Dw.gif

How would you achieve these effects and also keep the site entirely responsive? I can see how it could be done with Javascript and CSS3 transitions but that would be very time consuming and require a lot of code to do even some of the simplest parts. I am curious as to how anyone else would approach it.

I am working on a portfolio site and I could do with adding some nice movement to it.

Thanks!

Comments

  • David
    David
    Keeping Tom Happy Posts: 12,932
    Those are animations leaky, do you have any examples of live sites?
  • LeakySandwich
    LeakySandwich
    Yeah, I think Hello Monday's homepage is the best example of what I am interested in achieving.

    http://hellomonday.com/

    I can see how individual components could be done - Parallax of the screen with http://matthew.wagerfield.com/parallax/, scroll jacking with one of the million scripts available etc.

    But it is all so coordinated that it feels like there should be something to tie it all together. The transition from homepage to project page is so fast and fluid. It is tough to explain and is probably just a symptom of my lack of knowledge.

  • calder12
    calder12
    Senior Member Posts: 13,422
    Can't find that particular animation on Heap, but their main page is using video, and I'd assume given who they are they're running their site on pretty powerful servers with serious bandwidth.

    Also there are some CSS animations that are pretty cheap, this is an older article but the cost of these animations shouldn't have changed any http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

    Everything above could be achieved in CSS I think, and without much of a performance hit.
  • LeakySandwich
    LeakySandwich
    Cheers Calder, I thought that may be the case - I am looking for shortcuts when really I should just knuckle down and get on with it. Useful article that though, I learned a few things there.
  • David
    David
    Keeping Tom Happy Posts: 12,932
    To my knowledge (and I've looked) there's way to do this sort of thing using software, you have to code it all and deal with all the gotchas and memory issues as you go along. That hello Monday site is using greensock, which is a decent place to start and the syntax to do a of the simple move in left / right etc is pretty simple.

    They are loading content in using an ajax method but also using some sort of history push state to keep the browser tabs working

    I wouldn't underestimate the development time that would take it would probably be in factors of 10 more than a static version
  • LeakySandwich
    LeakySandwich
    Thanks David, that is what I thought. I have spent a week or so casually looking into it and come across greensock repeatedly so I will be having a good look at that first.

    Thanks again! Hopefully in a few years I will have a portfolio for you to all critique...
  • David
    David
    Keeping Tom Happy Posts: 12,932
    velocity.js is also pretty good, but it's best to choose one per project instead of loading a load of different libraries in
  • top_buzz
    top_buzz
    For your health! Posts: 6,741
    It's all about Greensock baby!
  • calder12
    calder12
    Senior Member Posts: 13,422
    ^^ this is the man to ask!
Sign In or Register to comment.
© Copyright 2003 - 2016 - DT by Kooc Media / Kooc Market
Web Hosting by Inmotion