-
-
Notifications
You must be signed in to change notification settings - Fork 16.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SVG animation #1258
Comments
Probably related to #1239 |
check out what i did in my reveal-template project. if you don’t want to use the whole thing (although i’m pretty fond of it), just use the code as plugin or inline (you’ll have to run it though e.g. babel first, though, since it’s ES6). as the comment at the top explains, it accepts if you use inkscape’s XML edior to add |
That seems to fit exactly my needs !!!! Unfortunately I am really bad with JS and I only want the code inside data-src-svg.js, but when I add it to index.html and call Could you help me with that ? |
How it handles when there is multiple fragments in the same svg file ? |
about your second question: multiple fragments are handled fine :) and about the first: it’s unfortunately a bit involved to get it to work without some other stuff.
|
Thanks ! I don't really understand why you need to compile javascript to have another javascript code but whatever :-) And last, what is a polyfill ? Is that a kind of JS plugin I need to include inside my presentation ? |
haha, it’s new JS to older JS. you see those
it’s simply a script that you include which makes new APIs available to for all browsers. here’s es6-promise, which makes |
Thank you very much @flying-sheep. I finally decided to setup your whole system just to have svg fragment working :-) And it works really great !!!!! |
haha great, thanks! you get how it works? you just run |
Hi, you'll have to load the js in the script in the html. and then to insert the figure. and then class=fragment needs to be added in the svg file. But i don't get how you can do a 'two step' animation. or is all of this just bad practice? |
that’s a bit more complicated, and has nothing to do with SVGs, but with how fragments work in reveal.js you’ll have to use this information. for SVGs that maybe means nested groups ( |
owkay. So If i understood right the only thing i need to do is then add the data-src-svg.js file to my dependecies iin the end of the reveal.js stuff: and use <svg data-src ... > but that doens't seem to work... |
what does you’ll need this version of it, and you’ll need a fetch polyfill. |
Hi, however I got this going:
with in the svg the ids set to layer1, layer2, layer3. |
i didn’t think of that. glad that it works for you! |
Hi, I just added a link to a small plugin for svg animation that might be of interest: #1239 (comment), but above solution looks also very interesting |
@ilpepe thanks for your solution, which works best for me out of the solutions described in this thread and others for SVG animation, and I think is perhaps the solution that fits best with a natural workflow for image creation in Inkscape. Something like |
Hi, I am trying to animate my SVGs so when we are on the present slide the animation begins. I have inserted my animations like this: However the Has anyone found a workaround for this please? Note: All my CSS animation keyframes are saved within each SVG file and then inserted as an img in my html. |
I'm not sure if anyone will even discover this thread again since it's so old, but I have the exact same problem as @hadim : I want to show elements of a slide only after I clicked forward or space or anything. I tried @flying-sheep 's script but the svg doesn't even show up. I can only display the file when I don't use the tag but the |
but the…? If you have a |
@flying-sheep That |
Sure. Well, it doesn’t work if the |
@flying-sheep Sorry but I'm not entirely sure where I can find those logs. If that helps: The terminal window in which I ran |
The network tab of your browser’s devtools will tell you if the SVGs are successfully being loaded. |
@flying-sheep Ok so I checked this and there isn't a svg showing up at all. What I noticed tho is that there are errors in data-src-svg.js and also in the anything plugin. I removed those plugins then but the SVG still doesn't appear. |
I build a lot of SVG files with Inkscape to display figures inside reveal.js slides. I wonder to know if there is a way to animate these SVG ?
For example I would like to display a group in the SVG file first and then display another group by pressing "space" or "right arrow".
Thank you
The text was updated successfully, but these errors were encountered: