Streaming live at 10am (PST)

Made a preloader for my (work in progress) portfolio site

Just a quick post for you guys and gals on the forum,

Not built in Webflow but thought I’d share what I’m intending to use as a loading gif on my portfolio site, its just the favicon I’ll use for my site (my initials) with a bit of after effects animation.

Any thoughts welcome, especially anyone who thinks its pretentious and involves too much design douche baggery! (I saw this post: crop up on the forum recently, I winced a little when I read the line “your logo is a monogram with the first letters of your first and last name” oops haha)


Hey nice animation, what did you use to achieve it?

I have things to say, I hope is doesn’t make me a design douche :wink:

Ok so, in terms of motion design, you have all your animation set, now you need rythm, pace, rugosity… For the moment all your curves animate exactly at the same time, for the same duration, with the same easing mode. And you can alter that a bit to… “tell a story”. Yes I said it, and I admit I absolutely hate the kind of article you’ve linked. It’s usually rude, and full of bold statements. Why are people so angry at others, I’ll never understand :slight_smile: So don’t listen to this guy and tell stories, even if it’s only on an animated logo.

So, the J, the S, the circle around, that’s what appears to me as the natural order. I would draw the J, then start the S when reached half or 2/3rd of the J, and start the circle when the S is half drawn or at 2/3rd. I would slow the speed of drawing the letters by 25% and let the speed of the disc drawing untouched. Most importantly, I would reverse the curve drawing of the J ans S for them to appear drawn manually. The clockwise circle drawing is perfect though.

That would make J then S then circle around. Like if you where drawing it by hand very wuickly, with overlapp of the gestures.

For the reverse animation, things can be speed up a bit, undrawing the J then after half, the S then after half, the circle, fastened to finish at the same time then the S or very shortly after.

Hope that makes sense to you :slight_smile: It’s already nice as it is but it will look good with those irregularities. More organic, and this is what youre looking for when you do motion design: organic feelings.

1 Like

I really like it - it’s shlick!

I like the suggestions @vincent made too

what did you use to make it?

cheers Vincent glad you like it! and thanks @Diarmuid_Sexton also! I used After Effects to animate it, for the circle I just used trim paths, for the JS I drew a super thick stroke following the line of each letter on top of the letters, then used it as a mask path for each letter. Then I used trim paths again on the stroke to make it to give it the ‘drawn’ effect.

And thank you tonnes @vincent for the tips, I’m going to get on that straight away! you certainly know your stuff about motion, and I totally agree making those tweaks will make it more organic and fluid.

Also I noticed that Google has just released some new guidelines for Material Motion at definitely worth a look!

p.s. agree with what you said about that article, seems to be a breeding ground for p***ed off Silicon Valley types to rant about how annoyed they are with the design profession, why can’t we all just cheer up! ha

Good, so you can move the keyframes around now : )

I read them too, they’re not far from what I said aren’t they? It’s about getting a natural, real world feeling.

What I don’t get is the rudeness of posts. I’m using a lot of dirty words in my speaking, in real life, I’m that type of guy, but when I write publicly on the internet? Why would I do that? It seems a lot find that is a cool thing to do now, but really it makes people look awful in my opinion. What’s sad is the ton of “Spot on” “Nice work” comments. This trend is not ending anytime soon. To me, put a single “fuck” in an article and your purpose is ruined. When Louis C. K. rants, it’s so funny. But no one in the design industry is Louis C. K. and it’s no ones’ job to rant. What is funny is that the article is about designers having a pretentious posture, and it’s written in the most pretentious way :slight_smile: In the end, if you have 2 squares to place on a white page and want to tell a story with them, you’ll probably do a better job than the one who doesn’t. Story telling is a state of mind, a practice, a workflow, a good habit, not a job title.


also quickly redid the animation from your tips :smile:


Awesomeness !!! :wink::+1: . . . . .

1 Like

I am a video editor, not a motion graphics designer so I couldn’t give you useful critique on the animation, but I do like the edit.