In CSS the .activator border-radius is 100%, but in GSAP border-radius is 5em , so it should be borderRadius : '100% 0 0 100%, i hope this is the solution, thank you Gary.
I'd learn so many things from you. Really appreciate it and I owe you everything that you helped me on my career path. Thank you for being my inspiration
not gona lie, made me a little nervous when you said "stuff you don't need to" when it comes to accessibility 😂 even tho I knew what you meant lol (slight anxiety from the empty alt tag lmao) great tutorial as always!
I don't have a lot of experience with GSAP, but you can try this to "kinda" solve the transition issue. Remove the border-radius styles from the timeline and just place it within the if statement when the animation plays. Then set it back to 100% when it's reversed. From there you can just add a transition to the border-radius of the .activator. Play around with the timing to see what looks best. card.addEventListener('click', () => { toggle = !toggle;
@SeasonedGamer The World Wide Web Consortium (W3C) has established standards for interpreting Web-based content. Used those and browsers shall follow. It's not like you can't read the content with an outdated browser. Stick to standards and code for the future!
@@MyDpop not everyone is a web developer, so everyone that uses the website should be considered in the making of it, they probably don't even what's W3C.
IE ⁉ even back to 8!!! seriously now? 😮 Thanks for the clarification @SeasonedGamer . I'm sorry to learn about that. That even government facility are behaving so backwards probably says more about the belief in the future of the respective country. There was once a time when banks didn't allow Javascript on their own websites because of security concerns. Where would their future have gone had they stayed with it? 😣 For me, it's always about what my client's USER wants. And to my task also belongs to remind the customer about it. Especially as a web developer.
@SeasonedGamer IE8 doesn't even support flexbox. If you are coding to support dead technologies, you will have a dead career. Good luck finding a job in any place that expects knowledge of what is now a fundamental web technology after working there.
@@ClassicItalianCulture wrapping it in () makes it an expression which is valid, the if keyword is unnecessary cuz we aren't even using the body of the if construct, in the video he has just ended it with a semicolon. The actual logic happens in the ternary. A simpler more readable solution would be to not use ternary and use the actual if to do the conditional logic. if(toggle) t1.play(); else t1.reverse(); In the video all the if is doing is just evaluating the ternary expression passed into the conditional part. even writing (A ? B : C); Alone by itself is a valid expression
you can fix the bug by placing a div around the activator image and moving the class to it, and changing the border-radius to 5em in the activator class
I thought the same thing, but I like it that way due to the clarity. It's much more human readable to me that way, and I wish it was industry standard to write it like that.
Gary, You should install Windows PowerToys and setup FancyZones. It would make it much easier when you want to reposition windows for visibility. After you're comfortable with it you can do a video showing your viewers how to set it up for a potential productivity boost.
nice video gary, as of right now today though i notice the "sprite svg" is not an available option anymore. theres: link, img, loader, & raw- download options. i believe "img code is the svg file that will work the same.
You can do { 'borderTopRightRadius': '0', 'borderBottomRightRadius': '0' } instead of { 'borderRadius': '5em 0 0 5em' } to maintain other rounded edges!
To fix that corner edges i replaced in the javascript script where it says "'borderRadius': '5em 0 0 5em'" with 'borderRadius': '50% 0 0 50%' and also the initial .activator border-radius to 50% and not 100%.
I don't think you had to use border-radius 100% in the activator class, something like 50% would do better, and can't we really do this whole thing in CSS? or at least only some js to toggle classes?
First of all, thanks for the good tutorial. To fix the corner problem, you have to set the header element which is the container the same border radius of the '.activaor' class when animated and set its overflow to hidden header{ border-radius:5em 0 0 5em; overflow:hidden; } this is my implementation in codepen codepen.io/norhanms/pen/vYXGwRE
Hi, I found one problem on Firefox it's not working. I checked also the code demo on Firefox it's the same. Any idea where is the problem? It's look like img has 0px. But how to fix it? Thx
Would I be allowed to remake this project in React, and add the possibility to slide it out in all directions (up, down, left, right) via render props? And upload that to my channel?
@17:29 maybe try and target/animate the "upper right" and "bottom right" corners from the activator instance you got going, could also work if you instead set fixed values for your "upper left" and "bottom left" corners and so the only thing youd had to animate would be the right side.
nice one gary ! you can fix the border radius issue by either apply the top left and bottom left radius and make it "!important", or you can apply border top left and bottom left to the header and overflowx hidden for the specific experiment..
I really miss more content like that... React is super awesome, but I see some codes relying too much on components libs, and sometimes ending up making tons of hacks to make it look like what they want, instead of create a fresh component for it.
I can imagine this as a FAB button (that one that float) in a ecommerce website with quick setup options like 'talk to support' + 'change currency'.. change language.. etc.
var toggle = false (its a boolean data type) in click event he said toggle = !toggle it means opposite of false = true & true = false if(its true tl.play() else tl.reversed)
@@PixelatedBrain7 Hi! Thanks for the reply. But my question not about "how to use boolean?".It could be "if(boolean) { do smth.. } else { do smth.. else }" or " boolean ? do smth.. : do smth.. else;" these two expressions are equivalent. And Gary used a mix of them "if(ternary operator);". I haven't seen constructions like this before. And my question is how it works?
@@mounir101 Nope they don't work the same "let" is block-scoped and "var" is global-scoped..........In this code there won't be a problem coz he is declaring variables globally, but it's always a good practice to use "let" or "const" hope this helps :)
Want to see more? Sub up!!!!
Yess😍Tysm😁
Here from 2018
In CSS the .activator border-radius is 100%, but in GSAP border-radius is 5em , so it should be borderRadius : '100% 0 0 100%, i hope this is the solution, thank you Gary.
i tried and it worked ....
tl.fromTo('.activator', {
'borderRadius': '5em 5em 5em 5em'
}, {
background: '#805ad5',
'borderRadius': '5em 0 0 5em'
});
Yep! make more of those!!
Would love to see more javascript and css advanced animation/tricks😍❤
I'm sure Gary Simon is awesome writing code, specially JS and JSX.
I'd learn so many things from you. Really appreciate it and I owe you everything that you helped me on my career path. Thank you for being my inspiration
Thanks for showing us all these cool stuff! I learned a lot with your videos ☺️
not gona lie, made me a little nervous when you said "stuff you don't need to" when it comes to accessibility 😂 even tho I knew what you meant lol (slight anxiety from the empty alt tag lmao)
great tutorial as always!
I don't have a lot of experience with GSAP, but you can try this to "kinda" solve the transition issue. Remove the border-radius styles from the timeline and just place it within the if statement when the animation plays. Then set it back to 100% when it's reversed. From there you can just add a transition to the border-radius of the .activator. Play around with the timing to see what looks best.
card.addEventListener('click', () => {
toggle = !toggle;
if (toggle){
tl.play()
card.style.borderRadius = '5em 0 0 5em';
}else{
tl.reverse()
card.style.borderRadius = '100%';
}
})
To solve the circular edge problem, just add an additional "clip-path: inset(0% -50% 0% 0% round 50%)" to the ".activator" class.
@SeasonedGamer The World Wide Web Consortium (W3C) has established standards for interpreting Web-based content. Used those and browsers shall follow. It's not like you can't read the content with an outdated browser.
Stick to standards and code for the future!
@@MyDpop not everyone is a web developer, so everyone that uses the website should be considered in the making of it, they probably don't even what's W3C.
@@lunai3225 You've got a point there. 😑
IE ⁉ even back to 8!!! seriously now? 😮 Thanks for the clarification @SeasonedGamer . I'm sorry to learn about that.
That even government facility are behaving so backwards probably says more about the belief in the future of the respective country.
There was once a time when banks didn't allow Javascript on their own websites because of security concerns. Where would their future have gone had they stayed with it? 😣
For me, it's always about what my client's USER wants. And to my task also belongs to remind the customer about it. Especially as a web developer.
@SeasonedGamer IE8 doesn't even support flexbox. If you are coding to support dead technologies, you will have a dead career. Good luck finding a job in any place that expects knowledge of what is now a fundamental web technology after working there.
15:37 I think if () is not necessary there. You could just write the ternary by itself right? 🤔
Yea i was thinking that too...the if() not doing anything
I tried, it's not working without ()
@@ClassicItalianCulture wrapping it in () makes it an expression which is valid, the if keyword is unnecessary cuz we aren't even using the body of the if construct, in the video he has just ended it with a semicolon. The actual logic happens in the ternary.
A simpler more readable solution would be
to not use ternary and use the actual if to do the conditional logic.
if(toggle)
t1.play();
else
t1.reverse();
In the video all the if is doing is just evaluating the ternary expression passed into the conditional part.
even writing (A ? B : C); Alone by itself is a valid expression
you can fix the bug by placing a div around the activator image and moving the class to it, and changing the border-radius to 5em in the activator class
great!
8:39 {width: 100%; max-width:45px} God, i wish i know it before. How i never though about it. It solves so many problems... Thank you.
Beautiful tutorial and project. Thank you for this.
Does ternary operator need to be in an if statement? Thought it was a conditional by itself
It's not required its same as an if else block
I thought the same thing, but I like it that way due to the clarity. It's much more human readable to me that way, and I wish it was industry standard to write it like that.
Gary, You should install Windows PowerToys and setup FancyZones. It would make it much easier when you want to reposition windows for visibility. After you're comfortable with it you can do a video showing your viewers how to set it up for a potential productivity boost.
looks great and the video is easy to follow
Awesome video and really well explained!
I did the hamburger animation and it's amazing!
imgur.com/a/CzH3n0P
Once I get a little bit advance I would like to collaborate with you... Your designs are awesome..❤️❤️❤️👍
0:36 thanks for the tutorial xD
Why did you write ternary inside if? The if is not necessary
Please make titles more consistent - *#2 UI Experiments: Creating an Awesome Slide-out Navigation*
Can get rid of that circle animation artifact by making it two halves
Lmao why does that sound like the PH intro
lmaoo
Nice video, would love to see future videos not include 3rd party libraries, but teach the core concepts instead
nice video gary, as of right now today though i notice the "sprite svg" is not an available option anymore. theres: link, img, loader, & raw- download options. i believe "img code is the svg file that will work the same.
i did "borderRadius" : "50% 50% 0 0" and it didn't show the square hover color.
(i'm doing it vertical)
this is tutorial its very well Thanks for That
Thanks for the great explanation. As always, really appreciated your work! 😍👍🏻👍🏻👍🏻
Gary codes like he owns 'javaScript'
You can do { 'borderTopRightRadius': '0',
'borderBottomRightRadius': '0' } instead of { 'borderRadius': '5em 0 0 5em' } to maintain other rounded edges!
To fix that corner edges i replaced in the javascript script where it says "'borderRadius': '5em 0 0 5em'" with 'borderRadius': '50% 0 0 50%' and also the initial .activator border-radius to 50% and not 100%.
I don't think you had to use border-radius 100% in the activator class, something like 50% would do better, and can't we really do this whole thing in CSS? or at least only some js to toggle classes?
First of all, thanks for the good tutorial.
To fix the corner problem, you have to set the header element which is the container the same border radius of the '.activaor' class when animated and set its overflow to hidden
header{
border-radius:5em 0 0 5em;
overflow:hidden;
}
this is my implementation in codepen
codepen.io/norhanms/pen/vYXGwRE
Hi, I found one problem on Firefox it's not working. I checked also the code demo on Firefox it's the same. Any idea where is the problem? It's look like img has 0px. But how to fix it? Thx
what's not working?
@@PixelatedBrain7 img don't loaded
Thank you!!... Can this work in angular?
Would I be allowed to remake this project in React, and add the possibility to slide it out in all directions (up, down, left, right) via render props? And upload that to my channel?
Thanks for this brilliant tutorial! Could you please make a tutorial of a dropdown menu or profile dropdown menu applying this technique?
@17:29 maybe try and target/animate the "upper right" and "bottom right" corners from the activator instance you got going, could also work if you instead set fixed values for your "upper left" and "bottom left" corners and so the only thing youd had to animate would be the right side.
My html won't connect with the scss for some reason
nice one gary ! you can fix the border radius issue by either apply the top left and bottom left radius and make it "!important", or you can apply border top left and bottom left to the header and overflowx hidden for the specific experiment..
why are you still using 'var'?
because it still works
There is one thing that needs to be improved to that animation. Right when it starts you can see the square's corners.
I really miss more content like that... React is super awesome, but I see some codes relying too much on components libs, and sometimes ending up making tons of hacks to make it look like what they want, instead of create a fresh component for it.
Helooo, would be great if you can cover uiux for e-commerce or marketplace
you placed a ternary in an if statement :d
You are the Best Teacher Thank you Sir..
Great video. And I really want to know about those aquariums and vivariums behind you!
I think it would be nicer to do this with web animations API instead of Gsap, Idk, I'll give it a try.
instead of borderRadius do the bottom right, top right etc - then you won't get the glitch
I don’t think need to make a prototype in any software if you are good at html css js just do it ones done
u better watch it at 2x speed
I'm the only one when I go to the video immediately put the like automatically?
LoL are u bot ?
You commeted exact quote in fireship video
This guy everywhere commenting the same comments!
I was wondering why I see this duplicated comment.
Yes and? You want a cookie?
Sorry newbie here. What is this used for? for mobile apps? or can I use these codes to create a slide out menu bar for a website on mobile?
I can imagine this as a FAB button (that one that float) in a ecommerce website with quick setup options like 'talk to support' + 'change currency'.. change language.. etc.
Gsap animation crash course portfolio website second part
very cool :)
42 line why if?
Great video!
I'm going to try and implement this into some elements on the shopify site i'm working on!
Congrats for 700k gary
Congrats on 700k 🥳🥳🥳
Adobe, XD lol lmao
Hi Gary! Could you please explain to me why you placed ternary operator in if statement?
var toggle = false (its a boolean data type)
in click event he said toggle = !toggle
it means opposite of false = true & true = false
if(its true tl.play() else tl.reversed)
@@PixelatedBrain7 Hi! Thanks for the reply. But my question not about "how to use boolean?".It could be "if(boolean) { do smth.. } else { do smth.. else }" or " boolean ? do smth.. : do smth.. else;" these two expressions are equivalent. And Gary used a mix of them "if(ternary operator);". I haven't seen constructions like this before. And my question is how it works?
that navigation is on roidz
Can anyone tell me how to follow him on discord??
Look at the description of this video
I dont know if this is a dumb question, but why do you use "VAR" over "LET"?
I think they work the same. "let" is a new Javascript version of "var".
@@mounir101 Yea i know that. Just wondering what his reason for it was.
@@mounir101 Nope they don't work the same "let" is block-scoped and "var" is global-scoped..........In this code there won't be a problem coz he is declaring variables globally, but it's always a good practice to use "let" or "const" hope this helps :)
@@ronir.kpradhan1785 Being I'm a beginner, I said I'm not sure. BTW. Thanks for the info. bro. I greatly appreciated.
@@mounir101 Cool man keep learning ✌
🥰🥰🥰🥰🥰
I also do videos about programming!😁
It's pronounced heroic-on
I just sub for more😢🍓