only one svgspace possible #128
Comments
|
Heyho @jaro-io 😃 Thanks for trying out Pts and sending the detailed bug report. Looks like there's a bug here where the svg id won't get updated unless you passed an svg element. I'll patch this soon in the next release. But a quick fix now would be to add an empty element inside the div. Eg: Just curious what kind of performance issue did you encounter with Safari -- can you create a new issue when you get a chance? Thanks again. Cheers! |
|
wow, thank you for the super fast heads-up. 🤞🏻 i already had the same idea, but in my specific case, it didn't fix the problem. in fact, in the pen it does. so i'll investigate! trying to find out how i can reproduce my problem here. i will let you know soon! |
|
hello again @williamngan! https://codepen.io/jaro_io/pen/NWRjPpg when this is still nothing on my end (please check my code, i only just started), it might be another bug or related to the one we found yesterday. thank you so much for looking into this! |
|
Thanks @jaro-io -- I should have a patch coming later today or tomorrow. Hang on :) |
|
@williamngan thank you so much for the immediate support! 🍡 |
|
v0.9.6 should fix this issue hopefully. Give it a try. |
|
thank you so much @williamngan. that was super fast. 😮 it did in fact fix something but not everything. when using empty svg elements with unique ids it works fine, as long as i use an id string (like if i pass the svg element via javascript directly when creating the space, it still only renders the first of all animations. if i add an empty div to my site and pass its unqiue id string to create the space, it does the same thing. so only rendering one animation. we're getting there. again, thank you! |
|
The empty div with id approach should work. I tested with your CodePen example and it seems to work. Can you check if you're using v0.9.6? Here's a simplified example: <html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pts/0.9.6/pts.min.js"></script>
</head>
<body>
<div id="one" style="width: 200px; height: 200px; background: #ccc"></div>
<div id="two" style="width: 200px; height: 200px; background: #ccc"></div>
<div id="three" style="width: 200px; height: 200px; background: #ccc"></div>
<script>
(function() {
Pts.namespace(this);
function createLine(id) {
let space = new SVGSpace(id).setup({ bgcolor: 'transparent', resize: true });
let form = space.getForm();
space.add({
animate: function() {
form.scope(this);
form.fill('#F00').point( [
Math.random()*space.innerBound.width,
Math.random()*space.innerBound.height],
30, 'circle');
}
});
space.play();
}
createLine('#one');
createLine('#two');
createLine('#three');
})();
</script>
</body>
</html>There might be another issue with "svg element" approach -- I'll take a look. Thanks! |
|
you're right. sorry, this has been a mistake on my end. so, passing only passing javascript elements, like you can do with 🦾 |
|
Hi @jaro-io , I'm revisiting this issue but cannot reproduce the "passing javascript element" problem you mentioned. If I replace |
|
Hi, closing this now. Please reopen if it continues to be an issue. |
heyho @williamngan! 🌳 🌾
you can make a microwaved quick meal, or you can take the full on adventure time travel to dinosaur land. and this for me is pts. wow. what an amazing library! and i am just scratching the surface.. 🤯
because of performance issues with the canvas element and locomotive-scroll in safari, i had to switch to the svg renderer which works beautifully fine, even though its still marked as experimental.
there's just one major problem i am facing. i can only get one svg space working at the same time. as soon as i create more than one, it only renders the last one.
i created a pretty basic pen just to demonstrate. actually we should be able to see two lines here. but we only see one. is it me who's not understanding how to setup the library correctly, or is there something wrong on the other side?
https://codepen.io/jaro_io/pen/MWjpZxL
thank you so much for taking a quick look!
jaro
🐤
The text was updated successfully, but these errors were encountered: