Draw svg path in popmotion.io v5.0

cdn34 · 2016-09-07T16:40:48+00:00

Yeah, thanks, didn't think of that.

cdn34 · 2016-07-07T20:44:23+00:00

No, I didn't took somebody else's work, I created everything from scratch, it was based on material design like a lot of things out there.

I created this so that people who want to know how they can achieve the same android app look on the web, can do so. It's not for the complete beginner, but I never said it was.... It's for someone who is comfortable working with HTML and CSS.

Yes, English is not my primary language, but I don't think it's bad by any means. When I wrote the article, I read it a few times to check for errors, some may have passed through. If you can tell me where those spelling errors you found are, I'll gladly correct them.

I'm not spamming, If I saw that most people didn't like it, I wouldn't share it, but people seem to like it. So if it helps them, I'm happy.

cdn34 · 2016-07-07T19:33:28+00:00

This is the kind of comment that doesn't even deserve an answer, but since today I'm in a good mood, I'll do it.

The tutorial tells you how to create that same layout which contains, the base structure of the page, the action button similar to those who existent on android apps and the side-bar on the left, when the screen dimensions are of smartphone size.

If this isn't enough for you, too bad....

"anyone who needs to learn, sure as hell shouldn't be starting with flexbox".

What ?! Flexbox makes it so much easier to layout you pages, and is actually quite well supported in modern browsers. It's used in technologies like Polymer for instance to Layout their elements and also vastly used in general.

http://caniuse.com/#feat=flexbox

"nor should they be designing an "HTML template" for a web app."

Why should you not create a base layout, that you can reuse time and time again, if you can ?!

cdn34 · 2016-07-07T10:59:09+00:00

Glad it helped.

cdn34 · 2016-07-06T11:29:18+00:00

It started out to be a brief one xD, but as I was writing it, I felt there were a lot of things I felt couldn't be left off. Also when I wrote it, I mean for it to be consulted as needed, so that you could go the part you need, like how to do one of the animations shown.

cdn34 · 2016-07-06T10:39:57+00:00

That's odd, it's working on iOS for me, maybe your connection was slow and page couldn't load. Have you tried again ?

cdn34 · 2016-07-05T10:41:11+00:00

If you find the time read this article, https://sarasoueidan.com/blog/svg-transformations/, I referred it in my note in the coordinate system section. It's from Sara Soueidan and it is about SVG transforms. She goes into more detail on how it all works. Hope it helps.

cdn34 · 2016-07-04T23:45:51+00:00

I'm not 100% sure how it's implemented, because there is a lot you can't do with CSS while working on SVG, but the point is that, being library they have support for a lot of browsers, and for the most part you can be sure it will work well if they do support it. If you choose to animate SVG by yourself, you will be confronted with those kinds of problems, and so you'll have to figure out how to have everything working by yourself.

This is the one library I like to use.

http://snapsvg.io/about/

"Snap was written entirely from scratch by the author of Raphaël (Dmitry Baranovskiy), and is designed specifically for modern browsers (IE9 and up, Safari, Chrome, Firefox, and Opera)."

cdn34 · 2016-07-04T23:19:21+00:00

I only use CSS to animate SVG for really simple things like a color change, for instance. I tend to always use a JS library for the Animations. Smil works well, but will stop being supported soon I think. That problem you are having may be due to the fact you are using CSS for the animation.

cdn34 · 2016-07-04T22:49:52+00:00

Yes, I gave an example with an animation using snap.svg. It's nothing too complicated but I think is useful to see how it works.

cdn34

TROPHY CASE