Control the revealing process/ the duration of the animation during scrolling

[NikitaKurnosov]

Dear GreenSock Team,

 

I'm diving into GSAP plugins and whole animation things for a while and face with the question, I would appreciate if you can help me with it.

I'm trying to control the animation process(the speed/ the duration) of SVG path revealing during scrolling.

 

That example was created based on yours which I found in the showcase section and I modified it a bit.

It uses ScrollTrigger/DrawSVGPlugin/MotionPathPlugin plugins.

I'm trying to control the circle, which is linked to the SVG path, to keep it always in the viewport. Now, it can be bellow the viewport at some scroll positions.

So, for example from 0% to 30% of the scroll height I would like to see the circle goes slow, then to increase the speed from 30% - 50% and so on, the main idea is to control the process of reveling that path.

 

I was trying to play with duration/scrub/end params, but I was able to change only the whole animation process but not the specific part of it.

 

I would really appreciate your support with that question!

Thank you in advance!

 

See the Pen vYmMaXy by kurnosovnikita (@kurnosovnikita) on CodePen

[GreenSock]

I may not be understanding your goal correctly, but here's an approach where we put all the animations into one paused timeline and then use ANOTHER timeline to animate that timeline's playhead with various durations between the sections so that you can make portions take more or less time proportionally (using durations):

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

 

Notice I used position: fixed on that <svg> and just animated the yPercent to give the appearance of scrolling, but in a way that's not directly 1:1 mapped to the scrollbar. 

 

If all you wanted was to keep it in the center of the screen, you can do this: 

See the Pen mdmgaMz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

But I'm pretty sure you wanted the first one, not the second. 

 

This post may also be helpful: 

 

I hope that helps. 

[NikitaKurnosov]

Cool!

That exactly what I was looking for!

Both examples are helpful.

 

Thank you for your help!