Thank you. The World Archery Federation is a really good client to work with, which is key to achieving good results.
2 Likes
What i saw is awesome! Great job!
Just a question: how does the integration between timing system and cg graphic works? Are you using live protocol such as websocket to get realtime infos?
The event-management-system used in archery is called Ianseo (https://www.ianseo.net), and it’s open-source too! 
We’ve build a custom NodeJS -based controller which uses a REST-interface to pull data from Ianseo (we also receive realtime data through pushes from Ianseo).
1 Like
@Jesper or @hummelstrand is it possible for you to share the subt as example on how the bodymovin and lottie is integrated?
Wow! And what software have you used to animate SVG graphics using GreekSock framework? Only codelines? Or something like Edge Animate or Hippo Animator?
In my free time I also watched other videos of WorldArchery competition and I saw some schedule and leaderboard graphics: How do you add rows to table fixing their own size dynamically after getting datas from Ianseo? I think using greensock way to morph shapes, right?
Everything is animated in code. For the main scoreboard we morhp shapes. The tables are a combination of scaling circles and alpha masks (heavy…).
The new head 2 head and distance to target boards are not done with SVG, but 100% GSAP and CSS filter animation! They look even better if you ask me.
Thank you so much @Jesper, I got it! You did a good job!
Off-topic question: what is the font family you used in these graphics?
Impressive job, I work for a technology company applied to sports, could you help me? Do you use some framework such as vuejs or react to make the templates, what kind of library do you use for the animations of the brackets? Thank you very much
Our newer projects use Vue, and I’m quite happy with that.
The brackets are all driven by GSAP, and specifically the SVG morphing plugin. We lay out the start- and end-states of each competitor, then GSAP morphs between them with that smooth easing and everything.
Thanks you very much jesper awsome work. so all the flags and images are SVG ? why ? thanks for your time
This project is quite old, and at the time SVG was only solution (except Flash) to get perfect font rendering. Also, it gave us the morphing system “for free” which lead to the entire design principle of the entire package. All “cells” in the scoring board are unique shapes based on the radius of curves spawning from the origo, to mimic the rings in an archery target. Same goes for the curves in the brackets and all other tables too. When any cell/column move, the radius morphs during the animation.
1 Like
one more question and sorry for asking, how do you handle the dimamically fonts text with any library or jquery code ? thanks
In this case there’s vanilla javascript to draw the text as SVG. Today in recent projects we draw text as HTML-text and use Vue.js as a framework for both layout, state-handling, dynamic updates/interactions and animations (with GSAP).
1 Like
Thanks for sharing Jesper, amazing job as always from Superfly!
Hi @Jesper , good morning.
i have a question , i am working for a shooting event and would like to now , what do you do for the coordanate of the dartboard ?? do use any library or canvas ?? i would love to do something like this
i show this on your video and is very interesting , how can i do the same or similar
thanks so much
Hi.
This is basically Canvas and custom made code.
Good luck on your graphics and the production!
1 Like
nice , i though was canvas , thanks for the info.