{"id":14960810,"url":"https://github.com/instance-id/elementanimationtoolkit","last_synced_at":"2025-10-24T19:30:32.010Z","repository":{"id":51682547,"uuid":"312936874","full_name":"instance-id/ElementAnimationToolkit","owner":"instance-id","description":"A collection of Unity UIElements animation extension methods, new animated elements, and examples.","archived":false,"fork":false,"pushed_at":"2023-06-12T01:23:50.000Z","size":4023,"stargazers_count":92,"open_issues_count":0,"forks_count":8,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-10-10T10:23:03.386Z","etag":null,"topics":["uielements","uitoolkit","unity","unity-editor","unity3d","upmframework-instanceid"],"latest_commit_sha":null,"homepage":"https://instance.id/ElementAnimationToolkit","language":"C#","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/instance-id.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}},"created_at":"2020-11-15T01:42:39.000Z","updated_at":"2024-08-21T02:15:11.000Z","dependencies_parsed_at":"2024-01-06T14:50:08.069Z","dependency_job_id":null,"html_url":"https://github.com/instance-id/ElementAnimationToolkit","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instance-id%2FElementAnimationToolkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instance-id%2FElementAnimationToolkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instance-id%2FElementAnimationToolkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/instance-id%2FElementAnimationToolkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/instance-id","download_url":"https://codeload.github.com/instance-id/ElementAnimationToolkit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219868059,"owners_count":16555878,"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":["uielements","uitoolkit","unity","unity-editor","unity3d","upmframework-instanceid"],"created_at":"2024-09-24T13:23:03.674Z","updated_at":"2025-10-24T19:30:25.560Z","avatar_url":"https://github.com/instance-id.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# ElementAnimationToolkit\n\n### A collection of Unity UIToolkit/UIElements chainable animation extension methods, premade animated elements, and examples. \u003c!-- omit in toc --\u003e\n![](media/intro_animation.gif)\n\n\u003cbr\u003e\n\n- [ElementAnimationToolkit](#elementanimationtoolkit)\n    - [Recent Features or Changes](#recent-features-or-changes)\n  - [Documentation](#documentation)\n    - [Installation](#installation)\n      - [Install via OpenUPM](#install-via-openupm)\n      - [Unity Package Manager](#unity-package-manager)\n    - [Animations and Features](#animations-and-features)\n    - [Usage / Examples](#usage--examples)\n      - [Background Color Fade-In](#background-color-fade-in)\n      - [Hover Border Pulse](#hover-border-pulse)\n      - [Fade-in sequence](#fade-in-sequence)\n\n\u003cbr\u003e\n\n### Recent Features or Changes\n| New Animation types: |                       |\n| -------------------- | --------------------- |\n| Sequences            |                       |\n|                      | ShowForDuration       |\n| Base Annimations     |                       |\n|                      | AnimateOpacityDelayed |\n\n## [Documentation](\"https://docs.instance.id/elementanimationtoolkit/\")\n\n---\n\n### Note: UIElements Animations are listed as Experimental by Unity - API subject to change. Also, since Element Animation Toolkit is currently underactive development, it is possible for API changes in this library as well \u003c!-- omit in toc --\u003e\n\n\u003cbr\u003e\n\n#### The intent of this package is to help asset developers more easily create their own animation sequences via code.\u003c!-- omit in toc --\u003e\nThough, I have been adding some new \"ready to go\" UIElement types, such as the \"AnimatedFoldout\", which you just use as you would a a typical foldout comes animated with no additional coding, minus some exposed properties to adjust the animation to your liking. I do intend to add more of these as I go along.\n\n\u003cbr\u003e\n\nThis package began simply as a small collection of helpers methods I created across my last few projects to make animating editor elements much easier and finally put into a single place. I continue to add to it as I go along but decided to put together several examples and wanted to share them.\n\n\u003cbr\u003e\n\n### Installation\n\n---\n\n#### [Install via OpenUPM](https://openupm.com/packages/id.instance.elementanimationtoolkit)\n```openupm add id.instance.elementanimationtoolkit```\n\n#### [Unity Package Manager](https://github.com/instance-id/ElementAnimationToolkit/tree/upm)\n```github.com/instance-id/elementanimationtoolkit.git#upm```\n\n\u003cbr\u003e\n\n### Animations and Features\n\n---\n\n(There are more, I just have not added them all yet) \n\n| Animation types:   | Method                 |\n| ------------------ | ---------------------- |\n| Sequences:         |                        |\n|                    | AnimCharacterSequence  |\n|                    | AnimFadeInSequence     |\n|                    | ShowForDuration        |\n| Continuous:        |                        |\n|                    | AnimBorderPulse        |\n| Hover:             |                        |\n|                    | HoverBorderPulse       |\n| Base Annimations:  |                        |\n|                    | AnimateBackgroundColor |\n|                    | AnimateBorderColor     |\n|                    | AnimateColor           |\n|                    | AnimateImageTintColor  |\n|                    | AnimateOpacity         |\n|                    | AnimateOpacityDelayed  |\n|                    | AnimateWidth           |\n|                    | AnimateHeight          |\n| Extensions/Helpers |                        |\n|                    | AutoToggleAfter        |\n|                    | ApplyPrivacyMask       |\n|                    | SetDisplay             |\n|                    | GetDisplay             |\n|                    | SetOpacity             |\n|                    | GetDisplay             |\n|                    | SetText                |\n|                    | OpenURL                |\n\n### Usage / Examples:\n\nExamples: Tools \u003e instance.id \u003e Element Animation Toolkit\n\nNote: The code is pretty ~~heavily~~ excessively documented and currently most method summaries for extension methods have examples in them. Be sure to check the comments for additional details!\n\n![](https://i.imgur.com/hY3DGDA.png)\n\n\n\u003cdetails\u003e\n\u003csummary\u003eExample: Method IDE summary for 'HoverColor()'\u003c/summary\u003e\n\n```cs\n/// \u003csummary\u003e\n/// Adds forecolor hover capability that will not be lost like CSS:hover when programatically setting background color\n/// \u003c/summary\u003e\n/// \u003cexample\u003e\n/// \u003ccode\u003e\n/// var originalColor = GetColor.FromHex(\"#BABABA\");\n/// var hoverColor = GetColor.FromHex(\"#2F569C\");\n///\n/// label.HoverColor(originalColor, hoverColor);\n/// \u003c/code\u003e\n/// \u003c/example\u003e\n```\n\u003c/details\u003e\n\nThere are several fairly basic base animation helper methods which can easily be used on their own, but are also the basis of the more complex animation sequences:\n\n#### Background Color Fade-In\n![](media/background_fade_example.gif)\n(The initial fade from gray to blue)\n\n\u003cdetails\u003e\n\u003csummary\u003eExample animation base helper: AnimateBackgroundColor()\u003c/summary\u003e\nUsage:\n\n```c#\n\nColor originalColor = GetColor.FromHex(\"#BABABA\");\nColor fadeColor = GetColor.FromHex(\"#2F569C\");\nvar durationOfFade = 250; // In milliseconds\n\nVisualElement visualElement = new VisualElement();\nvisualElement.AnimateBackgroundColor(originalColor, fadeColor, durationOfFade);\n\n```\n\n\u003c/details\u003e\n\n---\n\n#### Hover Border Pulse\n![](media/hoverborderpulse_example.gif)\n\u003cdetails\u003e\n\u003csummary\u003eExample hover animation: HoverBorderPulse()\u003c/summary\u003e\n\nUsage:\n\n```c#\nVisualElement visualElement = new VisualElement();\nvisualElement.HoverBorderPulse(pulseStartColor: GetColor.FromHex(\"#7F3B3A\"), pulseEndColor: GetColor.FromHex(\"#2F569C\"), colorDuration: 500);\n```\n\n\u003c/details\u003e\n\n---\n\n#### Fade-in sequence\n![](media/fade_example.gif)\n\n\u003cdetails\u003e\n\u003csummary\u003eExample complex animation sequence: AnimFadeInSequence()\u003c/summary\u003e\n\nUsage:\n\n```c#\nLabel label = new Label {text = \"Click button to make me fade!\"};\n\nconst int fadeInTime = 500;\nconst float displayTime = 2000f;\nconst int fadeOutTime = 500;\nstring newText = \"then back to the original!\";\nvar originalTextColor = GetColor.FromHex(\"#BABABA\");\nvar animatedTextColor = GetColor.FromHex(\"#607FAE\");\n\nlabel.AnimFadeInSequence(newText, animatedTextColor, originalTextColor, fadeInTime, displayTime, fadeOutTime);\n```\n\n\u003c/details\u003e\n\nThen, of course, there is everything in between.\n\nAdditionally there are many helper methods relating to many different Types from Color to opening weblinks in the browser.\n\n\u003cdetails\u003e\n\u003csummary\u003eExample color helper method: GetColor.FromHex()\u003c/summary\u003e\n\nUsage:\n```cs\nColor color = GetColor.FromHex(\"#CCCCCC\");\n```\n\nImplementation:\n\n```cs\npublic static Color FromHex(this string color)\n{\n    if (!color.StartsWith(\"#\")) Debug.LogWarning(\"The FromHex() function must be used on a hexadecimal string beginning with #\");\n    ColorUtility.TryParseHtmlString(color, out var outColor);\n    return outColor;\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eExample creating an external url link : OpenURL() \u003c/summary\u003e\n\nUsage:\n```cs\nVisualElement visualElement = new VisualElement();\nvisualElement.OpenURL(\"https://github.com/instance-id/ElementAnimationToolkit\");\n```\n\nImplementation:\n\n```cs\npublic static T OpenURL\u003cT\u003e(this T element, string url) where T : VisualElement\n{\n    element.RegisterCallback\u003cMouseUpEvent\u003e(evt =\u003e\n    {\n        if (evt.button == 0)\n        {\n            Application.OpenURL(url);\n            evt.StopPropagation();\n        }\n    });\n\n    return element;\n}\n```\n\n\u003c/details\u003e\n\nImportant files:\n\n    Assets/instance.id/ElementAnimationToolkit/Editor/EATKEditor.cs\nThis file is the primary example and demonstrative reference for most major features and is the main editor window of the package\nwhere you can view examples of several different types of animations and their usage.\n\nYou can access the main editor window via Tools \u003e instance.id \u003e Element Animation Toolkit\n\nThere are three buttons per row, Editor, Anim, and USS.\n\n![](media/rowbuttons.png)\n\nThe editor button will take you directly to the editor code specific to that element where you will see the C# implementation of UIElements as well as most callback registrations.\n\nThe Anim button takes you to another section of the file in which you can see the declaration, setup, and execution of any animation specific functions,\n\nLastly is the USS button, which takes you to the USS stylesheet and the location of the particular animation if you need.\n\nThe animations without a row of buttons have a right-click context menu implemented which has similar options to jump directly into\nthe code at the proper location for the animation. (The methods I have created for jumping straight to the proper lines of code\nare of course included and you are welcome to take advantage of them for your own needs.)\n![](media/jumptomenu.png)\n\n\n---\n![alt text](https://i.imgur.com/cg5ow2M.png \"instance.id\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finstance-id%2Felementanimationtoolkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finstance-id%2Felementanimationtoolkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finstance-id%2Felementanimationtoolkit/lists"}