JoussenKarliczek

@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/

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.

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!