How could i achive this brush stroke transition?

Design help Custom code
1

Iam a begginer,but iam reallz trying hard figuring how to create a brush stroke animation when i click on my nav menu.

Recently i found this code that looks really similiar to my idea https://codepen.io/team/craftedbygc/pen/LkLLEr .

I had an idea to use a sprite like in that example, but could figure out how to execute it.

Thanks.

2

For this you can use SVG brush as one image, then animate them in the header on load. You’ll use the size effect. I don’t think you’ll need code to do this. Think of it as a scroll bar/percentage bar. As you scoll down the bar moves across the top to indicate how far the user has before viewing total page. This would just activate on load and continue until all are finished.

3 Likes
3

hi, thanks for the response
Could you please show me an example, its hard for me to imagine it.

4

Give me a bit, I’ll create it and shoot you a message.

5

@Alex_Nguyen, view the last bottom section to see the svg brush stroke animation:
https://preview.webflow.com/preview/gj-project-backup?preview=fe3759b3f1b4ca487673f8b2881e046c

Of course, you would reverse the direction to alternate, but you’ll get the idea. It will need a specific type of svg brush. I’m using Affinity Designer, but in PS CC there’s brushes you can download. Just have to find one online you like.

1 Like
6

i get it from the site you linked, but it uses a png, and iam little bit confused how to use sng, like should you specify the with and the height so it would focus on first part of the animation and than scale?

But cheers for the response, very helpfull.

7

Sure just create SVG’s in Affinity or Photoshop or Inkscape. But make the canvas to: width-2500, height-200px. Then add a long rectangle box. Next, add a brush effect to that rectangle. Give it a color. Save as SVG, like barline-left & barline-right. So the left box will have the end of brush mark pointing from right to left. The other is opposite. (You’re only going to create 2 rectangles)

In Webflow, Insert 1 section with no styles, then add 4 or 5 divs, depending on the height needed for the section. Make each one with height necessary, then use combo class. First, Bar 1, then combo each with A, B, C.

On a section add the SVG as a background image, centered, to cover.

If you want a video or want to speak with me on phone. I can do a screenshare and show you. Up to you.