[SVG path animation triggerd by scrolling with different sections]

@Rodrigo - thanks again for your tips and answers. It´s been a while now but we finally came to a solution. We realized the "growing line" with a background-image. That was the easiest way to achieve it. As I said the challenge was as well to combine that with a CMS. If you are interested in the final solution - her it is: https://geschichte.diakonie-stetten.de/ 

[SVG path animation triggerd by scrolling with different sections]

Thanks @Rodrigo for your fast reply.

 

I checked the resources but I don´t know how they can help me yet.

 

The reason I created it with sections is that I want it to be as flexible as possible. Later I want to use it in a CMS where the others can fill content as they want. The "circel-line" should always stay as a separator between content-blocks and the content-blocks should be variable - left or right - and in the length. 

 

I think it´s already a quite good solution as it is.

 

The biggest problem I see at the moment is the starting point which I think with "`${window.innerHeight / 2} bottom`" is quite fine and to ensure, that the animations start/end with no break in between.

 

Can you think of other tricks to make that better?

 

Thanks in advance.

[SVG path animation triggerd by scrolling with different sections]

Hi,

 

as you can see in my codepen demo: I created an example where I try to let a svg grow while scrolling through a website.

 

I have following questions or need tips on these topics:

 

1. I realised the demo with 

start: '+=650px bottom',

- is there a better way to define the start of the animation?

Problems: if I try it with top,center or bottom - I see the start of every section already

 

2. there is a small animation-break if you reach another section - how could I get rid of that break?

 

3. is there another way/technique to extend the text-area with a growing SVG rather than take a +2000px SVG? (create a SVG via script?)

 

Thanks for any tips or suggestions!

See the Pen bGZOpjj by joussenkarliczek (@joussenkarliczek) on CodePen