SVG path animation triggerd by scrolling with different sections

[JoussenKarliczek]

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

[Rodrigo]

Hi @JoussenKarliczek and welcome to the GSAP Forums!

 

Thanks for being a Club GSAP member and supporting GSAP! 💚

 

This is not the simplest thing to achieve actually.

3 hours ago, JoussenKarliczek said:

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

Honestly I could't tell you, that particular starting point means when the top of the trigger element plus 650 pixels reaches the bottom of the viewport, this largely depends on the layout you have more than anything else.

3 hours ago, JoussenKarliczek said:

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

That's because each part of the SVG is in it's own section so you'd have to make the end point of the previous section's ScrollTrigger match the next section's ScrollTrigger start, for that you can use the previous method:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/previous()

 

3 hours ago, JoussenKarliczek said:

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?)

One option that pretty much encloses all three questions is to create a single SVG element, pin that element and then also animate the viewbox attribute as well as the path being drawn, @Carl goes into a lot of detail about it in this video:

Also @PointC has this great article on the subject:

https://www.motiontricks.com/basic-svg-viewbox-animation/

 

I think these threads contain some demos that could help you with this:

 

Finally I'd strongly recommend you to completely remove ScrollTrigger and focus on getting the SVG animation working as you expect, then add ScrollTrigger to the mix, since all ScrollTrigger does is to update the progress of a GSAP Tween/Timeline based on the scroll position, nothing more.

 

Hopefully this helps.

Happy Tweening!

[JoussenKarliczek]

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.

[Rodrigo]

Hi,

 

Not really TBH. What you're trying to achieve is not the simplest thing to do and adding stuff through a CMS only brings more complexity to it since you need a 100% dynamic solution for this.

 

As I mentioned before the issue resides in the start and end points of each ScrollTrigger, having different sections for the SVG only adds an extra wrinkle to this.

 

Here are a couple of demos that use different approaches to this:

See the Pen zYrPrgd by creativeocean (@creativeocean) on CodePen

 

See the Pen jOryjNX by oliviale (@oliviale) on CodePen

 

Finally this mostly boils down to your layout more than anything else. I forked your demo and added different indents and ids to each ScrollTrigger instance and you can see in section 2 your SVG is waaaaay too tall, it goes beyond the final spacing element. The mask and path for that section also is the same height but the actual drawing is smaller, that's why that section's draw animation finishes before the end point of the ScrollTrigger instance is reached:

The light blue rectangle is one of the SVG tags for section 2, but the path finishes quite before that, that's why you're getting those pauses between sections.

See the Pen QWoYQQQ by GreenSock (@GreenSock) on CodePen

 

You can see that the end point for scroller 3 is way after the animation already ended

 

Again this boils down to HTML/CSS/SVG and not a GSAP related issue and is beyond the scope of the help we can provide in these free forums. You have to find a way to make your SVG to dynamically adapt to the dimensions of the content and the screen.

 

Good luck with your project!

Happy Tweening!

[jdhadwin]

This community is AWESOME

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

[Rodrigo]

Hi,

 

Is great to hear that you were able to solve it! 🥳

 

The site looks amazing, really nice animations and story telling, excellent job 👏

 

Happy Tweening!