Hi, great plugin!

I am just wondering, is there a way to add stop, start, play, resume events to be called outside the plugin?

Thank you!

Hi there,

I'm looking to reset Morphext back to the first word once a button is clicked - for example, this is the current jquery I'm using to initiate the animation.

 $("#js-rotating").Morphext({
      animation: "fadeInUp",
      separator: ",",
      speed: 1200,
      complete: function () {}
    });

And I want to have another function such as

$(".hero-button").click(function(){
     (restart the morphext animation at the first word)
 });

Thanks in advance for your help!

How I can stop animation with *.Morphext() ?

The website is out-of-date. Ideally, I'd like to split up the README.md, and put the docs in a separate directory. The docs should also contain information on design patterns.

Stop the animation okay, but you can choose which word stoper?
For example if I want the animation will stop on the last word, how do I do?

`$.fn.Morphext.defaults = {
animation: "fadeInLeft"
};

let morp = $('.js-rotating').Morphext();
let dataMorp = morp.data("plugin_Morphext");
console.log(dataMorp);
`
i'm try to override it but when it check the animation has't changed

By the way i want to use it in the selector '.js-rotating' that will trigger when event handler is mousehover. So the next is using this dataMorp.start() function that why i not set the animation on this line $('.js-rotating').Morphext() this is just for check current animation;

This is the first instruction you give on the website: <script src="bower_components/Morphext/dist/morphext.min.js"><script>

Notice the closing script tag is missing a /

Hi,

Unfortunatly I cannot install the lib via Bower, here is why:

$ bower install Morphext --save
bower Morphext#*                cached https://github.com/MrSaints/Morphext.git#2.4.4
bower Morphext#*              validate 2.4.4 against https://github.com/MrSaints/Morphext.git#*
bower animate.css#~3.2.5        cached https://github.com/daneden/animate.css.git#3.2.6
bower animate.css#~3.2.5      validate 3.2.6 against https://github.com/daneden/animate.css.git#~3.2.5
bower jquery#~2.1.4             cached https://github.com/jquery/jquery-dist.git#2.1.4
bower jquery#~2.1.4           validate 2.1.4 against https://github.com/jquery/jquery-dist.git#~2.1.4
bower jquery#>=1.5              cached https://github.com/jquery/jquery-dist.git#3.1.1
bower jquery#>=1.5            validate 3.1.1 against https://github.com/jquery/jquery-dist.git#>=1.5
bower jquery#>=1.7.2            cached https://github.com/jquery/jquery-dist.git#3.1.1
bower jquery#>=1.7.2          validate 3.1.1 against https://github.com/jquery/jquery-dist.git#>=1.7.2
bower jquery#>=1.4.4            cached https://github.com/jquery/jquery-dist.git#3.1.1
bower jquery#>=1.4.4          validate 3.1.1 against https://github.com/jquery/jquery-dist.git#>=1.4.4
bower jquery#>= 1.2.1           cached https://github.com/jquery/jquery-dist.git#3.1.1
bower jquery#>= 1.2.1         validate 3.1.1 against https://github.com/jquery/jquery-dist.git#>= 1.2.1
bower jquery#>= 1.9.0           cached https://github.com/jquery/jquery-dist.git#3.1.1
bower jquery#>= 1.9.0         validate 3.1.1 against https://github.com/jquery/jquery-dist.git#>= 1.9.0
bower                        ECONFLICT Unable to find suitable version for animate.css

I already have jQuery 3.1.1 and Animate.css 3.5.2 installed for my project... I don't know why I get this error! Do you have any idea?

Hi. When I use Morphext for element, he cuts all html tags exept plain text. How I can disable it?

Is there anyway to prevent all the phrases from flashing when the page is reloaded? Everything inside the element will appear at once for a quick second before the animation triggers.

index.html

<h4><span id="js-rotating">Software Engineer | Developer | Programmer</span></h4><br>

