We’d like you to meet SVGator’s newest feature: Player JS API – an event driven interface that gives you full-scale control over SVG animations created with our online animator. It is designed to be a command center that any digital creator who knows their way around basic coding can use to take programmatic animation to the next level.
SVGator is an SVG animation tool that has been centered around opening up the world of motion graphics to artists with little to no code writing skills. The natural move forward was to circle back to the crew that makes no-code tools possible: developers! The Player API is made to help developers do what they do best: solve problems using the most efficient methods (both time and effort-wise).
Check out our LIVE Demo and then read Player JS API’s documentation to explore all the ins and outs of this new way of controlling web/mobile animations exported from SVGator.
Here’s a brief look at SVGator JS API’s properties, methods and the event interface you can have control over:
Player Properties
player.currentTime
player.duration
player.hasEnded
player.isAlternate
player.isPlaying
player.isRollingBack
player.iterations
player.state
player.totalTime
Available Player Methods
Each player.method() call returns the player API object itself.
.play()
.pause()
.restart()
.reverse()
.toggle()
.stop()
.ready(callback)
.seek(offsetPercent)
.seekBy(offsetMs)
.seekTo(offsetMs)
.destruct()
Available Player Events
play
pause
restart
reverse
stop
end
keyframe
Note: The first 5 events are triggered from user actions as well, not only from API calls (i.e. if the animation starts on click).
If you’re looking to create an engaging user experience, the tool’s settings for interactive animation are a considerable asset. But if you are aiming for a higher complexity and a broader range of interaction for your graphics, programmatic animation is the way to go.
What next?
Check out the basics on how to animate programmatically and learn more about how to access the Player object and how to synchronize events.
Find out how to trigger an SVG animation manually using JavaScript.
Start your next project and use extensive programmatic control to create stunning interactive animations easier and faster than ever before!
New to SVGator? Check out this list of its latest features or get a crash course on the best practices from the tool's design team including the founding members.
Keep in mind that there’s no third-party software/plugin that you need to start using SVGator to its fullest potential. It is a browser-based SVG animator that exports lightweight files for both web and mobile platforms (.svg, .js, and .dart).
Have any questions? Want to leave a suggestion? Wanna chat about how awesome animating is? Let’s connect on Facebook, Instagram or Twitter!
Top comments (0)