css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Second encounter on flat amusement park by Lina for Zajno - now flat horse ride carousel and my attempt to animate it with CSS.

https://dribbble.com/shots/2784169-Flat-Carousel-Design-Animated-with-CSS3

https://dribbble.com/zajno

Comments

  1. This is great! Well done! What tech stack did you actually use for this? Can you please explain a little of your process. Cheers

  2. @tilite of course! No problem.

    There are some little tricks I've been using with svg every time. First of all - you need proper .ai file (or any vector format with layers that can be saved as svg; though I prefer .ai). Then you need to decide which elements will be animated and how.

    Sometimes you need only a little animation inside SVG - so you only have to name layers and groups properly so you don't have to look up for them in bunch of raw svg code.

    But another times, like this one right here - you have to build your own illustration - so I sliced .ai file into layers AND artboards, then exported artboards (this is critical right here) to svg. This matters because when you press 'use artboards' in 'export menu' svg exports WITH artboard, so you always have proportions and size of original image. Every slice that you see here is on transparent background with 4:3 proportions - you can see it if you look at svg in any editor.

    As for css - this is actually pretty easy - I used 'preserve 3d' for every 3d layer, 'transform-3d' to place them properly in depth so I don't have to deal with z-indexes, 'perspective: 0px;' so we have this fully 'flat' style. Then I built a cylinder out of css blocks - positioned them, placed thin poles as background-image and horse images as inside blocks. That is almost all - I used margins to animate horses, Y-transform to animate cylinder and moving background-image to animate striped pole. Hope this helps! :)

  3. Thank you for explanation, your artwork is beautiful!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...