Jump to content
Search Community

Unfold logo text

webflow.be test
Moderator Tag

Recommended Posts

@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! 

  • Like 5
Link to comment
Share on other sites

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

  • Haha 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...