Hi there! Let’s just start by saying how much I LOVE ‘Sparkle App’.
I think it’s a perfect app.
I see a lot of people asking for new features but me… well, I just want to ask for new animations. I find animations to really make the websites look better and more professional looking.
I’m not a programmer and I guess building this stuff into the app will take a lot of time and effort. And I already love Sparkle the way it is. But I couldn’t help but think that these could be cool features.
What about a parallel effect? So images in squares move at different speed than the rest of the website. With 2 layers of images in squares you would be able to create some pretty awesome parallel effects.
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.
What about other effects based in scrolling too? Like movements from left to right, right to left or rotation.
I’ve also seen videos that go forwards or backwards based on scrolling too. 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. And of course if u stop the video stops too. Dunno if I’m making myself clear.
Combining this effects with the current animations and options for the squares… well, I think the results could be mind blowing.
Also, more animations only for text (like disolution word by word or typewriter effec) could be cool.
This is not a critique. Just me saying that I love Sparkle so much that I wouldn’t mind loving the app even more (if that’s even possible).
Speaking of animation, does anybody as a good source for animated SVG (standalone) icons/stuff? Or a good app (Keyshape…?) to create SVG animated files? Thanks…
But does Sparkle work with SVG animated files? Never tried it before. I’ve just been looking at it. Keyshape does look good indeed. SVGator is more expensive than I can afford. I work as an animator too so I’d love to do that. My websites would look badass.
Sparkle doesn’t show animation in canvas and doesn’t have support for animating the contents, but if you have an animated SVG (like a simple looping animation), the SVG will be exported as is and will animate in the final website.
@andredupke
Yes, I can also recommend Hype 4 as a great animation tool. Lots of possibilities. I have been using it for years. Exported Hype animations can be inserted easily with the “Embed” function into Sparkle.
a test, this is made with Keyshape, exported “animated SVG css”. A bit tricky, no preview on the canvas (so far). https://popfish.be/test/
testing with Hype 4
@lode.rosel Well done!
I like this effect.
In Safari the animation plays only once, even when I reload the page, it doesn’t play anymore. In Firefox it plays each time I reload the page.
Oh, wow. Thank you for the recommendation! Def gonna try it!
It’s great that Sparkle is compatible even if it can’t show previews.
Poor Duncan, I feel like we r just asking for stuff while we should be out there, door by door… “Have you heard about our Lord and saviour Sparkle App?”
The credit goes to this guy: https://designforventures.co/
I just ‘tweaked’ them in Keyshape, it needed to be css.
Yes, reload does not trigger them again (in Safari delete the cache), they did a couple times when I just uploaded the testfile. This is stuff for the people who know html, ect… And my guess is that Duncan knows why !
I contacted ‘Keyshape’ about the animation not working by reload, their answer:
"Hi Lode,
That is a strange bug. If I download your HTML page (I used Chrome’s “Save Page As…” feature) and open the page from the file system, then Safari / Chrome replays the animation after page reload.
Also, if I create a simple test HTML page that shows the animation and open the page from the file system, it replays the animation. This is the HTML I tested:
Also, if I clear the caches in Safari (menu: Develop > Empty Caches), then the animation plays again after reload.
So, I assume that this is somehow related to Safari/Chrome caching the SVG image and it causes the animation not to replay. I don’t know how to really fix that. Sometimes browsers have strange behavior like this.
You could try switching to the JavaScript animator. Export the SVG animation as “KeyshapeJS animation” using the “Embedded” JS library. Then, you have to add the animation on your web page using the tag, because tag doesn’t run JavaScript:
Sorry, I don’t know how to use the tag in Sparkle. I hope it is possible to use it.
Best Regards,
Kari Pihkala
Developer of Keyshape
Pixofield Ltd"
@andredupke
Yes, I totally agree with you. Hype is good for animations but not for building complete websites. Sparkle is a great tool for website creation. I love it.
I have used Hype mostly for small, unobtrusive animations (of logos for example) that play in a loop. And to be able to place them anywhere on the Sparkle canvas with the “Embed” function is just all I need right now.
.
