This tutorial is great, but I'm having an issue: when I apply my splittype it's getting rid of my css styling on my h1. Tried messing around with css inheritance but it's not fixing the issue :/
very nice thank you! I f you wanted to animate the second name to use a different clip-path or transform: translateY to appear from a different direction, how would you target those elements for the second name since "splitType" utility slaps the "char" label on all the characters :/
I think I mention somewhere in the tutorial that I'm using GSAP here because presumably if this were a full project, you'd benefit greatly by all of the other features and time saving techniques that GSAP offers.
Your tutorials make me want to dive into some coding (yeah I love design more but still :), thank you Gary! I see there’s an “XD” indicator next to a folder icon at the footer/bottom bar of the vscode window, is that an XD plugin or..?
i recently dropped all adobe products after years of use, ill tell you was the best decision ive ever made, adobe hindered my creativity, before dropping them i stumbled on threejs, react three fiber, gsap and theatrejs which will allow you to import custom 3d designs from blender3d which is also free and allow you to build websites in 3d environments.. man your design skills will pass anyone who designs sites using adobe products,. you can get much better functionality and cooler app like threejs than youll ever get paying for a subscription with creative cloud. diving fully into javascript and typescript has totally upped my game. and i dont have to pay one dime. also Vscode was made before XD . il tell you start with learning the programs mentioned above and below you'll be excited every morning to learning java and typescript so you can use these amazing programs xd has nothing on and .
best part all open source. need vectors use inkscape, need photo shop edits use gimp, need 3d renders or models use blender3d , need websites use vscode and threejs or react three fiber than you can integrate the gsap plugins easily.
@Trebaltek Recs Thank you for mentioning your thoughts and hints about 3D assets. I do like using Adobe CC products since I like the ecosystem and apps' integration also they pretty much set the standards in the industry and I see some benefits of that while applying to jobs. But it also comes to personal preferences. I haven't been coding for a long while but vscode is my go to tool when I need to edit some html/css, UI related code etc. It might be made before XD but it doesn't change the fact that there might be some plugins for some integration/quickly getting some design aspects to css etc. Thank you for your reply again :)
@@vladyslavnechytailo2586 Thank you! Somehow my "char" class is not getting its properties. Could you please give me a hint how to write the css classes?
I'm really frustrated about the fact that no one is pointing out that he is just looking up some code in his other monitor and then just rewriting it in the main monitor so you can follow along... Why is it a tutorial if you are just blatantly "copying" code? The content is amazing, don't get me wrong, but imagine a professor looking at his notebook the whole lesson just so he can teach the students something that he didn't even learn... You are just better of making a post on Reddit or CodePen and everyone can just copy the same code as you and not even bother watching the 10-20 minute videos... Very bad practice!!!
Hes just showing how to use It and explaining us the process. I learned and that works for me. Dont know what you criticize so much, its only a RUclips video, hes not your personal teacher.
Yo I just posted the same thing yesterday but as a gsap.from() animation! haha great minds think alike 🧠 I see this reveal effect everywhere these days.
![NLE Choppa - Or What ft. 41 (Orchestra Mix) [Official Music Video]](http://i.ytimg.com/vi/biOFASEgSOM/mqdefault.jpg)
Hey all, this Monday (October 3) is the 2 week early access period to my nee interactive CSS course! designcourse.com/css
which software are you using for the annotations during the tutorial?
I’ve looked at a lot of videos and done a lot of training on GAP and your videos are very efficient and to the point. love it!
Essential and flawless: good tutorial! Thank you!
Essentially flawless hair
I always used a parent div to do the mask thing with the text, but with clip-path is so much easier...
Now how would you add scroll trigger to it??
good tutorial! Thank you!
couldnt you have done an overflow: hidden on the h1 instead of the clip path no?
Yes, that would’ve make a lot more sense.
Liked and Subscribed !!
The same text can be possible on scroll means the text animation should do in the viewport
Very good tutorial
Hello
Thanks for all the awesome video you're doing. Did you make video about Angular with GSAP ?
great tutorials man ... but i have a question the clip path u put is supposed to show all the text, then why in this case it's hiding it
how do you do this in react?
when i am increasing the size of the text the mask is not positioned properly why ?
good shit thank you my guy
This tutorial is great, but I'm having an issue: when I apply my splittype it's getting rid of my css styling on my h1. Tried messing around with css inheritance but it's not fixing the issue :/
i have the same issue, did you find a fix?
my office PC's desktop fan sound it's look like want to EXPLODE when i opened GSAP main website
Can someone help me in animating the exit of the same text after 2 seconds? like text enters from bottom and exits to top
Will this work for text inside an SVG?
Thank you! An alternative was to use gsap.from. The .char css then becomes useless.
@designcourse any reason you are using splittype rather than the gsap split text plug-in?
Because GSAP SplitText is a paid plugin
what vscode theme do you use ?
How can I change the default class?
Oh, like so:
const greetingFormula = new SplitType('#greetingFormula', {
types: 'chars',
charClass: 'greetingText',
});
@@charlesxavier77 Thankyou so much brother.
very nice thank you! I f you wanted to animate the second name to use a different clip-path or transform: translateY to appear from a different direction, how would you target those elements for the second name since "splitType" utility slaps the "char" label on all the characters :/
target the ones you want with a more specific css selector i would guess. Like a pseudo selector
After long time with coding
Expect more in 2023!
I'm having serious line height issue with this font family.
except split text is a premium feature that costs $101 per year! :(
Nice one! But isn't it easier just to do it with CSS instead? Something like :nth-child(n)+nth-child(n+1) {animation with a delay here...}?
I think I mention somewhere in the tutorial that I'm using GSAP here because presumably if this were a full project, you'd benefit greatly by all of the other features and time saving techniques that GSAP offers.
How about the delay? You would use nth-child to calculate the delay? Doing it manually would be big time waster
@@kristijanpirkovic9594 use variables
Why do you like pain 😪
@@bahaedakka please could you reproduce on codepen?
Caroline Mountains
Your tutorials make me want to dive into some coding (yeah I love design more but still :), thank you Gary! I see there’s an “XD” indicator next to a folder icon at the footer/bottom bar of the vscode window, is that an XD plugin or..?
i recently dropped all adobe products after years of use, ill tell you was the best decision ive ever made, adobe hindered my creativity, before dropping them i stumbled on threejs, react three fiber, gsap and theatrejs which will allow you to import custom 3d designs from blender3d which is also free and allow you to build websites in 3d environments.. man your design skills will pass anyone who designs sites using adobe products,. you can get much better functionality and cooler app like threejs than youll ever get paying for a subscription with creative cloud. diving fully into javascript and typescript has totally upped my game. and i dont have to pay one dime. also Vscode was made before XD . il tell you start with learning the programs mentioned above and below you'll be excited every morning to learning java and typescript so you can use these amazing programs xd has nothing on and .
best part all open source. need vectors use inkscape, need photo shop edits use gimp, need 3d renders or models use blender3d , need websites use vscode and threejs or react three fiber than you can integrate the gsap plugins easily.
@Trebaltek Recs Thank you for mentioning your thoughts and hints about 3D assets. I do like using Adobe CC products since I like the ecosystem and apps' integration also they pretty much set the standards in the industry and I see some benefits of that while applying to jobs. But it also comes to personal preferences. I haven't been coding for a long while but vscode is my go to tool when I need to edit some html/css, UI related code etc. It might be made before XD but it doesn't change the fact that there might be some plugins for some integration/quickly getting some design aspects to css etc. Thank you for your reply again :)
i hate when yt deletes comments of people just helping other people. but im sure you still see my comment in your notifications
@@AkinsRealm strange you tagged @UCmoOilpjgciY57JrIdoOPlA is that what my name looks like to you? thats not even my handle.lolol weird
Splitype alternative for Reactjs?
Put it in useEffect
useEffect(() => {
const title = document.querySelector("#mytext");
const myText = new SplitType(title)
gsap.to(".char", {
y: 0,
opacity: 1,
duration: 1,
stagger: 0.05,
delay: 0.2,
});
})
@@vladyslavnechytailo2586 Thank you! Somehow my "char" class is not getting its properties. Could you please give me a hint how to write the css classes?
why ur looking your 2 monitor a lot
It's a reference code monitor. You wouldn't want me to wing live coding, it's never buttery smooth for anyone.
@@DesignCourse I got u
third
first😅
second!
Little tip guys don't just watch the video try to do it first then watch the solution
I'm really frustrated about the fact that no one is pointing out that he is just looking up some code in his other monitor and then just rewriting it in the main monitor so you can follow along... Why is it a tutorial if you are just blatantly "copying" code? The content is amazing, don't get me wrong, but imagine a professor looking at his notebook the whole lesson just so he can teach the students something that he didn't even learn... You are just better of making a post on Reddit or CodePen and everyone can just copy the same code as you and not even bother watching the 10-20 minute videos... Very bad practice!!!
it's probably his code tho
I saw that too but it doesn't mean to me much. It is just a way of earning money🤑
you should show us how tutorials should really be made, Mr. Bad Practice. ohhh... wait, there aren't on your channel, very bad practice
Hes just showing how to use It and explaining us the process. I learned and that works for me. Dont know what you criticize so much, its only a RUclips video, hes not your personal teacher.
It just shows he’s actually done some prep and made sure the code works before filming the vid…
Yo I just posted the same thing yesterday but as a gsap.from() animation! haha great minds think alike 🧠 I see this reveal effect everywhere these days.
Your tut was much more helpful..