![]() ![]() So u can create a video with, let’s say, a device rotating and the faster u scroll the faster moves through the video (so the device rotates faster) or the oposite. I’ve also seen videos that go forwards or backwards based on scrolling too. What about other effects based in scrolling too? Like movements from left to right, right to left or rotation. What about a zoom effect? Not like the one in the animations now, but a zoom in or a zoom out in the images of a square based on the scrolling. With 2 layers of images in squares you would be able to create some pretty awesome parallel effects. What about a parallel effect? So images in squares move at different speed than the rest of the website. But I couldn’t help but think that these could be cool features. And I already love Sparkle the way it is. I’m not a programmer and I guess building this stuff into the app will take a lot of time and effort. I find animations to really make the websites look better and more professional looking. I see a lot of people asking for new features but me… well, I just want to ask for new animations. ![]() Still got questions? Send us an email to and we will get back to you as soon as we can.Hi there! Let’s just start by saying how much I LOVE ‘Sparkle App’. Now your SVG will animate every time you dispatch a click event. To make sure svgatorPlayer is ready when the custom event triggering the animation occurs, one can wrap the previous call in the player's ready method: svgatorElement?.svgatorPlayer?.ready(player => ay()) īefore the JS Player API release, one could achieve the same effect using a roundabout solution, namely exporting the animation to start on the click event, then dispatching the given event on the SVG node, as follows: svgatorElement.dispatchEvent(new Event('click')) You can start the animation triggered by any custom event using the JS Player API, by simply calling the play method: svgatorElement?.svgatorPlayer?.play() Use the id to access the SVG element: const svgatorElement = svgatorDocument.getElementById('e5478wvxh25l1') Please note that the id property will be different in your case, so change it accordingly. To be noticed though that this approach will only work within the same domain, different domains following to be handled in the next release of the API.Ĭopy the ID from the beginning of the exported SVG file that looks like this: Then access its internal document: const svgatorDocument = ntentDocument || Next, let's find the given object from JavaScript: const svgatorObject = document.getElementById('animated-svg') It includes a basic http-server that loads the index.html with an animated SVG and a button that triggers the animation.įirst, let's include the SVG animation within an object tag: Please note that (due to security limitations) the JavaScript commands below will not run on a local index.html file but only through a web server, so we put together a minimalist example called trigger-animation, published on GitHub, which You can clone. This post describes how to start Your animation mapped to a custom event by using SVGator Player JS API, when the animated SVG is included in an object tag. Update from 2022 March:For a complete control over your animation from JS code, see SVGator's Player API: ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |