Lottie is awesome 
I think it was specifically created for After Effects vector animations.
Just rendered one and trying to get it to work in a simple html doc
This should work (expects the data.json in the same directory as the html file):
<html>
<head>
<script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script>
<script>
var animation = bodymovin.loadAnimation({
container: document.getElementById('lottie'), // Required
path: 'data.json', // Required
renderer: 'svg/canvas/html', // Required
loop: true, // Optional
autoplay: true, // Optional
name: "Hello World", // Name for future reference. Optional.
})
</script>
</head>
<body>
<div id="lottie" style="height:200px; width:200px"><div>
</body>
</html>
1 Like
No luck 
Could you have a look? I'm just doing this to check fi it's rendering correctly...
data.json (6.0 KB)
(you might need to change the backgoround color to black)
Ah the script source was wrong.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.4/lottie.min.js" type="text/javascript"></script>
</head>
<body>
<div id="lottie" style="height:200px; width:200px"><div>
<script>
var animation = bodymovin.loadAnimation({
container: document.getElementById('lottie'), // Required
path: 'data.json', // Required
renderer: 'svg/canvas/html', // Required
loop: true, // Optional
autoplay: true, // Optional
name: "Hello World", // Name for future reference. Optional.
})
</script>
</body>
</html>
However it only works when served from a web-server (I'm always using the http-server npm package for stuff like this https://www.npmjs.com/package/http-server)
Otherwise you'd need to put the JS file into the same directory as well
hmm interesting, it doesn't work locally? That might be a concern if the user is offline...
I'll see what I can do, but could you try run it offline and see what you can get?
I did redirect the source to try this but no luck so far..
It works fine offline, it's just some browser security mechanisms blocking access to the <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.4/lottie.min.js" type="text/javascript"></script> and to the data.json when called from a file:// protocol 
Web-Dev has become complicated, but this is just for loading the rendering script and not related to offline/online support or anything. In native code this doesn't matter at all.
hmmm... (yeaah i'm a beginner ahaha)
Sorry if this is a bother but do you have a working version of the animation web player? I'd like to take a look at it and learn if that's okay
Well, I can't seem to get it working.. I'm probably missing some kind of background server or module thingy that I needed to setup (tried http-server but had trouble installing, instead tried xampp (which i've used but not in a while and may be a different thing altogether) but still not working)
so for now I'll just focus on polishing the stickers, getting them time-aligned properly etc. and ask you if they're working.
Some questions:
- Can you change the color of the animation via code or do I need to make a dark/light version?
- Can you play the animation, pause it for a period of time then continue to loop that sequence or do I need to make seperate start, idle and exit animations for each? (they will not be aligned if you try animate something like tiptap, where some would need to hold for a bit then release altogether)
That should both be possible in code
You can also install http-server using brew if you have that installed (brew install http-server )
So to clarify, I just need to make one animation each?
I'll try get it working sometime soon too~
Yep I think one animation will work fine
Instead of HTML you can also use some lottie player app for testing: https://github.com/willowtreeapps/lottie-player
Or some hosted player: https://lottiefiles.com/preview
1 Like
Quick daily progress update:
Todays alpha 2.732 improves the insertion, deletion & copy/paste and drag & drop behavior plus associated animations. Especially when selecting & copying multiple items at the same time. It's now also possible to drag triggers into other apps like text editors (and back)
Tomorrow I'll focus on the old-style list view and on some common double-click & right-click behaviors.
I feel like slowly all parts are coming together
2 Likes
I noticed a new fn modifier option in the new UI but not the old. Is this functional? 
I'm having some issues with icons in the latest BTT alphas
Icons don't seem to be inverting properly in the touchbar, and in the sidebar the black/white icons are being silhouetted.
do you have an example icon that doesn't invert in the Touchbar?
In order to decide whether to invert icons the alpha now also checks whether the icon has at least one transparent Pixel (previously it only checked whether it was completely grayscale). I'll change it to not require a fully transparent pixel with the next alpha.
So in general BTT will invert icons if:
- At least one pixels has some transparency (otherwise inverting will not do anything useful) AND
- All pixels are grayscale
nope, I just didn't hide them yet in the new UI Unfortunately I'm my tests using FN was too unreliable to be usable ;-(
On second 'see', they seem to be just the adobe icons.
Maybe the tolerance has been chagned as the grey icons are not inverting properly. But others that are completley black are still working fine.
Gesture Stickers Update
Stickers Update:
- Added "Double Click"
- Refined "Force Click"
- Added "Resting Touch"
- The Slide sticker now starts empty. (you probably can't see it because it loops, but it now goes in then slides, instead of sliding and then coming in)
- Genral Timing refinements
You can see a preview of how a three finger drag would be represented
To Do:
- Match the timing across all stickers
- Click Swipe
- Two finger Rotate
Tested a two finger spread and its a bit edgy, so I might reduce the length or something... Feedback?