Worked on some CSS this weekend for a little animation for my new site at http://rog.ie. Also added a few shadows and extra speshull touches to the logo.
Would LOVE some advice on the animation. Not sure it's quite there.
7 months ago
Looks awesome to me.
so cartoony! Like. Thets knot how yue spel "special"
It is great :)
I love the pop up, but it doesn't have enough hangtime at the top of what would be the arc of motion, make it stay at the largest size for a few more frames.
See how theres more frames at the top of the bounce http://tpeople.co.il/animation/Alex_bounce.jpg. Hope that makes sense.
Like that cartoon style :))
Looks really good so far. You might want to start with a larger image and scale it down so you don't get the blurry effect as much with the overshoot. You might want to throw and anticipation at the beginning also to sell the effect a little more.
WOW! I was like why is my mouse moving by itself lol. I love the animation... it works well with the style of the logo. I have a suggestion about the type. Do you think it would be cool to have a shadow on the r that is the same as the g and e? It might not work but, it could be cool. Either way solid work.
Love the type!
Look like nice man! Great job :)
Nice job man! Also, I noticed you have rog.ie as your url. Is that an Irish domain? I am trying to do the same thing for my new site and am running into a few snags.
First off...looks great. I'm amazed at the animation that CSS can handle nowadays (being a flash guy back in the day). I agree with @Bryan Horsey anticipation is key to a good cartoony bounce. Just have it shrink a bit before going big. Also I don't know much about css transitions but if you can I would have the rollover be quicker to move and have more 'ease' at the end. Transition examples here. I typically like 'easeOutQuart' style animation as it's fast to respond and settles nicely.
Off-topic: How in the name of God did you manage to register that domain?! I had trouble registering my name! And I'm Irish!
@Nick Slater can you show me what you mean? I'm a visual learner.
I would look at either adding a second bounce, or adding in a "central bounce". Meaning: The first bounce brings up the logo, the second bounce only expands the middle, with the edges being locked to the canvas. Not very CSS friendly, but I think its the "look" you might be going for.
@Rogie I think @Nick Slater means that the 'R' should show a little shadow like the 'g' and 'e' both do where they overlap.
Do you have the animation up on codepen? Is it choppy in the browser or is that just an artifact from saving it out?
Actually, I was thinking about it, tried it and I dont think it would fit... so just ignore what I said about adding a shadow. Great work!
@John Williams just an artifact from saving it out. I'll try to get it on codepen soon.
I had to see what @Nick Slater and @Jesse Gardner are talking about http://cl.ly/image/2E212Z1e0W3c
Maybe a bit more bounce when the logo is at it;s largest or "hits the screen?" A bit more elasticity if that makes any sense at all. Love it as is though!
by Drew Matthews
a little bounce past and easing to fun this up a tad. Exaggerating things a bit helps with the playfulness of the logo. AEP/PSD(hack) attached with render ;)
7 months ago
Good job :)
IIIIIIIIIIITTTTTTTTTTTTTSSSSSSSSSSSSS ROGIE! This could so be a cartoon <3
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter