In the past, I used a jQuery-based slider call Jssor Slider to create some pretty sophisticated animations on my websites, like this one (only visible on desktop, not mobile)…
The Jssor Slider was pretty powerful as sliders go, but also very easy to use. It had an online visual UI on the website for creating animations within slides. It supported an animation timeline similar to what’s in Adobe After Effects. It had layers, movement, fading, easing, and all that good stuff. Kind of like the old Adobe Flash.
It was a measly $12 a year, and it came with cloud storage for your images, and allowed you to save your projects so you could easily edit and make changes. Unfortunately, the developer suddenly abandoned it. No explanation.
The actual slider JS is still available for download from the git repository, but the visual UI for making the animations was on the website, and it’s gone. I think the only way to build or update animations with this tool now would be via hand coding, and this is way above my pay grade.
Anyone have any suggestions for a replacement? I know there’s CSS animations. I’ve done some simple stuff with CSS keyframes, but I think trying to create something as complex as what’s on the link I posted above would be challenging to do with CSS.
I figured I’d throw it out here first, to see if anyone has anything they use to do things like this before I start hunting high and low online.
Lottie animations are now very popular, they are quite efficient and I use them on my website. Lottie can be credited with a few tools but Lottie Files has an editor and a huge library on their website.
Something I’ve done in the past as well is creating an animation in PowerPoint, exporting it as a video and then using JS to play it back at the speed users scroll down on a page.
I recently found this program which is free, and it says it can export to the Lottie format.
I also have Pinegrow, which has a built-in tool called Pinegrow interactions (kind of a mini-After Effects type of timeline) which leverages the GSAP library. It lets you do moving, fading, etc.
I looked at the Lottie website. I loathe these subscription based programs.$20 a month for the entry level, and you have to pay for a year up front.
Try this design tool for Lottie files: https://www.haikuanimator.com/
Haiku Animator — a design tool for creating UI animations, Lottie files, and interactive web components. Now is free and open-source. As in: no money paid, free for everyone forever, source code available on Github.
Mac/Win desktop apps.
Thank you for the example! That must have taken you some time!
The carousel/slides aspect is not really the challenge. It’s the ability to animate the movement of the various image elements. I’m looking for a tool that doesn’t restrict you in how you apply movement and opacity to the various elements over the course of the slide duration. Being able to move things diagonally, spin them, etc.
Perhaps a combination of the built-in animation features and some CSS animation with keyframes can get the job done.
I was just hoping there was something out there that offered a visual way to do this using a timeline-based UI. Basically like GSAP combined with After Effects.
This may fit the bill. I’m going to give it a closer look over the next few days.
When I saw your karate example I thought why does he need an UI to make such a simple slider. It took me less than 10 min to make a simular slider with a carousel.
The client’s original website was built about 17 years ago by someone else. It had a Flash animation similar to this one. At the time, I had just purchased Bootstrap Studio. My CSS skills were limited. I didn’t know much about CSS animations, or the BSS animation functions, and I knew nothing about jQuery. When I found the Jssor slider, it did everything I needed, and had an intuitive visual interface, so I just went with it.
Now, I’m rebuilding the client’s website for the third time. Since Jssor is no longer available, it’s posed the challenge of finding a new/best way to recreate the animated slideshow (and do 2D animations in general.)
To be honest, I hadn’t even considered using the Bootstrap carousel until you posted your example (sometimes you can’t see the forest for the trees!) An obvious solution was right in front of me. It’s still going to likely require writing some CSS to handle the spins and a couple of other things, but I think I can make it work.
Wow, you took the example down quick! I just went to look again and it’s gone. Any chance you could send me the component or post a download link? TY in advance.
Hi @kuligapostenkuligaposten,
just a side note question.
Does the file you posted still exist on the forum server?
As I can’t view it & I’m always getting this “We can’t find this file”
In the image below is the page I get when trying to view it & the 2nd below image is what I see in this post from you.
Thanks for any help
The examples that kuligaposten puts up he puts on one of the five website spots that come included with the program. In the past, he’d typically leave them up for about a week, but this one he took down the same day.
Hopefully he puts it back up for a bit longer, so we can look at it again. It was nicely done.
I didn’t think you were interested, so I removed it. However, it’s online again because you asked for it. You can also download the carousel as a component directly from the page.
As printninja said, I too am always interested in your work. I’m in New Zealand & by the time I get to it might be 1.5 to 2 days later.
Thanks for reposting I appreciate it.
This one uses the GSAP library, has a free version and paid version (one-time payment). It’s not clear what the differences are, but it looks pretty interesting…
This one is not clear in terms of whether it’s limited to SVG, or allows you to also animation bitmap images. I do like the one-time payment option.
This looks like it may be an older animation program. No mention of GSAP or Lottie, but it does day HTML5 export. May be worth a look (especially since there’s a free version.)
Hi @printninja,
Expressive Animator looks quite good, I too like the one time payment option, seems a good fit with BSS.
It exports to a few formats which I like too - svg - lottie - apng - gif - mp4 - webm…
In the social media Soda Can video he uses webp & png files to animate (not bmp file as such).
Thanks for posting I hadn’t come across this one before I might get it.
