Thanks for the tutorial, I would just like to recommend the querySelectorAll and do a for loop on the styling to keep it maintainable. You could use an increment on a setTimeout function to delay the animation on each path.
For all of the beginners please do not copy and paste a function like how he did towards the end. That is highly discouraged. Better is to find what is similar in the code and reuse it. Other than that, thank you so much for the tutorial, I have learned quite a lot!
Man that's classy! I've always thinked to to similar way. I was just waiting for some free time to play with and investigate, now I can go straitgh to play ! Thanx ! :D PS: An improvement, in each path you could set a meta-tag like meta-seconds with a value like "3" or whatever. Then you do a loop with all the .path elements then this loops takes the seconds from the html tag seconds. Think about It's quite faster and cleaner code!
You can save yourself the time of of removing / rounding pixels Sketch will do this for you if you check [preferences > Fit layers and points to pixel bounds]. Hope this helps.
You can also import you sketch files into the Flow app (which you can find here createwithflow.com/ ) and then use sketch artboards to create animations. You can then use the app to export the animation as a GIF, MOVIE, Animated PNG, Animated SVG, iOS code, Web code, react native code, or even LOTTIE.
Sorry you're closing down, can you offer your videos as open source? you were a great contributor to a thriving Sketch community. Sketch App is the reason i bought my first macbook!
Dear Skectch... Thank you for all the love and talent you have put into your demo. However, please enlarge the font to 24 points. Also, a black screen with light text is very bad for your viewers. Consider these stats. Many of us have poor eyesight. Many of us have to view your demo on a small screen. Good luck to you and thank you very much.
you removed the image tag, then you pasted the Svc code into html, ...how is that code nested into what tag.?? Missed that part how it is is incorporated to html....? Via syntax...
Thanks for the tutorial, I would just like to recommend the querySelectorAll and do a for loop on the styling to keep it maintainable. You could use an increment on a setTimeout function to delay the animation on each path.
For all of the beginners please do not copy and paste a function like how he did towards the end. That is highly discouraged. Better is to find what is similar in the code and reuse it. Other than that, thank you so much for the tutorial, I have learned quite a lot!
Thank you! Specially for that Array/Offset explanation.
Man that's classy! I've always thinked to to similar way. I was just waiting for some free time to play with and investigate, now I can go straitgh to play ! Thanx ! :D
PS: An improvement, in each path you could set a meta-tag like meta-seconds with a value like "3" or whatever. Then you do a loop with all the .path elements then this loops takes the seconds from the html tag seconds.
Think about It's quite faster and cleaner code!
Nice tutorial! Thanks for sharing! :)
You can save yourself the time of of removing / rounding pixels Sketch will do this for you if you check [preferences > Fit layers and points to pixel bounds]. Hope this helps.
Fantastic stuff! Thank you!
Great video!!
You can also import you sketch files into the Flow app (which you can find here createwithflow.com/ ) and then use sketch artboards to create animations. You can then use the app to export the animation as a GIF, MOVIE, Animated PNG, Animated SVG, iOS code, Web code, react native code, or even LOTTIE.
Thank you!
creating an array [ 'path-1','path-2','path-3','path-4','path-5','path-6']and iterate with for loop?
any better ideas?
Exactly what I was thinking, for loops are used for iterative executions after all...
Sorry you're closing down, can you offer your videos as open source? you were a great contributor to a thriving Sketch community. Sketch App is the reason i bought my first macbook!
I looked , ok it's between the Div tag ...great tutorial BTW
AMAZING. thanks a lot.
Awesome... It will be more easy, if uses OOP... :) Thank you so much.. I was afraid of using svg... Now it seems its easy.
Great tutorial!
Very Nice.
Cool! Thanks!
Dear Skectch...
Thank you for all the love and talent you have put into your demo. However, please enlarge the font to 24 points. Also, a black screen with light text is very bad for your viewers. Consider these stats. Many of us have poor eyesight. Many of us have to view your demo on a small screen. Good luck to you and thank you very much.
Awesome!
5:15 "fractions of pixels are gross" LOL
Thanks!
but is the code a javascript? can you post the javascript? doesn't seems to work on mine :(
nise video))
you removed the image tag, then you pasted the Svc code into html, ...how is that code nested into what tag.?? Missed that part how it is is incorporated to html....? Via syntax...
Is it just a line of svs , purely by itself, or is preceded by some tag? ...
Good!
Does anyone ever buy Sublime?
To "solve" that issue I switched to Atom :P
Sublime is free the last time I downloaded it. Haven't heard of anyone buying it
It seems there should be a much 'd.r.y'er way of writing these functions. Anyone know?
Where is the JS code?
ummm opening song pleease? ;-)
Here you go pal: open.spotify.com/track/7vW6BQLlQpbo14pPDgp4da
Great tutorial :) insta like, insta sub ;)
круть!