Share Posted February 17, 2022 Hi, even is not the best animating text shadows, is there any way to achieve something like the letter A which they made here:https://advanced.team/ (in this case they used webgl) using only css // or svg? I tried adding a mousemove parallax, but seems "too fake" as shadows are fixed. (Looking at the single letter demo) Guess there's any math magic 🍀 I did also another attempt here too, combining text and a card, changin values.. and trying changin the shadow on mousemove too, but no luck as the math behind is not smooth . See the Pen ZEavOZZ by DedaloD (@DedaloD) on CodePen See the Pen Rwjxoxm by DedaloD (@DedaloD) on CodePen Link to comment Share on other sites More sharing options...
Solution Solution Share Posted February 17, 2022 I think faking 3D with shadows will be hard because of the perspective. But I'm sure someone has done similar to that before on CodePen. When I need to see how an effect is done, CodePen is always the first place I search. 4 hours ago, Dennyno said: (in this case they used webgl) using only css // or svg? So when you are going to learn WebGL? 😉 I'm not saying it will be easy, but it is definitely worth it. It opens up whole new world of animation possibilities. 1 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 17, 2022 Me too, I guess that it's all about math and calc between the shadows and the pointer distance. The demo I made quickly with the card above, has the wrong syntax values, but I'll find a way.. or I'll give up on testing Link to comment Share on other sites More sharing options...
Share Posted February 17, 2022 You could always try making a 3d shape in CSS. This looks interesting... http://tridiv.com/ 1 Link to comment Share on other sites More sharing options...
Share Posted February 18, 2022 Concerning your thread title "3d lettering without webgl" and for those with similar interest in the future. Some may find interest in ztext.js for simplicity or even Zfont that's made for zDog. Either of those might meet your requirements and both should easily play nicely with GSAP. 3 2 Link to comment Share on other sites More sharing options...
Author Share Posted February 18, 2022 Wow guys, thanks for poiting me on the right way! Both are what I was looking for! The winner, for letters, is ztext.. but I'll test whole of'em. 🍀 🏆 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now