These are some of the books that can help you learn web designing - 1. Web Design with HTML, CSS, JavaScript and jQuery Set - amzn.to/2T3WViK 2. HTML 5 Black Book (Covers CSS3, JavaScript, XML, XHTML, AJAX, PHP, jQuery) 2ED. - amzn.to/2DtVBAo 3. JavaScript and JQuery: Interactive Front-End Web Development - amzn.to/2R78ofJ 4. Web Animation using JavaScript: Develop & Design (Develop and Design) - amzn.to/2AZ3vQF 5. Mastering SVG: Ace web animations, visualizations, and vector graphics with HTML, CSS, and JavaScript - amzn.to/2S1dj6p
Привет, ты используешь несколько h1, разве по семантике так можно? А так мне очен нравятся твои видео, это что-то новое для в плане использования анимации, все мои сайты без неё, заказчики не просят и даже нет опыта в её применении, нужно для себя тоже несколько проектов сделать анимированных, что я вот тоже так могу :D ======================================================================== Hi, you use some h1, is it possible by semantics? And I really like your videos, this is something new for the use of animation, all my websites are without it, customers are not asking, and even have no experience in its application, you also need to make several projects for yourself that I’m also like that I can: D google translate from rus
Wow congratulations for your job Codegrid. I see the theme and the fonts of your text editor. Can I know what theme and typography did you use for the text editor?
CSS can be easily understood by all. It is possible that many people may not be familiar with SASS. That's why I use CSS so everyone can get it easily. Moreover, to be frank, even I'm not familiar with SASS 😂😂
How do you prototype your interface ? I would appreciate your input. Is it Sketch or XD or something else? Do you prototype your animations using principle or something?
I've got no formula. Designing is my passion and I spend most of time doing this. There are not any specific courses or tutorials from where I learnt. I just go through whatever comes in front of my eyes, any tutorial, blogs, snippets, etc. Still learning and trying to provide value by crafting my ideas! Thanks.
hey, just wanted to know when you create stuff like this, is it with the intention of it ONLY being viewed full screen? or do you do the responsive design later?
Almost all of my videos are created with the purpose of CONCEPT. Where it seems necessary I make it responsive too. This video is about to show a basic idea how Greensock can be used to create such kind of animations.
Hello bro, i real love all of yuors a video. Why you deleted the last a video menu scroll down but it is ok! if you could make it once more i thanks you a lot! :)
Don't know if it helps anyone, and if you understand how i have written it, But if you add this in to your HTML (I have left the tag in so you know were to put it).
and this in to your script (left the opening to make it easier for placement) function tweenSetup(){ if (localStorage.getItem("tweenDone")=="true"){ var element = document.getElementById("overlay"); element.parentNode.removeChild(element); } else{ before the 1st TweenMax.to(".overlay img", 2,{ opacity: 0, y: -50, ease: Expo.easeInOut, }) and this to close it like this. localStorage.setItem("tweenDone", "true"); } } It Should only open once per visit so if someone is going back and forth to the landing page its not going to do the animations every time. Sorry for messing with your code, Codegrid. i hope you don't mind it looks great and i have had a lot of fun playing around with it, you have a fantastic channel :-)
These are some of the books that can help you learn web designing -
1. Web Design with HTML, CSS, JavaScript and jQuery Set - amzn.to/2T3WViK
2. HTML 5 Black Book (Covers CSS3, JavaScript, XML, XHTML, AJAX, PHP, jQuery) 2ED. - amzn.to/2DtVBAo
3. JavaScript and JQuery: Interactive Front-End Web Development - amzn.to/2R78ofJ
4. Web Animation using JavaScript: Develop & Design (Develop and Design) - amzn.to/2AZ3vQF
5. Mastering SVG: Ace web animations, visualizations, and vector graphics with HTML, CSS, and JavaScript - amzn.to/2S1dj6p
GSAP core tools free for commercial use ???
Yes
THIS IS WHAT I CALL PROFESSIONAL DESIGN. YOU ARE SO GOOD BRO
thank ya bro! 🙌
Your channel is pure gold
thanks brotha!
That's awesome man! It's so smooth and elegant! Keep up your good work!
That was so beautiful, I feel like I could watch that process for hours. Subscribed.
Awesome ! Your videos and the concept inside their, took me to study front end and acquire my first job
🙌
1 dislike? May be a History Student! BDW.. love your videos.. keep making.. it really helps!
Thanks brother! 🙌
Looks nice, now we know how to use GSAP.js and its realy popular on websites right now, thank you my teacher! :)
Well done codegrid....
You are a genius to make web design like this bro :)
thanks! 🙌
Wonderful man, this code's demonstration is so great. Hope to see more in 2019
thanks brother! 🤝
Thanks for
Awesome Effects
thank you for giveing source code
kindly share source code brother
Finally, something that uses Tween, I am going to see if I can recreate this in React. Thanks
Benny Ogidan did you create this in React? Can you please share your code.
This is so dope ! WHAT AN Amazing EXPERIMENT
Nice design bro. Also thanks for the codes
I really like your work and minimalistic movies ;)
Привет, ты используешь несколько h1, разве по семантике так можно?
А так мне очен нравятся твои видео, это что-то новое для в плане использования анимации, все мои сайты без неё, заказчики не просят и даже нет опыта в её применении, нужно для себя тоже несколько проектов сделать анимированных, что я вот тоже так могу :D
========================================================================
Hi, you use some h1, is it possible by semantics?
And I really like your videos, this is something new for the use of animation, all my websites are without it, customers are not asking, and even have no experience in its application, you also need to make several projects for yourself that I’m also like that I can: D
google translate from rus
What is the code editor you use? Looks really great and helpful with the suggestions
Atom
Wow congratulations for your job Codegrid. I see the theme and the fonts of your text editor. Can I know what theme and typography did you use for the text editor?
UI theme - Atom material
Syntax theme - One dark
Fonts - Roboto mono medium
Hey guys how can I trigger Tweenmax animation when the viewer scroll to a spesific Element
Loved it, also what theme are you using?
UI theme - Atom material
Syntax theme - One dark
which music???
Looking lovely design
Good job man ! :)
Awesome stuff 🔥
UNBELIEVABLE!!
Can you make a video where you work SASS instead of CSS directly?
CSS can be easily understood by all. It is possible that many people may not be familiar with SASS. That's why I use CSS so everyone can get it easily. Moreover, to be frank, even I'm not familiar with SASS 😂😂
Please what code editor do you use? It's really nice
Atom
@@codegrid Atom? But how do you do the thing where you just typed the class selector and it just creates the div with the class name?
Using emmet.
@@codegrid Oh, Is that an extension? Thanks
Yea
can you give a link to this site? I can't google it😔
The only thing that doesn't work for me is the social media icons. I tried going to font awesome and picking out new ones, but it still doesn't work?
Try -> and add this on top of your code
How do you prototype your interface ? I would appreciate your input. Is it Sketch or XD or something else? Do you prototype your animations using principle or something?
I usually use Adobe Photoshop to create interfaces. And no there's not any principles which I follow.
anyone knows what TweenMax is?
Thanks man ur videos are so helpful.
thanks 🙌
What Atom theme do you use?
UI theme - Atom material
Syntax theme - One dark
good work, where did you study this?
I've got no formula. Designing is my passion and I spend most of time doing this. There are not any specific courses or tutorials from where I learnt. I just go through whatever comes in front of my eyes, any tutorial, blogs, snippets, etc. Still learning and trying to provide value by crafting my ideas! Thanks.
@@codegrid What software do you use for design?
Wanted to know about javascript that you used.
Thank you
I've used greensock which is widely used for creating animations. You can find about it more here -
greensock.com/tweenmax
quite nice! you should make it as timeline in timelineMax;)
Okay.
hi friend! What IDE you use for your projects?
Atom
hey, just wanted to know when you create stuff like this, is it with the intention of it ONLY being viewed full screen? or do you do the responsive design later?
Almost all of my videos are created with the purpose of CONCEPT. Where it seems necessary I make it responsive too. This video is about to show a basic idea how Greensock can be used to create such kind of animations.
Whats the name of the Program ?
how do i get the tween max library
From greensock's official site.
What editor did you use??
Atom
U are God bro❤️❤️❤️❤️ I want to know which js u use
greensock.
what program do u use?
Atom
fw: bolder; lol u mean bold?
Lol no! BOLDER
Wow now i will use this iny project thanks 🔥🙏
hy .. can you tell me what javascript what you use ? pliss
Someone please tell me what editor is it?
Atom
Very nice, thank you so much.
Can you please tell me what are the best resources to learn tweenmax..???
I'm learning it from the official website of Greensock.
Can we use tween max for free or we need to take a membership of club greensock ?
It's free.
@@codegrid thx
What program do you use?
Atom
@@codegrid Thanks
Esto es arte 😍
🙌
amazing channel thank you sooo much
hy .. can you tell me what javascript what you use ? pliss
I've used tweenMax from Greensock.
@@codegrid oke thank you
thanks
source code link isn't working anymore
It's working
What is your IDE sublime or atom
Atom
Thank you joseph grate video serios 👌
best Animation!
thanks bro!
This is perfect
Thanks 🙌
Watching yourself coding is more like stress buster to me😂😂 That too during long travel. Keep up the pace bro and why not do something colourful 🤔
😂😂
Why don't you use semantic tags? #Codegrid
IDK why I don't use em. I use em with Instagram.
Hello bro, i real love all of yuors a video. Why you deleted the last a video menu scroll down but it is ok! if you could make it once more i thanks you a lot! :)
Which video?
what is your IDE?
It's a text editor - Atom
What does 1,2 mean? Bro , nice animation keep on
Duration
Awesome!!!
What is a travel website
Google it.
vientos
the source of code it´s broken, I just need the links of metadata :D
You can find this project here: github.com/codegridweb
@@codegrid thank´s man but what is the name of the project?
on github
oh! i got it :D THANKS
keep the fire content up! sub + like 😁
awsomme bro . im one of ur fun ;)
wow !
Don't know if it helps anyone, and if you understand how i have written it, But if you add this in to your HTML (I have left the tag in so you know were to put it).
and this in to your script (left the opening
to make it easier for placement)
function tweenSetup(){
if (localStorage.getItem("tweenDone")=="true"){
var element = document.getElementById("overlay");
element.parentNode.removeChild(element);
}
else{
before the 1st
TweenMax.to(".overlay img", 2,{
opacity: 0,
y: -50,
ease: Expo.easeInOut,
})
and this to close it like this.
localStorage.setItem("tweenDone", "true");
}
}
It Should only open once per visit so if someone is going back and forth to the landing page its not going to do the animations every time.
Sorry for messing with your code, Codegrid. i hope you don't mind it looks great and i have had a lot of fun playing around with it, you have a fantastic channel :-)
❤🙌
Excelente
how old are you bro ?
21
You should use a github account for your code
Yeah I've already got one: github.com/codegridweb
you are the biggest
thanks for the appreciation bro! I'm just crafting my ideas and what I learn.
wow
Beautifuk
Nice use of tween max ;)
thanks brother! 🙌
bro teach me javascript jquery
Bro I make videos on specifics. For the basics - you can google anytime.
Who played it at 0.25x ?😁😁
Uau 😲🤤
he is god
ya
github.com/codegridweb/Travel-Website-Landing-Page-Concept
Thank you so much brotha! ❤
codegrid your deisgn really terrfic.
First
First