Great video! I would like to suggest one little improvement though: The moon only rotates the first time the sun is clicked. To prevent that, line 28 could be changed to "rotate: toggle ? 0 : 320" so the rotation gets reset when the moon is clicked.
Great Dev, I'm trying to learn web programming with you(and others) but your mood helps a lot continue like that!!! Great teacher(sometimes to quick,jajajaja)
THANK YOU SO VERY MUCH for the video 😀 Not only it's one of the best explanations I've seen re this topic but also a totally fab presenter style 🤩 Was giggling together with you on all those "screw it" moments))) Thumbs up, subscribed!
Hey Ed, I'm struggling for a couple of dates to integrate an external svg document in JS / Jquery. I tried it via Xampp, but nothing worked. Do you have any solution for this kind of problem? Cheers
I have a question, I try to create this code on Brackets, but it is saying that the file I used it is not a java File, someone know how I can correct this error?
Please help. I've learned to use the DOM, SVG, and Javascript to create SVG lines. However, I fail with SVG polygons. SVG polygons have points and data. I want to create a right triangle with polygon and rotate it. I want to do this in javascript. Thank you.
Use SVG paths, just move the drawing pen with 'M' and then declare dots using 'L' or 'l'. When you're done with all the three dots declare 'Z' at the end of the SVG path attribute. 'Z' simply connects the final point or dot with the initial or starting point, it's like it closes the shape. You can do this with JavaScript using setAttribute().
I guess there's a bug. the moon rotating animation works only once when you first click it, then it just goes in a different way just changing with the sun and backwards.
Hi guys, Changing the path from sun to moon is ok, but I'm trying to change also the fill of this path, from white (color of my sun) to black (color I would for my moon). I'm doing the same process we did for the path, so something like this for the variables: const sunFill = "white"; const moonFill = "black"; and something like this (I got a problem from here): timeline.add({
targets: ".sun", d: [{value: toggle ? sunPath : moonPath}] , fill: toggle ? sunFill : moonFill }) Some one can help me to fix this? I know I do this wrong.
I think it would be better if you add the following code in the "else" section of "check toggle", try it out: if (!toggle) { toggle = true; } else { toggle = false; timeline.add({ targets: '#darkMode', rotate: 0 }, '-=350') } But I verry thank you your video, it's realy fantastic
Who loves SVGs?
more video about SVG
Yess i love
more about svg please 😀
🙋me!
👍👍😅😅
Extremely useful as always. Thumbs up before I even get half way through! Great work
You had me at "I like free stuff, free stuff is amazing!"
Great video! I would like to suggest one little improvement though: The moon only rotates the first time the sun is clicked. To prevent that, line 28 could be changed to "rotate: toggle ? 0 : 320" so the rotation gets reset when the moon is clicked.
That was the only flaw I saw, thanks for the suggestion!
Great Dev, I'm trying to learn web programming with you(and others) but your mood helps a lot continue like that!!! Great teacher(sometimes to quick,jajajaja)
Man i love your videos.... You make everything look so simple!
rotate: toggle ? 0 : 320 that svg should rotate every time you click it
Man's too wholesome😂❤
THANK YOU SO VERY MUCH for the video 😀 Not only it's one of the best explanations I've seen re this topic but also a totally fab presenter style 🤩 Was giggling together with you on all those "screw it" moments))) Thumbs up, subscribed!
thanks for the great video, nice hair style BTW
love the way you explain everything
Lovely. Thanks for the video Ed
awesome as always! thanks for the nice introduction!
Thanks❤️❤️❤️❤️
Congratulations. Very well explained.
24:58 i would rather do toggle = !toggle
That works great too! Thanks!
This is what I'm looking for for hours.
you are so funn!! thanks for the video
best teacher. respection
I copied each and every step but was fail to achieve the end results.
Loved the video!
Thanks, great source to start!
Animation is life, life is animation. thanks for the video
Awsome videos! You taught me so much!
Thank so much!
@@developedbyed You're the teacher, Thank you :D
23:38 To make it sunny again you can just refresh the page.
It's truly an awesome videos
Thanks a lot
nice work 👍🏻
Protip: toggle = !toggle, instead of the whole if else.
Hy man, that was in my mind. You bring those to reality . Awesome content..
aww thank you so much!
Best of bestest love u bro 💓💓
Thanks! You give me a lot of good advice!!
When you said "double dots" my head exploded!
wow
'the other click' ur vids r amazing!
great tutorial ~~ thank you ~~ :)
Yes yes yes love it ! :)
Great tutorial ... keep going
Thank you Ed
this is awesome
Thank you so much!!!
Thank you!
awesome, just wondering how to use another CSS external over toggle
awesome video
Hey Ed, I'm struggling for a couple of dates to integrate an external svg document in JS / Jquery. I tried it via Xampp, but nothing worked. Do you have any solution for this kind of problem?
Cheers
Awesome!
I liked the video before viewing it lol...flippity floppity
which software are you using for genratic svg icons or image code
I'm having an issue where my moon is moving from left to right - and getting slightly cut off from view. Does anyone know a fix?
13:00 LOL that =))
I have a question, I try to create this code on Brackets, but it is saying that the file I used it is not a java File, someone know how I can correct this error?
Please help. I've learned to use the DOM, SVG, and Javascript to create SVG lines. However, I fail with SVG polygons. SVG polygons have points and data. I want to create a right triangle with polygon and rotate it. I want to do this in javascript. Thank you.
Use SVG paths, just move the drawing pen with 'M' and then declare dots using 'L' or 'l'. When you're done with all the three dots declare 'Z' at the end of the SVG path attribute. 'Z' simply connects the final point or dot with the initial or starting point, it's like it closes the shape.
You can do this with JavaScript using setAttribute().
plz make a vdo on ..."how to design svg icons
"
What software was used in the video to handle SVG? Thank you!
Figma
How did you get your first job as web developer??
And where?
hey in this video when the sun clicked second time its not rotated
which is that svg editor ??
I get an error when I click on the sun, it says could not read anime.min.js it latest version btw
For anyone having issues/errors... Change easing: "easOutExpo" to easing: "linear"
but the rotate doesn't work if toggle was changed
why in my case do color of the fonts not change?
same for me, the color of h1 doesnt change :c
edit: I fixed the issue. In css i was using h1{} instead of body{}.
I'm happy with the result of 3:53 rather than 4:32. Are you guys same? 😂
If i know vanila javascrpt, then can i do this?
Reverse the rotation :), like what you do
Which software are you using ?
why didn't you use animation on your web page
Maybe I'm mean, but it seems he's not in control of if statements?
I guess there's a bug. the moon rotating animation works only once when you first click it, then it just goes in a different way just changing with the sun and backwards.
yes....just use rotate: toggle ? 0 : 320 instead of rotate: 320
please makes more design videos.
Hi guys,
Changing the path from sun to moon is ok, but I'm trying to change also the fill of this path, from white (color of my sun) to black (color I would for my moon). I'm doing the same process we did for the path, so something like this for the variables:
const sunFill = "white";
const moonFill = "black";
and something like this (I got a problem from here):
timeline.add({
targets: ".sun",
d: [{value: toggle ? sunPath : moonPath}]
,
fill: toggle ? sunFill : moonFill
})
Some one can help me to fix this? I know I do this wrong.
what did u do just add SVG in HTML ??? SVG Morphing Animation With Javascript Tutorial | Javascript Animation With Anime.js
Only one problem, moon rotate only first time
try toggling "rotate"
තෑන්ක්ස් කොල්ලෝ
❤❤❤❤
what's the software name that make moon?
Figma
is this will still work in 2024 ?
anime.js:1312 Uncaught ReferenceError: module is not defined
at anime.js:1312
why????? 😭
Me too
Это можно и на css сделать
plz make video on all javascrip animation step by step
Error : time != money. time is relavative to money. How you make it worth the big bucks is what you do with your time.
what app is that used for the svg?
Figma
Did anyone tell you look like benidict comberbatch?
Source code
difficult to understand
Hey it is unbelieveable but I can not find the "sigma" editor you used in this video.
www.figma.com/
Milan Meulemans oh thank you
toggle = !toggle
So you want to be a software engineer at Google... 😠😠😠
Lol
??
my hurt is braining
😂😂😂💀
🙋me!
thx man, you are great!
I think it would be better if you add the following code in the "else" section of "check toggle", try it out:
if (!toggle) {
toggle = true;
} else {
toggle = false;
timeline.add({
targets: '#darkMode',
rotate: 0
}, '-=350')
}
But I verry thank you your video, it's realy fantastic