kandi background
Explore Kits

typist-jquery | Add animated text typing to any element. | Animation library

 by   davidcrawford JavaScript Version: Current License: MIT

 by   davidcrawford JavaScript Version: Current License: MIT

Download this library from

kandi X-RAY | typist-jquery Summary

typist-jquery is a JavaScript library typically used in User Interface, Animation applications. typist-jquery has no bugs, it has no vulnerabilities, it has a Permissive License and it has low support. You can download it from GitHub.
Typist is a jQuery plugin that allows you to animate text as if it were being typed onto the screen. See it in action at http://chartulo.us. This software is licensed under the MIT license. See the details in the file called LICENSE.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • typist-jquery has a low active ecosystem.
  • It has 224 star(s) with 27 fork(s). There are 23 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 2 open issues and 1 have been closed. There are no pull requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of typist-jquery is current.
typist-jquery Support
Best in #Animation
Average in #Animation
typist-jquery Support
Best in #Animation
Average in #Animation

quality kandi Quality

  • typist-jquery has 0 bugs and 0 code smells.
typist-jquery Quality
Best in #Animation
Average in #Animation
typist-jquery Quality
Best in #Animation
Average in #Animation

securitySecurity

  • typist-jquery has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • typist-jquery code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
typist-jquery Security
Best in #Animation
Average in #Animation
typist-jquery Security
Best in #Animation
Average in #Animation

license License

  • typist-jquery is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.
typist-jquery License
Best in #Animation
Average in #Animation
typist-jquery License
Best in #Animation
Average in #Animation

buildReuse

  • typist-jquery releases are not available. You will need to build from source code and install.
  • Installation instructions are not available. Examples and code snippets are available.
typist-jquery Reuse
Best in #Animation
Average in #Animation
typist-jquery Reuse
Best in #Animation
Average in #Animation
Top functions reviewed by kandi - BETA

Coming Soon for all Libraries!

Currently covering the most popular Java, JavaScript and Python libraries. See a SAMPLE HERE.
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.

typist-jquery Key Features

Add animated text typing to any element.

Community Discussions

Trending Discussions on Animation
  • Xamarin.Forms animation inside Listview stops working if collection changes
  • How to repeat Android Animation
  • How to detect that a button is pressed in Jetpack Compose?
  • SVG stop running chained animation (<animate> tag)
  • additionalSafeAreaInsets is not accounted for during view controller dismissal, using custom UIViewControllerTransitioningDelegate
  • How can I prevent my Animations from starting when the other animations are playing?
  • SwiftUI view animates at unexpected path
  • Vue.js CSS animation not working correctly when using v-if
  • Animating wave pulse using matplotlib
  • How do I disable UIStackView default show/hide animation?
Trending Discussions on Animation

QUESTION

Xamarin.Forms animation inside Listview stops working if collection changes

Asked 2022-Mar-22 at 05:34

I am having a hard time figuring what's going on with my animation.

Viewmodel is composed of an ObservableCollection and every item contains a child ObservableCollection.

Parents collection is bound to a BindableLayout. The ItemTemplate of that layout contains a Listview to display child's elements.

<StackLayout BindableLayout.ItemsSource ="{Binding Parents}">
    <BindableLayout.ItemTemplate>
        <DataTemplate x:DataType="models:ParentRows">
            <StackLayout>      
                <Grid BackgroundColor="White" >
                     <!-- Some bindable content there -->
                </Grid>
            
               <ListView ItemsSource="{Binding Childs}" CachingStrategy="RecycleElementAndDataTemplate" RowHeight="50">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="models:ChildRows">
                            <ViewCell>
                                <StackLayout BackgroundColor="White">
                                    <controls:AnimatedGrid Refresh="{Binding Animation}"
                                          <!-- Some bindable content there -->
                                    </controls:AnimatedGrid>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

I am using an AnimatedGrid on the child listview, this control is inherinting from Grid. It has an extra BindableProperty nammed Refresh and an Animation code that gets called whenever Refresh property changes.

        private async void AnimateItem()
        {
            await Device.InvokeOnMainThreadAsync(() =>
            {
                this.RotateTo(360,500);
            });
        }

Everything works fine until i start filtering the list. Once i filter the list, subsequent call of AnimateItem will have no effect. To be more precise, if parent item got removed from list, and then added again, childs of this parent will never animate again. Filtering the List consist of Removing/Inserting parents to the observable collection (myCollection.Remove(item), myCollection.Insert(index, item), using Collection methods from framework).

This does not seems to be an observable collection binding issue, as values inside parent and childs collection still update perfectly find. Changing CachingStrategy also have no impact on the issue.

I found that, if i replace the ListView control by a CollectionView, the problem disappear. However, i realy want to find a solution that would alow me to keep the listview control as switching to CollectionView would introduce to many other undesirable effect.

Edit 22/02/2022 : I made a sample project to reproduce the issue on github.

  • Basicaly, you can click the "Rotate Random" multiple time to make random child spin.
  • Once you click the "Remove and add 2 parent", you can see that the removed/reinserted items does not rotate anymore.

Edit 15/03/2022 : I am still not able to figure what's wrong. However, for test purpose, i added in the control constructor, a task.delay followed by an animation call, and this call is working on filtered items. That's beyond my understanding.

ANSWER

Answered 2022-Mar-22 at 05:16

The solution

In your AnimatedGrid class, add an isAttached flag, and add the following lines to your OnPropertyChanged override:

bool isAttached = false;

protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
    base.OnPropertyChanged(propertyName);

    if (propertyName == "Renderer")
    {
        isAttached = !isAttached;
        if (!isAttached) this.RemoveBinding(RefreshProperty);
    }

    if (propertyName == nameof(Refresh))
    {
    ...

The why

Disclaimer: it took me a long time to figure out what was going on here, and although i was able to fix the problem, i would not claim that i completely and perfectly understand it. I believe this is a bug in Xamarin, and in your case i would file an issue in Github (although maybe MAUI will have this corrected...)

When a ChildItem is removed (do Filter), the old ChildItem-AnimatedGrid's Refresh property remains bound to the ChildItem's AnimationInt property.

When a ChildItem is added again (remove Filter), a new view is created.

Now the problem is evident: when the ChildItem's AnimationInt property changes (tap on ROTATE RANDOM button) the old ChildItem-AnimatedGrid's Refresh is notified, and then the old View is rotated, but the new ramains unchanged (it does not rotate).


Once the problem is understood, we need to figure out how to remove the binding of the old view when the view is dettached: well, to do this i used the fact that the VisualElement's Renderer property is set/modified when the element is attached and again when it is detached: The fist time it is called i set the isAttached flag to true. The second time it is called i set the flag to false, and i remove the binding. Removing the binding of the old View allows the new View to be correctly bound.

Source https://stackoverflow.com/questions/71190208

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install typist-jquery

You can download it from GitHub.

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Explore Related Topics

Share this Page

share link
Reuse Pre-built Kits with typist-jquery
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.