New Feature request

[jawwad22]

Is there way we can define the starting point of animation, like i want my animation to be sync with a time (minute), like if timer is on 30 second, then animation start from 50% of its path,animate as my timer moved and stop as my timer stop

is this possible?

[73R3WY]

Hi @jawwad22 , thank you for opening this. Based on my understanding of your request, I think a way to make this possible is for you to define multiple d s (path) and dynamically change the duration property of your AnimatedSVGPath. As for the sync with timer, the SVGs are animated indefinitely without control for pause/play scenario. I haven't explored that yet.

[jawwad22]

Hi, Thanks for replying, Ok ill work on your idea, let me give a update about it

[jawwad22]

i am unable to implement your idea, can you help me change the code according to your idea

const currentSecond =DataStore.getState().general.currentSecMin.sec

const withCheckPath = M${Size.widthInP(50.1)} ${Size.heightInP(1.88)} H${Size.widthInP(88.1)} Q${Size.widthInP(94.3)} ${Size.heightInP(2.2)} ${Size.widthInP(94.8)} ${Size.heightInP(5.7)} V${Size.heightInP(17.4)} Q${Size.widthInP(93.7)} ${Size.heightInP(20.6)} ${Size.widthInP(88.2)} ${Size.heightInP(20.7)} H${Size.widthInP(12.8)} Q${Size.widthInP(7.2)} ${Size.heightInP(20.1)} ${Size.widthInP(6.5)} ${Size.heightInP(17.5)} V${Size.heightInP(5.7)} Q${Size.widthInP(6.9)} ${Size.heightInP(2.5)} ${Size.widthInP(13)} ${Size.heightInP(1.88)} H${Size.widthInP(50)};

 <AnimatedSVGPath
						strokeColor={isDarkBlue ? "#2A9DFF" : "#B3D6FF"}
						duration={60000}
						delay={1}
						strokeWidth={2}
						strokeDashArray={[867]}
						height={Size.heightInP(22)}
						width={Size.widthInP(100)}
						d={withCheckPath}
						loop={true}
					/> 

[73R3WY]

@jawwad22 I tried, but I still wasn't able to achieve your goal. I will implement another way.

[jawwad22]

Hi, actually i accomplish the goal but unfortunately withe help of react native Animated way =)

[73R3WY]

#47