I can't do animations, SVG or Canvasūüėě | Sololearn: Learn to code for FREE!
+ 26

I can't do animations, SVG or Canvasūüėě

Even though I finished my HTML course, I find it very difficult

30th Oct 2018, 4:42 PM
Calimari
Calimari - avatar
17 Réponses
+ 21
Hey, You need hands on experience other them just reading, practice making a square in javascript and show your attempts here and I/We will guide you through in making your first animation. ūüĎć
30th Oct 2018, 5:13 PM
D_Stark
D_Stark - avatar
+ 18
Well I read everything about tennis. I was a champion. So I was a bit astonished that I lost the first match 0:6 0:6 0:6. Additionally I didnt get much balls where I wanted to. They all were addicted to being far out of the field. ... at least those few I hit. ...practice is it! Btw: It is not really forbidden, to copy code of other Sololearners and trying to understand it and do some adaptations. Actually it is a good way to learn. Just keep them private until they are mainly yours. Try some that look easy.
31st Oct 2018, 9:20 AM
Oma Falk
Oma Falk - avatar
+ 10
Don't feel down about it! With these kinds of things, no one is going to be able to remember everything in the HTML course after reading it all once without coding anything. I always go back to the lessons when I forget something and want to code about it. Practice makes perfect. The more you code, the more you remember, and the less you will have to reread the lessons. Be patient, because every pro was once a beginner. I wish you good luck on your coding journey! ūüėÉ‚úĆÔłŹūüĎćūüéČ
1st Nov 2018, 3:01 AM
Christine
Christine - avatar
+ 9
It's ok, I find those hard as well. Start small, you'll work your way up. All brilliant coders start from the bottom.
31st Oct 2018, 9:04 AM
Robyn A
Robyn A - avatar
+ 9
PGameYT animations are done in HTML.
1st Nov 2018, 3:01 AM
Christine
Christine - avatar
+ 9
Ok!
10th Nov 2018, 3:05 PM
Calimari
Calimari - avatar
+ 7
The Same thing happened to me. I have learned Advanced HTML , but I don't even know how to code in SVG or Canvas. But, we should try to practice and master that SVG animations..... That's it .
1st Nov 2018, 3:08 AM
JEET DHOLAKIA
JEET DHOLAKIA - avatar
+ 6
revisit the topic on svg and canvas and see how is it done then you'll find a way around the sololearn try it yourself set
1st Nov 2018, 6:43 AM
Andrew Watts
Andrew Watts - avatar
10th Nov 2018, 1:59 PM
Calimari
Calimari - avatar
+ 5
It's take time. Start from easy tasks, by making single object move first. Slowly move to more tasks, when you ready.
31st Oct 2018, 5:22 AM
Calvi’≤
Calvi’≤ - avatar
+ 5
YOU DO ANIMATIONS IN CSS
31st Oct 2018, 9:43 PM
PGameYT
PGameYT - avatar
+ 5
I have the same problem... But I suggest that you play with your codes. Look at others code to give you inspiration. You can learn from others code. Or maybe you can also review the lesson about Canvas and SVG. Take little steps by little steps, you will achieve big goals! Do not hesitate to ask us about the things you don’t understand! We are here to help! Happy coding and happy learning!
1st Nov 2018, 11:42 AM
JTLZ
+ 4
D_Stark can you tell me how to make a square in JavaScript?
3rd Nov 2018, 9:42 AM
Calimari
Calimari - avatar
+ 3
body{ background-color:#efefef; text-align:center; font-family:Nunito,sans-serif; } h1{ margin-top:30px; color:teal; } #box{ margin-top:30px; background-color:#5385c1; color:#efefef; width:90%; height:210px; border:2px solid teal; border-radius:3px; padding:10px; margin-left:5px; }
12th Nov 2018, 3:53 AM
PGameYT
PGameYT - avatar
+ 2
body { margin:0; padding:0; background-color:gray; } #eye1 { position:absolute; height:200px; width:200px; border-radius:50%; background: radial-gradient(circle at 50% 40%, #fcfcfc, #efeff1 67%, #9b5050 100%); margin-top:25%; margin-left:22%; } #eye { position:absolute; height:90px; width:90px; border-radius:50%; background-color:lightblue; margin-top:36%; margin-left:28%; animation-delay:2s; animation:move 2.7s ease-in-out infinite; } #eyeball { position:absolute; height:50px; width:50px; border-radius:50%; background-color:black; margin-top:26%; margin-left:24%; } #dot { position:absolute; height:20px; width:20px; border-radius:50%; background-color:rgba(255,255,255,0.7); margin-top:-15%; margin-left:0; } @keyframes move { 0% { transform:translateX(0); } 50% { transform:translate(-12px,2px); } 100% { transform:translate(12px,2px); } } Study this
12th Nov 2018, 3:55 AM
PGameYT
PGameYT - avatar
+ 2
Also this is from Macomb autocorrect lol.
12th Nov 2018, 3:55 AM
PGameYT
PGameYT - avatar
2nd May 2019, 11:10 AM
Galih Prakoso
Galih Prakoso - avatar