webflow.be Posted September 16, 2022 Share Posted September 16, 2022 Can someone help unfold a logo (svg letters) from the center outwards. You must start with a combination of the 2 letters E in order to arrive at the word Entyre. The 2 red arrows show the direction. Is there a similar approach/tutorial somewhere? See the Pen bGMqbpe by wouterverstuyf (@wouterverstuyf) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 16, 2022 Share Posted September 16, 2022 @webflow.be welcome to the forum! Creating a clean SVG is half the work when working with SVGs. I have no idea where your SVG came from, but it was a mess for such a simple file (some programs will do that ). I've cleaned it up a bit, so that it is just the 6 letters in the SVG. You could run your SVGs through SVGGO to help clean it up automatically, but I did it by hand and then loaded it in Figma to modify it visually. What I've coded is giving all the letters a transform on the x axis to the middle of the SVG. This looks like complicated code, but it is just getting the width of the SVG and the X offset of all the letters. If you then do a .from() tween they will animate from that position to their original position. From your slides I think you want only the two letters E's to be visible at on page load, but I'll leave that to you. I would suggest giving all the letters a class to indicate if they need to be visible or not and then add another tween that makes these letters visible, you can play with the position parameter (take a look at the docs) to have all the tween start at the same time. If you are stuck be sure to post back here, but nobody learns from copy and pasting code , so I challenge you to see how far you can come! See the Pen yLjMeEJ by mvaneijgen (@mvaneijgen) on CodePen Veel geluk en succes! 5 Link to comment Share on other sites More sharing options...
webflow.be Posted September 16, 2022 Author Share Posted September 16, 2022 Wow, this is great @mvaneijgen , thx a lot for this setup! From here I should be perfectly able to do what I want I'll post the result when I'm done. Thanks again! 1 Link to comment Share on other sites More sharing options...
webflow.be Posted September 21, 2022 Author Share Posted September 21, 2022 As promised, I'll post where I got it. In itself it works, but most likely there is room for improvement here and there. So it has become a preloader. It would be nice if the entire logo is initially invisible, and becomes visible along with the icon fading out. Thx for the feedback See the Pen QWrMqeN by wouterverstuyf (@wouterverstuyf) on CodePen 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted September 22, 2022 Share Posted September 22, 2022 Hi, No need IMO, to create from animations for the elements you want to fade in, use CSS to hide them and then fade them in, something like this could help: See the Pen zYjdRdN by GreenSock (@GreenSock) on CodePen Happy Tweening!!! 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