Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Animating SVG with CSS Keyframe and Line Drawing Animations The Animation Challenge Solution

Nick Huemmer
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nick Huemmer
Front End Web Development Techdegree Graduate 26,840 Points

I really struggled with this challenge - I didn't know where to start or how to figure it out.

After I watched all the videos, I felt like I didn't have a clear understanding of how SVG animation works or what the appropriate CSS to use for animating the stars were.

I feel like @keyframes wasn't really explained well and checking the MDN documentation didn't help much, either. The language is very technical and hard to understand.

Should I watch these videos again, or find an alternate resource that explains things in a different (perhaps more comprehensive) way?

I find that Guil is a great teacher most of the time, but often he moves fast and there isn't always an explanation behind why he's doing something leaving the student to do a lot of research on their own. This is fine if I'm just going to copy what he's doing, but it's frustrating when I don't understand the "why" behind what he's doing. I feel like understanding the why is important to applying the concepts later.

Hey Nick, I am completely in the same boat XD Did anyone actually answer your question in the end?

As I am the same I genuinely have no idea how this SVG stuff works despite the videos. I think Guil is great also but I think they could do with having a section in the video explaining why this stuff works.

Nick Huemmer
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nick Huemmer
Front End Web Development Techdegree Graduate 26,840 Points

Hey Taylor, I didn't get a response to this question. What I ended up doing to learn about what was going on with SVGs was reading different resources on the web. CSS-Tricks and Chris Coyier are great resources for getting more info SVG. I actually bought that book by Chris Coyier, the Book Apart series for web developers are short and well-written.

Unfortunately, TH only mentions in passing in other learning modules that you should consult other resources, but I've found that it's necessary to read all the stuff referred to in the teacher's notes AND do some research on your own when you don't understand a concept and re-watching the videos doesn't help.

I suggest starting with MDN and W3Schools and reading through there, then looking through other resources. Books are helpful, too.

That's what's helped me get through the SVG stuff necessary for project 7 (fortunately, it's not too in-depth, you just have to play around with it). Just getting explanations stated in different words is sometimes all it takes. Good luck!

Hey Nick,

Thank you so much for writing about your experience with this section and what you did to understand it XD As honestly the videos I just found a bit draining and annoying on this subject. I love what team treehouse is doing but sometimes I really wish they explained why and how certain elements of programming work.

I will definitely check out those books that you referenced :)

I totally agree.. Struggling and I feel like this was not at all explained.. I could've learned this much on Google as well.. I think it has been rushed. Not sure how they're expecting us to get this from this much info.

1 Answer

Nick Huemmer
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nick Huemmer
Front End Web Development Techdegree Graduate 26,840 Points

For what it's worth (several months later) after playing around with svgs in some projects and doing some reading around the internet, svgs aren't that difficult to understand or play around with. I used some keyframe animation for project 7 in the FEWD TechDegree along with some svgs and working with both really helped me understand what they heck they are and what they do.

Nick Huemmer thanks .. I think I really needed to hear that. :)