Animation Home [Gif]

Animation_home

1 Attachment

24 Responses

  1. Brent Caswell Brent Caswell

    How are you making these?

    likes

    10 months ago

  2. Andrew Galipeault Andrew Galipeault

    @Brent Caswell I believe the way he is animating this splendid design is using Photoshop CS6 animate feature I am not absolutely sure as i am not the one to design this but that is one way to animate.

    And Jordi amazing design love the look of it!! Everything flows naturally.

    10 months ago

  3. Matthew Smith Matthew Smith

    @Andrew Galipeault @Brent Caswell In his last shot he said he uses After Effects to animate these.

    10 months ago

  4. Jordi Verdu Jordi Verdu

    After Effects (it's even on the tags ;P).

    Added a full size preview,

    10 months ago

  5. Autumn Hutchins Autumn Hutchins

    This is fantastic!

    10 months ago

  6. Brent Caswell Brent Caswell

    @Jordi Verdu Oh whoops, I missed it. Thanks! They're really cool!

    10 months ago

  7. Alex S. Lakas Alex S. Lakas

    @Jordi Verdu Godamnit I love these animations so much. Please post a video tutorial. Please. For the love of god.

    10 months ago

  8. Wayne Spiegel Wayne Spiegel

    Looks awesome and playful. I agree with @Alex S. Lakas A tutorial is a must!

    likes

    10 months ago

  9. Brandon Jacoby Brandon Jacoby

    Awesome animations!

    10 months ago

  10. Barry Mccalvey Barry Mccalvey

    Awesome work!

    10 months ago

  11. Jordan Flaig Jordan Flaig

    omg...

    10 months ago

  12. Paul Morel Paul Morel

    I have to learn some basics of motion design, cause this is way too cool.

    10 months ago

  13. Alan Houser Alan Houser

    @Jordi Verdu great work! I'm wondering about the benefits of using animated gif instead of CSS/jquery. I know the CSS animations will only work in "modern" browsers, but gif images can get huge in comparison. 600kb is pretty big just to wait for things to move. @Paul Morel I also want to learn more about motion design *today* since FLASH MX was the last time I seriously played with it. :) And I stopped doing animated gifs in Fireworks soon-after.

    10 months ago

  14. Jordi Verdu Jordi Verdu

    @Alan Houser I really can't answer that question since I don't have any experience animating with CSS/Jquery. As a really curious and self-taught person, I always need a playground where I can mess around, tweak things and learn from my own mistakes. I always found css extremely frustrating for my own learning methodology, so I guess After Effects made more sense to me since I can always experiment and analyze the results. Even if I had to pick between Quartz Composer and CSS, I think I'll choose the former. (actually I really enjoy QC, looks like an old Ms-20)

    Anyway, I still find frustrating that all this work is mostly for showcasing purposes, since it can't easily be turned into code. Marcus Eckert did an amazing job with Wide Sky, creating a custom framework to put all his AE animations into the menus and UI, so the possibility to easily turn .aep to tapable animations is somewhere there. If I could invest some time and money in a single project, that would be it. As far as I know, there's still this huge gap between what you can create in Motion Graphics with After Effects and what can actually be implemented. I can't believe anyone at Adobe hasn't figure out this yet.

    @Alex S. Lakas Regarding the tutorial, check Mattrunks tutorial for animating vector shapes. I pretty much used the same technique, although changin the displacement for rotation. Ease and Wizz also comes handy, but a lot of this is just manual graph editing.

    likes

    10 months ago

  15. Alan Houser Alan Houser

    @Jordi Verdu Agreed, and thanks for the reply! It's a conversation that the design world needs again I think. Animated gifs have made a comeback for sure, even if mostly novelty. I've also worked a little in AE, but mostly in the Video world— where I needed to animate an opener/illustration/title, etc.

    I'm pretty sure that Adobe Edge wants to be what we're talking about - the HTML5 solution for what they typically pushed us to do in Flash. But they really really still want us to convert original video content to a web-ready FLV file, or I guess I should say, that's the easiest 'Adobe' way. But there's no way I'm ever going that direction ever again.

    It comes-down to the fact that there's some really amazing things that are being done in CSS/jQuery, but if the world can't see them on their turd-like browser, then we're no better off. So for me, I focus on making static things work 100%, then add some animation/effects for the cool people just because.

    But if the animation is key to the interaction (app demos are a great example), then I'm with you— animated gifs will work fo-sho.

    10 months ago

  16. Luboš Volkov Luboš Volkov

    Interesting color theme and smooth animation! You have my support on this!

    10 months ago

  17. Jordi Verdu Jordi Verdu

    @Alan Houser I tried a couple of times Adobe Edge but the results weren't fulfilling.

    I really think animation go hand on hand with mobile UI. Just compare this animation to my previous one and you can see that just with the way things bend, fade or move it communicates something completely different. I spent quite a while figuring out the best way to communicate Playfulness with the way the labels are revealed... I made it bounce and it was too much, I made it fade in and it was too serious... and I bear in mind that they are dynamic elements and I don't want my programmer to go nuts trying to figure out how to achieve it, but if we could have total freedom to create a .aep not caring about the limitations that conversion impose, apps would be a much more immersive experience.
    Just see Mr. Div work and imagine that on your hands, morphing as you touch...

    likes

    9 months ago

  18. Alan Houser Alan Houser

    Love this conversation. I totally agree.
    Also shocking: the amount of time it takes to emulate the interaction to be pixel-perfect, and the dev/process that will be used to make things dance is completely different. And to make things worse, getting the dev to understand the importance of the tiny little gesture/animation/pause/color-shift/ripple/bounce aaaahhhhhhhh! :)

    9 months ago

  19. Alex Pronsky Alex Pronsky

    Cool!

    9 months ago

  20. Budi Tanrim Budi Tanrim

    playful! great work

    9 months ago

  21. Andrés Guerrero Andrés Guerrero

    Que bien trabajas Jordi.
    Te sigo, a ver si puedo aprender algo de esta rama.

    likes

    9 months ago

  22. Michael Oh Michael Oh

    @Alan Houser it really depends on the context. CSS animation/transition is great for smaller file size, not increasing HTTP request (image download) and such, but as you pointed out compatibility is a huge issue. Also, for some mobile devices, it tends to crash because it requires too much processing, which is devastating for web apps, in which case animated GIFs are relatively "safer". Also with faster internet speed, it is a bit more forgiving to have slightly larger GIF files to achieve the effect you want (I can hear the uproar already haha). It really is about figuring out who your audience is, which device they use mostly and on which platform your product will live.

    @Jordi Verdu completely agree. Animations are becoming ever more important in mobile UI with the increasing attention to UX, faster connectivity and also ios7's heavy focus on them. As UI/UX designers I think it's very important to code or at least know how to come up with prototypes because interaction is all about the feedbacks and that doesn't really show through with static images. Also with animations and transitions, if you know how to code, you can do the final tweak on top of engineers' code before you ship it. I really think design schools should encourage students to learn how to code more.

    likes

    4 months ago

  23. Alan Houser Alan Houser

    *I really think design schools should encourage students to learn how to code more. DEFINITELY.
    And companies should encourage designers on dev teams to code more too.

    4 months ago

  24. Melissa Samworth Melissa Samworth

    You are a god. This is incredible.

    26 days ago

keyboard shortcuts: previous shot next shot L or F like