main.js

 $("#js-rotating").Morphext({
    animation: "flipInX",
    separator: "|",
    speed: 3000
 });

I cannot get Morphext function to loaded.

HTML is available here: https://pastebin.com/94mx9ZV1

14: Jquery Loaded.
16:Animate Loaded.
17:Morpheus Loaded.
97: Span.
136: Start of configuration. (Yes I know I have wrong ID on that paste. But even with right ID it's not working.)

Error Code:

internal-dev.ironlions.fi/:137 Uncaught TypeError: $(...).Morphext is not a function
at internal-dev.ironlions.fi/:137
(anonymous) @ internal-dev.ironlions.fi/:137

If you need assistance with the plugin but you do not have a Github or a Twitter account, you can drop a question at my Ask.fm.

We, as a community, have made several changes to this project since its inception in 2013. It was originally inspired by Simple Text Rotator and driven by the need for an up-to-date / modern plugin for text transitions.

In 2014, I had focused my attention on fine-tuning it (albeit unnecessary at times due to the negligible impact), and on increasing its flexibility (mostly encouraged by users' requests) by introducing new, meaningful methods (internal and external).

Looking ahead in 2015 (and possibly 2016), I intend on doing the following:

• Porting the plugin over to React.js and Polymer (something I had already begun working on, but not to a standard that I deem acceptable / stable)
• Possibly introducing ES6 to the plugin (I will need to look further into this and see if it is even worthwhile or advisable to do so)
• Developing a more advance version of this plugin and Morphist (i.e. animating individual letters - I have also already begun working on this)
• Updating the documentation and the website (make it easier for people to deploy this and understand the difference between this and Morphist)
• Collating a list of sites that are currently using it (you can leave your URL in the comments in preparation for this)
• Release a Wordpress plugin

At the same time, I would like to stick to its original philosophy:

• Simplicity (all aspects, i.e. understanding how it works, modifying it and using it)
• Performance (optimum solutions to achieve the desired effects)
• It should do one thing, and do it well (which is why Morphist is on a separate repository)
• Lightweight (similar to the previous ones; no unnecessary bloat)
• Compatible (across most browsers)
• Open (by the community, for the community)

Balancing these different considerations is not going to be an easy job and certain conditions will be given a greater priority than others.

As always, suggestions and questions will always be entertained.

Have a good year everyone.

P.S. Be sure to give Morphist some love as well!

EDIT: Let's start collecting cool typography effects...

• Button on https://precursorapp.com/
• Ghostnote http://www.ghostnoteapp.com/
• Highlight and typewriting animation http://www.hubspot.com/
• Heading https://www.kickstarter.com/discover?ref=nav
• Subheading https://www.instasource.co/
• https://www.campusjob.com/#!/
• https://breaz.io/
• http://www.wphunters.com/axis/
• http://amokjs.com/
• http://dunked.com/
• https://www.mapiful.com/
• http://www.density.io/
• https://www.linode.com
• http://danrschlosser.github.io/substituteteacher.js/ (another plugin - pretty bloated)
• http://www.nitrografix.net/
• https://tonicdev.com/
• https://hivyapp.com/
• https://mention.com/en/
• https://ffwagency.com
• https://vectr.com/
• http://www.getnightnotes.com/
• https://www.formlets.com/#
• http://www.simbla.com/
• https://www.gitbook.com/
• http://johnny-five.io/
• http://infos.getbirdly.com/
• https://gasket.io/
• https://www.wattpad.com/
• https://influxdata.com/
• https://codebeat.co/
• https://clearbit.com/

Hi there !

Thanks for creating Morphext :)

Are you planning to add a shuffle feature ? That could be cool.

Thanks !

Is there a way to stop the loop? I tried using complete function but I guess that is for each item after completed am I right?

Hi

Thanks for pointing me to your plugin.
Im having problem with safari and flipping text in front of a html 5 "background" video.

Don't think there is something wrong with the plugin just need to figure out why it happens.

www.pija.se

Working on smaller/compressing video so it might take while before it starts. And flipping works until video starts.

Hi @MrSaints , I am the member of cdnjs, and we wants to host this repository. However, I found that that the latest version tag about this repository is v2.2.1, but it seemed that the latest version is 2.4.7 according to the package.json file.
Could you help me update the version tag? Thanks!

cdnjs/cdnjs#9219

I'm looking to have the last x number of words rotate at a different speed than the others. Say, have the first 20 phrases rotate at a speed of 500, and the last 5 rotate at a speed of 1000. I've been able to do this with the animation, but not the speed - so I've been unable to produce the desired result unfortunately. Any assistance would be much appreciated.

How does one remove an animation once it is completed? For instance, after the bounceIn animation has finished its animation how does one ensure that it isn't animated once more? And, when a new call to Morphext is performed that the animation runs again.

I tried this,

$("#prompt").Morphext({
    speed: 2000,
    complete: function () {
        // Called after the entrance animation is executed.
        this.stop();
        setTimeout(function() {
            // Remove the span while keeping the text.
            var wrap = $('span.animated.bounceIn');
            var text = wrap.text();
            wrap.replaceWith(text);
        }, 1900);
    }
});  

and obviously I have no idea what I am doing.

Ideally what I'd like is fade in/fade out animations. Right now I can only get it to fade in, and then it abruptly flashes out when it leaves.

like a https://codyhouse.co/demo/animated-headlines/index.html

Hi @MrSaints ,
We are cdnjs team, we're going to host this library.
The git auto-updater in cdnjs relies on git tags so that it can recognize the correct version and automatically update the repo.
Could you please add git tags (v2.4.5~2.4.7) for the repo?
v2.4.5: 664913f
v2.4.6: 33c44b7
v2.4.7: e9c1d2d

If you have any suggestions, please let me know.
Thank you.

cdnjs/cdnjs#11289

Hello,
i want add a fade Out animation after each fade in animation ?
Thx for ur work

It is not working wiht IE < 8, print that message:

Object doesn´t support this property or method
line: 44
character: 17

Hello,

Is it possible to use linebreak for some of the words?

<span class="rotating"HELLO<br>WORLD1,HELLO<br>WORLD2,HELLO WORLD3,HELLO<br>WORLD4,HELLO WORLD5</span>

I had tried using br and but it doesn't work.

Can you add character based animation, look like this script: http://textillate.js.org/

Are there any events i can listen to?

Great tooling leveraging Animate.CSS
~ ~
Using Animate.CSS I have been able to control iterations & delays; i.e.
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
Please direct me how to control these using Morphext
~ ~
with iterations set to "1"
How can use a second / third set of phases..?
I would use this when I where I would change the animated Class from, say, zoomIn to bounce

Thanks for your help......
~ ~ ~
as a reference I am trying to replicate the online FLASH version of an aninote.
my edit... my name: http://dale.you.are.mighty.aninote.com/
Aninote, main site reference: http://www.aninote.com/site.mpl?p=cont&cont=yam
~ ~ ~ .
Thanks for this and any further ideas.....

D-

Is there a way to skip to the next word via jQuery on("click") Function?

Good night, im stuck on an animation, the thing is , i have three lines paragraph, and they transalte in the animation from english to spanish, and the client wants, the english paragraph stays in english 15 seconds, and 4 seconds in spanish, and keep doing it in a loop, i only had achieved to change three times but then the animation stops. Can anyone help me? thanks

I need to keep HTML tag on the words, ie:

I am a <span id="js-rotating">So Simple, <b>Very Doge</b>, <span class=""myclass>Much Wow</span>, Such Cool</span> Text Rotator

The plugin removes any HTML tags on the words. I know that probably this plugin is only for text (unformatted), but your plugin is awesome and the only thing I need is keeping html tags. Could you help me?

Thanks

Question solved:
How can I stop the rotate after it rotates all the words? I don't want a loop.

EDIT: solved with this #12