Skip to main content
Participant
September 13, 2023
Question

how to create this gaming line animation effects when score points

  • September 13, 2023
  • 2 replies
  • 491 views

Hi,

Ive been trying to create an effect similar to the one shown in a match 3 game i saw
this is a link to the website: https://playablefactory.com/our-works/ - the game is on the first row, second to the right
whenever the player scores, animated lines are moving towards the score board and points are added.

i animated a path, and used stroke properties. still, it looks meh. heres my animation: https://vimeo.com/863875062?share=copy#t=0

This topic has been closed for replies.

2 replies

Community Expert
September 13, 2023

You can use the screen capture video as a guide for the shape and editing of the speed graph. Start by dragging both of the speed graph handles to the bottom on the End property, then drag out the handles to accelerate and decelerate the ending speeds while checking the progress. You should see a fairly even acceleration and deceleration.

 

Then, do the same with the Start graph. Both starting values to zero, then drag out the end handle until the speed matches the end of the line. It should take you just a couple of minutes.

 

Andrew Yoole
Inspiring
September 13, 2023

You need to add Tapers to your stroke so that the lines taper from and to their origin points.  Then use Trim Paths to control how they are revealed and disappear.  Quick tutorial here:

 

https://www.youtube.com/watch?v=fReYweptmtM

 

Participant
September 13, 2023

Thanks so much!
It does make the tips a bit different in width but to an extent, 
My main struggle now is the motion. Im playing with the speed graph and all but I dont seem to manage to get it to look close to the example. in the eample it strewtches, than disappears in a cool carttony way. I do play with the trim path parameters but suspect there might be something else in play here?

thnaks in advance!