Jump to content
GreenSock

webflow.be

Unfold logo text

Recommended Posts

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?

 

454709198_Schermafbeelding2022-09-16om12_58_41.png.0dca3437283a5e3a91acce4b34459d56.png

 

993293856_Schermafbeelding2022-09-16om13_00_16.png.2bff6c749fac9a661c66b285965ca380.png

See the Pen bGMqbpe by wouterverstuyf (@wouterverstuyf) on CodePen

Link to comment
Share on other sites

@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

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!

  • Like 1
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

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

  • Like 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.
×