from opacity 0 to 1 and to 0 - perfect loop on a bezier path

[Tasty]

Hello everyone !

I'm having a problem with the perfect looping of the leaves.

This should play like :

we see factory
> the leaves gently show from opacity 0 up to 1 while traveling along the path
> before the end of path they should slowly go to opacity 0
> the leaves gently show from opacity 0 up to 1 while traveling along the path
> before the end of path they should slowly go to opacity 0

and so on and so on.

I managed to do some crazy workaround that almost works, but the opacity jumps to 1 after repeat as shown in the pen.

This looks like I'm missing something very basic here - if you guys know how to deal with this ANY help will be a huge help

wish you a lovely day !

PS
 <g id="leaves">

See the Pen dVoqPX?editors=1010 by Dikus (@Dikus) on CodePen

[PointC]

Hi Patryk

 

Is this what you needed?

See the Pen BwNGwp by PointC (@PointC) on CodePen

I used a from() tween at the beginning of the timeline to start the opacity at 0 and then fade out at the end. The position parameter is hard coded based on your 8 second tween, but you could certainly add labels for flexibility. I also reduced it down quite a bit by targeting the '#leaves groups' for the tween. That way you don't need all those separate timelines since the animation is the same for each leaf group. You could certainly use a stagger, cycle or a function based value for some randomness too. 

 

You had two values for yPercent (-450 and 50) in your tweens and I wasn't sure which was correct so I just left in the value of 50.

 

Hopefully this helps. Happy tweening.

[Tasty]

Hello Craig !

This was EXACTLY the case, thanks so much !

Swear I tried to solve it in similar way, had to mess something up, cus it wasn't working, then I got desperate and created that monstrous timeline combo ^_^'
Happy tweening to you !