Curved line that draws itself while scrolling into view

Design help Animations & Interactions
1

Hi,

I have an image of a curved yellow line which I would like to animate. But I don’t know how for better results. Ideally I would like it to draw itself once to appear once im scrolling into view.
Please help…

Thanks

26%20AM
26%20AM1173×181 23.9 KB

Here is my public share link: LINK
(how to access public share link)

2 Likes
2

Hi @anna_odeh ,

To not have to use custom code, you could use a png image with transparency. You would have the yellow line but the rest of the image is transparent. You could then make good use of the native Webflow scroll into view interraction and target the opacity of your imge from 0% to 100%

Here is a link that might help you:

3

Thank you so much for quick reply.

I already tried this… but it looks weird :frowning: I have this line similar lines that connect multiple sections. It make more sence to make it as it draws itself. I can export the line as SVG. But how do I connect it to work with webflow: play only once and start the animation once I scroll into view.

Thanks

4

Sorry I’m still waiting for the reply… Is it possible to do? Thanks

5

@anna_odeh - You would have to write custom code to draw a line on the canvas and animate it. Not trivial.

6

Hi @anna_odeh,

It would be great if you could export it as SVG. I have an idea that might be helpful to you (I do hope it is). So first, just export it as a static SVG ( in case you are working in Illustrator go to File → Export → Export as → select SVG → Then from Styling: Inline Style ). Make sure that you have a stroke-path, not just fill.

Then use SVGator to create a self-drawing (path) animation. Yes, for that, you will have to purchase a subscription. I’m using svg animations on a regular basis so I have the annual plan, but in case this is just a one-time project for you, you can choose the monthly plan ($18/mo).
Once it’s done simply export the file from svgator. (it’s a single svg file with clean code)

Then just follow these steps to animate it on scroll:

  1. To detect if an element is in view, you need to calculate it’s position and make sure those coordinates are in the view-port. You could follow this ( How to test if an element is in the viewport with vanilla JavaScript | Go Make Things ) article which explains what you would need to do for this step.

  2. Once step one is done, you need to change the CSS animation play state property from ‘paused’ to ‘running’ using JS. A good place to start would be: Controlling CSS Animations and Transitions with JavaScript | CSS-Tricks - CSS-Tricks

Hope this helps! I had a similar project a few weeks ago :slight_smile:

Best,
Mike

1 Like
7

Thanks a million!!! I will try that :slight_smile:

9

Hey Anna,

how about using an overlay with bg-color which moves faster than the svg while scrolling?

This would simulate a drawing effect of the svg-line.

10

It’s actually not a bad idea… I will try it now :slight_smile: Thanks

1 Like