{"id":19162359,"url":"https://github.com/agilie/bouncing-carousel","last_synced_at":"2025-05-07T10:42:30.965Z","repository":{"id":71905206,"uuid":"92411479","full_name":"agilie/Bouncing-Carousel","owner":"agilie","description":"The bouncing carousel is an experiment with SVG animations technology.","archived":false,"fork":false,"pushed_at":"2017-06-19T12:20:21.000Z","size":5369,"stargazers_count":14,"open_issues_count":0,"forks_count":3,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-19T21:24:48.287Z","etag":null,"topics":["animation","carousel","css","html","js","svg"],"latest_commit_sha":null,"homepage":"https://agilie.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/agilie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.MD","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-25T14:27:49.000Z","updated_at":"2017-07-06T11:39:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"bb8ddc0a-f565-4757-8880-11e6bd090ad2","html_url":"https://github.com/agilie/Bouncing-Carousel","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilie%2FBouncing-Carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilie%2FBouncing-Carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilie%2FBouncing-Carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/agilie%2FBouncing-Carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/agilie","download_url":"https://codeload.github.com/agilie/Bouncing-Carousel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252862137,"owners_count":21815800,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","carousel","css","html","js","svg"],"created_at":"2024-11-09T09:10:30.800Z","updated_at":"2025-05-07T10:42:30.945Z","avatar_url":"https://github.com/agilie.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"Check this project on [Dribbble](https://dribbble.com/shots/2637299-Carousel).\n\n[![License](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/agilie/Bouncing-Carousel)\n\n# Bouncing carousel\n\n## Introduction\n\nThe bouncing carousel is an experiment with SVG animations technology.\nInspired by [Carousel](https://dribbble.com/shots/2637299-Carousel).\n\nAnimation, used in the carousel is based on [Animation SMIL](https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL) specification.\nAll the SVG elements can be stylized using CSS, you can also create animations with CSS, \nbut there are such properties in SVG that greatly enhance its capabilities. \nFor example, the path attribute has a data set that defines the object's path, \nand this data can not be changed through CSS.\n\nIn the councing carousel `\u003canimate\u003e` tag is used, which allows \nto animate SVG without using a cumbersome JS-code, but only by \n:hover pseudoclass on the carousel element.\n\nVisually, the desktop version creates an effect similar to the \"pocket\".\n\nFor the gallery images `png`, `gif` formats are preferred thus formats supporting \ntransparency - this will allow the objects in it to look as effective as possible.\n\nCarousel is ideal for the e-commerce focused websites.\n\n## See, how it works (demo)\n\nhttps://agilie.github.io/Bouncing-Carousel/\n\n## Troubleshooting\nProblems? Check the [Issues](https://github.com/agilie/Bouncing-Carousel/issues) block \nto find the solution or create an new issue that we will fix asap. Feel free to contribute.\n\n## Author\nThis mini-project is open-sourced by [Agilie Team](https://www.agilie.com) \u003cinfo@agilie.com\u003e\n\n## Contributors\n[Tatiana Kushnir](https://github.com/tatiana-kushnir-89)\n\n[Sergey Melashych](https://github.com/SergeyMell)\n\n## Contact us\nIf you have any questions, suggestions or just need a help with web or mobile development, please email us at \u003cweb@agilie.com\u003e. You can ask us anything from basic to complex questions.\n\nWe will continue publishing new open-source projects. Stay with us, more updates will follow!\n\n## License\nThe [MIT](LICENSE.MD) License (MIT) Copyright © 2017 [Agilie Team](https://www.agilie.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagilie%2Fbouncing-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fagilie%2Fbouncing-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fagilie%2Fbouncing-carousel/lists"}