chef 3744 Posted October 4, 2019 Share Posted October 4, 2019 (edited) This is very cool! So far I have animated the favorite/like hearts to blow up when they are clicked. Edited October 8, 2019 by chef Link to comment Share on other sites More sharing options...
rechigo 293 Posted October 8, 2019 Share Posted October 8, 2019 Mind showing a tutorial? I'm really interested 1 Link to comment Share on other sites More sharing options...
chef 3744 Posted October 8, 2019 Author Share Posted October 8, 2019 Mind showing a tutorial? I'm really interested Sure thing. I'll do it after work. Link to comment Share on other sites More sharing options...
chef 3744 Posted October 8, 2019 Author Share Posted October 8, 2019 You can follow this here: https://emby.media/community/index.php?/topic/77687-how-to-vanilla-tiltjs-card-effect-in-emby-web-app/ to get strated. Link to comment Share on other sites More sharing options...
rechigo 293 Posted October 9, 2019 Share Posted October 9, 2019 You can follow this here: https://emby.media/community/index.php?/topic/77687-how-to-vanilla-tiltjs-card-effect-in-emby-web-app/ to get strated. I've done that already, it's pretty nice. It' can be annoying to have to redo it every update since I'm on the beta channel 1 Link to comment Share on other sites More sharing options...
chef 3744 Posted October 9, 2019 Author Share Posted October 9, 2019 Agreed. To get mo.js working you can add the mo.js script to embys dashnoard 'scripts' folder and then add the 'script' tag in your index.html the same way you added vanilla-tilt. Next you can use the same mutation.js 'ready' function that we used to add the tilt to add mo.js animation to your icons. I'll post an example one moment. Link to comment Share on other sites More sharing options...
chef 3744 Posted October 9, 2019 Author Share Posted October 9, 2019 (edited) Here is the link mo.js Raw code for the mo.js file.https://raw.githubusercontent.com/mojs/mojs/master/build/mo.jsNow you'd have all of these scripts linked in your html. <script src="scripts/mutation.js"></script> <script src="scripts/vanilla-tilt.js"></script> <script src="scripts/mo.js"></script> In your scripts tags in your index.html add these lines of javascript: // Only check-marks which are on the details page ready('#itemDetailPage > div.detailPageContent > div.detailPagePrimaryContainer > div.detailPagePrimaryContent > div > div.mainDetailButtons > button.btnPlaystate', function(element) { var favoriteTimeline = createFavoriteHeartExplosionTimeline(element); //On click - blow it up element.addEventListener('click', function(e) { favoriteTimeline.replay(); }); }); // Only hearts which are not red! ready('button[data-isfavorite="false"]', function(element) { var favoriteTimeline = createFavoriteHeartExplosionTimeline(element); //On click - blow it up element.addEventListener('click', function(e) { favoriteTimeline.replay(); }); }); function createFavoriteHeartExplosionTimeline(element) { const burst = new mojs.Burst({ parent: element, radius: { 4: 40 }, angle: 45, count: 15, //delay: 500, timeline: { delay: 200 }, children: { radius: 3, fill: '#c33', scale: { 1: 0, easing: 'quad.in' }, pathScale: [.8, null], degreeShift: [300, null], duration: [500, 700], easing: 'quint.out' } }) timeline = new mojs.Timeline(); timeline.add(burst); return timeline; } Here we are using the mutation observer to find any occurrences, in the emby UI, of the little heart ('like/favorite') icon and add the motion.js animations to it. More specifically just heart icons in the 'unliked/unfavorited' state. Otherwise loading all the animations would take for ever.Also, we are looking for the 'watched' check-mark to get loaded and add animation to it as well.However we are only looking at the check-marks on the DetailsPage, because load times for libraries with all these animations start to take a while.Which is something I wanted to mention. You will notice an extra second for pages to load. It just takes a bit longer to load the animations.Hope it works out for you Edited October 9, 2019 by chef Link to comment Share on other sites More sharing options...
rechigo 293 Posted October 9, 2019 Share Posted October 9, 2019 Works pretty well, I hope to see more animations like these in future Emby updates since the current Emby UI is pretty flat. Just curious, are you the web developer for Emby? 1 Link to comment Share on other sites More sharing options...
chef 3744 Posted October 9, 2019 Author Share Posted October 9, 2019 (edited) Works pretty well, I hope to see more animations like these in future Emby updates since the current Emby UI is pretty flat. Just curious, are you the web developer for Emby? Not 'the' web developer . I have just been with emby for many many years and am a 'weekend coder'. Edited October 9, 2019 by chef Link to comment Share on other sites More sharing options...
chef 3744 Posted October 9, 2019 Author Share Posted October 9, 2019 I've updated the vanilla-tilt code on the other thread. It now shows better 3D buttons, and it ignores the dashboard cards. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now