A simple, high-performance and cross-browser jQuery rotating / carousel plugin for text phrases powered by Animate.css.

  • By Ian L.
  • Last update: Oct 2, 2022
  • Comments: 14

Morphext

Dev Dependency Status

A simple, high-performance and cross-browser jQuery rotating / carousel plugin for text phrases powered by Animate.css. It is more succinctly described by Softpedia as:

A jQuery plugin for creating text-based carousels, rotating small or large pieces of text one after the other, just like a slider does with images... This can be a great tool for displaying catch phrases, mission statements, tag lines, and so on.

If you would like to achieve a similar effect with more flexibility (e.g. out animation) and with HTML objects rather than text phrases (e.g. unordered list items), please check out Morphist.

Website / Demo

Install

Download from the project page.

Install with Bower: bower install --save Morphext

Usage

  1. Import the latest Animate.css and jQuery library into your HTML.

  2. Import morphext.css and include morphext.min.js in your HTML document.

  3. Encapsulate your rotating phrases in an element and separate each phrase with a comma or a separator of your choice:

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

  4. Trigger the plugin by calling Morphext() on the element containing the rotating phrases:

    $("#js-rotating").Morphext();

A demo titled index.html is included in this repository. Open it to see the end-result.

Options

Morphext exposes the following options to alter the behaviour of the plugin:

Option Type Default Description
animation string bounceIn The [in] animation type. Refer to Animate.css for a list of available animations.
separator string , An array of phrases to rotate are created based on this separator. Change it if you wish to separate the phrases differently (e.g. So Simple / Very Doge / Much Wow / Such Cool).
speed int 2000 The delay between the changing of each phrase in milliseconds.
complete object Function null A callback that is executed after an item is animated in.

They may be used like so:

$("#js-rotating").Morphext({
    animation: "fadeIn", // Overrides default "bounceIn"
    separator: "|", // Overrides default ","
    speed: 3000, // Overrides default 2000
    complete: function () {
        // Overrides default empty function
    }
});

The plugin relies heavily on Animate.css for its smooth, high performance animations to transition between each phrase. Thus, the default animation speed (different from the interval between each phrase as described above) may be altered via CSS:

#yourElement, .yourClass {
    /* Overrides Animate.css 1s duration */
    -vendor-animation-duration: 3s;
}

"Issues"

Issue Description Solution
Viewport Certain animations (e.g. "up" and "down") by Animate.css involves translating the element beyond the viewport thereby leading to unintended vertical and/or horizontal whitespace (further evident by the scrollbar "following" the animation effect. This is not a bug. It may be eradicated by applying overflow: hidden; (CSS) to the parent of the element being animated.
JavaScript JavaScript is required for the addition / removal of elements with Animate.css [CSS animation] classes thereby creating the "transitioning effect". If JavaScript is disabled or unavailable, nothing will happen. All the phrases and its separator will be shown as it is (graceful degradation). N/A
CSS3 Animate.css relies on CSS3 animations and transformations (available in most modern browsers). If CSS3 is disabled or unavailable, the phrases will continue to transition from one to another (assuming JavaScript is enabled), but there will be no animation effect. No fallback is provided by this plugin. You may however, handle the fallback through the use of Modernizr (for feature detection) and polyfills.

Should you encounter any problems or require assistance with this plugin, simply open a GitHub issue in this repository or you may contact me via Twitter.

Prerequisites

Others

Native ports of Morphext have been developed in other JavaScript frameworks (e.g. React and Polymer):

They are not part of the official plugin development and the approach used in developing these ports may not be idiomatic. Please use them at your own risk.

Issues and pull requests are welcomed.

License

Morphext is licensed under the MIT license (http://ian.mit-license.org/).

Github

https://github.com/MrSaints/Morphext

Comments(14)

  • 1

    Iteration control & using a 2nd or third

    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-

  • 2

    The latest version tag problem

    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! image

    cdnjs/cdnjs#9219

  • 3

    Reset to first word upon click of a button

    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!

  • 4

    more compress and seccure this plugin

    (function($,c,l,d){"use strict";d={animation:"fadeInDown",separator:",",speed:2e3,complete:$.noop};function a(b,f){var e=$(b).addClass(c),se=$.extend({},d,f),t=this,ph=[],ival,i;t.animate=function(){i=++i%ph.length;e.html('<span class="animated '+se.animation+'">'+ph[i]+"</span>");$.isFunction(se.complete)&&se.complete.call(t)};t.start=function(){ival=setInterval(t.animate,se.speed)};t.stop=function(){clearInterval(ival)};$.each(e.html().split(se.separator),function(k,v){ph.push($.trim(v))});i=-1;t.animate();t.start()}$.fn[c]=function(d){return this.each(function(){$.data(this,l+c)||$.data(this,l+c,new a(this,d))})}})(jQuery,"morphext","plugin_");
  • 5

    linebreak

    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.

  • 6

    Conflict with the animate.css latest version!

    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?

  • 7

    Typo in the instructions on morphext.fyianlai.com

    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 /

  • 8

    Morphext is not a function

    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

  • 9

    Help request safari buggy in front of video

    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.

  • 10

    Plugin removes HTML tags on words

    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 https://github.com/MrSaints/Morphext/issues/12/#issuecomment-158661475

  • 11

    How to override options?

    `$.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;

  • 12

    Prevent all phrases from flashing inside rotating element on page load

    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
 });
  • 13

    There is miss git tags v2.4.5~v2.4.7 on GitHub repository

    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: https://github.com/MrSaints/Morphext/commit/664913f2f1056675af41cbfbac986687fe27558b v2.4.6: https://github.com/MrSaints/Morphext/commit/33c44b7e74d0a6d714d543d7cd1e0d06676266b0 v2.4.7: https://github.com/MrSaints/Morphext/commit/e9c1d2d4e2e9081e1c3821b28c04b4ae67766559

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

    cdnjs/cdnjs#11289

  • 14

    Changing speed of animation depending on index

    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

Popular Tag

Related