Text animation is upside down in explorer

Report · Apr 09, 2019

Hi all,

For some reason some animated text is showing up upside down in Explorer. This is my custom code block inside of iON Interactive so please ignore the crazy code.

It's in the yellow midway down the page. Any ideas? This is a new one for me .

Premier | ProvideGx

Report · Apr 09, 2019

Who or what created the animation?

Does the animation work in a plain vanilla layout without any other CSS or scripts?

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 09, 2019

I customized an animation from codepen. From what I have found since posting this is an IE11 issue only. For some reason it doesn't like the transform fuction.

This is a thread I was just reading.

javascript - CSS transform rotate not working in internet explorer 11 - Stack Overflow

Report · Apr 09, 2019

This is the full code: Some of the CSS may be irrelevant. I deleted other animation examples from the html.

<!doctype html>

<html>

<head>

<style>

html {

height: 100%;

}

body {

padding: 0;

text-align: center;

font-family: 'Roboto Slab', serif;

position: relative;

margin: 0;

height: 100%;

}

.wrapper {

height: auto !important;

height: 100%;

margin: 0 auto;

overflow: hidden;

}

a {

text-decoration: none;

}

h1, h2 {

width: 100%;

float: left;

}

h1 {

margin-top: 100px;

color: #555;

margin-bottom: 5px;

}

.rotatecontainer {

float: left;

width: 100%;

margin: 0 auto;

}

.rotatecontainer h1 {

padding:80px 50px;

float: left;

width: 100%;

font-size: 55px;

box-sizing: border-box;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

font-weight: 100;

color: white;

margin: 0;

}

.rotatecontainer .demo4 {

background: #ffc627;

line-height:.5;

}

.rotating {

display: inline-block;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

-ms-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);

-moz-transform: rotateX(0) rotateY(0) rotateZ(0);

-ms-transform: rotateX(0) rotateY(0) rotateZ(0);

-o-transform: rotateX(0) rotateY(0) rotateZ(0);

transform: rotateX(0) rotateY(0) rotateZ(0);

-webkit-transition: 0.5s;

-moz-transition: 0.5s;

-ms-transition: 0.5s;

-o-transition: 0.5s;

transition: 0.5s;

-webkit-transform-origin-x: 50%;

}

.rotating.flip {

position: relative;

}

.rotating .front, .rotating .back {

left: 0;

top: 0;

-webkit-backface-visibility: hidden;

-moz-backface-visibility: hidden;

-ms-backface-visibility: hidden;

-o-backface-visibility: hidden;

backface-visibility: hidden;

}

.rotating .front {

position: absolute;

display: inline-block;

-webkit-transform: translate3d(0,0,1px);

-moz-transform: translate3d(0,0,1px);

-ms-transform: translate3d(0,0,1px);

-o-transform: translate3d(0,0,1px);

transform: translate3d(0,0,1px);

}

.rotating.flip .front {

z-index: 1;

}

.rotating .back {

display: block;

opacity: 0;

}

.rotating.spin {

-webkit-transform: rotate(360deg) scale(0);

-moz-transform: rotate(360deg) scale(0);

-ms-transform: rotate(360deg) scale(0);

-o-transform: rotate(360deg) scale(0);

transform: rotate(360deg) scale(0);

}

.rotating.flip .back {

z-index: 2;

display: block;

opacity: 1;

-webkit-transform: rotateY(180deg) translate3d(0,0,0);

-moz-transform: rotateY(180deg) translate3d(0,0,0);

-ms-transform: rotateY(180deg) translate3d(0,0,0);

-o-transform: rotateY(180deg) translate3d(0,0,0);

transform: rotateY(180deg) translate3d(0,0,0);

}

.rotating.flip.up .back {

-webkit-transform: rotateX(180deg) translate3d(0,0,0);

-moz-transform: rotateX(180deg) translate3d(0,0,0);

-ms-transform: rotateX(180deg) translate3d(0,0,0);

-o-transform: rotateX(180deg) translate3d(0,0,0);

transform: rotateX(180deg) translate3d(0,0,0);

}

.rotating.flip.cube .front {

-webkit-transform: translate3d(0,0,100px) scale(0.9,0.9);

-moz-transform: translate3d(0,0,100px) scale(0.85,0.85);

-ms-transform: translate3d(0,0,100px) scale(0.85,0.85);

-o-transform: translate3d(0,0,100px) scale(0.85,0.85);

transform: translate3d(0,0,100px) scale(0.85,0.85);

}

.rotating.flip.cube .back {

-webkit-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.9,0.9);

-moz-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);

-ms-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);

-o-transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);

transform: rotateY(180deg) translate3d(0,0,100px) scale(0.85,0.85);

}

.rotating.flip.cube.up .back {

-webkit-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.9,0.9);

-moz-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);

-ms-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);

-o-transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);

transform: rotateX(180deg) translate3d(0,0,100px) scale(0.85,0.85);

}

</style>

$(document).ready(function(){

$(".demo4 .rotate").textrotator({

animation: "flipUp",

speed: 1750

});

</script>

/* ===========================================================

* jquery-simple-text-rotator.js v1

* ===========================================================

* http://www.thepetedesign.com

*

* A very simple and light weight jQuery plugin that

* allows you to rotate multiple text without changing

* the layout

* https://github.com/peachananr/simple-text-rotator

*

* ========================================================== */

!function($){

var defaults = {

animation: "dissolve",

separator: ",",

speed: 2000

};

$.fx.step.textShadowBlur = function(fx) {

$(fx.elem).prop('textShadowBlur', fx.now).css({textShadow: '0 0 ' + Math.floor(fx.now) + 'px black'});

};

$.fn.textrotator = function(options){

var settings = $.extend({}, defaults, options);

return this.each(function(){

var el = $(this)

var array = [];

$.each(el.text().split(settings.separator), function(key, value) {

array.push(value);

});

el.text(array[0]);

// animation option

var rotate = function() {

switch (settings.animation) {

case 'dissolve':

el.animate({

textShadowBlur:20,

opacity: 0

}, 500 , function() {

index = $.inArray(el.text(), array)

if((index + 1) == array.length) index = -1

el.text(array[index + 1]).animate({

textShadowBlur:0,

opacity: 1

}, 500 );

});

break;

case 'flip':

if(el.find(".back").length > 0) {

el.html(el.find(".back").html())

}

var initial = el.text()

var index = $.inArray(initial, array)

if((index + 1) == array.length) index = -1

el.html("");

$("<span class='front'>" + initial + "</span>").appendTo(el);

$("<span class='back'>" + array[index + 1] + "</span>").appendTo(el);

el.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip").show().css({

"-webkit-transform": " rotateY(-180deg)",

"-moz-transform": " rotateY(-180deg)",

"-o-transform": " rotateY(-180deg)",

"transform": " rotateY(-180deg)"

})

break;

case 'flipUp':

if(el.find(".back").length > 0) {

el.html(el.find(".back").html())

}

var initial = el.text()

var index = $.inArray(initial, array)

if((index + 1) == array.length) index = -1

el.html("");

$("<span class='front'>" + initial + "</span>").appendTo(el);

$("<span class='back'>" + array[index + 1] + "</span>").appendTo(el);

el.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip up").show().css({

"-webkit-transform": " rotateX(-180deg)",

"-moz-transform": " rotateX(-180deg)",

"-o-transform": " rotateX(-180deg)",

"transform": " rotateX(-180deg)"

})

break;

case 'flipCube':

if(el.find(".back").length > 0) {

el.html(el.find(".back").html())

}

var initial = el.text()

var index = $.inArray(initial, array)

if((index + 1) == array.length) index = -1

el.html("");

$("<span class='front'>" + initial + "</span>").appendTo(el);

$("<span class='back'>" + array[index + 1] + "</span>").appendTo(el);

el.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip cube").show().css({

"-webkit-transform": " rotateY(180deg)",

"-moz-transform": " rotateY(180deg)",

"-o-transform": " rotateY(180deg)",

"transform": " rotateY(180deg)"

})

break;

case 'flipCubeUp':

if(el.find(".back").length > 0) {

el.html(el.find(".back").html())

}

var initial = el.text()

var index = $.inArray(initial, array)

if((index + 1) == array.length) index = -1

el.html("");

$("<span class='front'>" + initial + "</span>").appendTo(el);

$("<span class='back'>" + array[index + 1] + "</span>").appendTo(el);

el.wrapInner("<span class='rotating' />").find(".rotating").hide().addClass("flip cube up").show().css({

"-webkit-transform": " rotateX(180deg)",

"-moz-transform": " rotateX(180deg)",

"-o-transform": " rotateX(180deg)",

"transform": " rotateX(180deg)"

})

break;

case 'spin':

if(el.find(".rotating").length > 0) {

el.html(el.find(".rotating").html())

}

index = $.inArray(el.text(), array)

if((index + 1) == array.length) index = -1

el.wrapInner("<span class='rotating spin' />").find(".rotating").hide().text(array[index + 1]).show().css({

"-webkit-transform": " rotate(0) scale(1)",

"-moz-transform": "rotate(0) scale(1)",

"-o-transform": "rotate(0) scale(1)",

"transform": "rotate(0) scale(1)"

})

break;

case 'fade':

el.fadeOut(settings.speed, function() {

index = $.inArray(el.text(), array)

if((index + 1) == array.length) index = -1

el.text(array[index + 1]).fadeIn(settings.speed);

});

break;

}

};

setInterval(rotate, settings.speed);

});

}

}(window.jQuery);

</script>

</head>

<body>

<h1 class="demo4"><span style="font-size:30px;color:#000000;line-height:1;font-family: 'Roboto', sans-serif;font-weight:100;">ProvideGx is guided by an advisory committee which includes 20 health systems:</span><br><br><span style="line-height: 1.25;font-family: 'Roboto Slab', serif;font-weight:400;" class="rotate">Acurity, Adventist Health (Advent FL), Adventist Health (CA), Atrium (Carolinas), Avera Health, Banner Health, Baycare Health System, Baystate Health, Bon Secours MD Anderson, Mercy Health, Fairview Health, Geisinger, McLaren Healthcare, OSF Healthcare, PeaceHealth, Texas Health Resources, UPMC, Yankee Alliance</span> </h1>

</div>

</body>

</html>

Report · Apr 09, 2019

It works well in the latest browsers... Is there a reason you want to support this for IE? If it's not necessary for that browser, can you disable the transform for that version?

Hope this helps!
Make sure to press "✔ Correct Answer" on this post if this answers your question. Happy Creating!
Anissa • @anissat

Report · Apr 09, 2019

I don't like how the animation works. It's kind of jerky and disjointed. Maybe I'm the only one noticing it?

I would replace what's there with jQuery. Less code and better X browser support..

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 10, 2019

https://forums.adobe.com/people/Nancy+OShea wrote
I don't like how the animation works. It's kind of jerky and disjointed. Maybe I'm the only one noticing it?
I would replace what's there with jQuery. Less code and better X browser support..

I concur. To me the animation looks too jerky and the code is hugley verbose but I think that's because it's some kind of off-the-shelf plugin which probably has a variety of options available. If you want to address all browsers, including IE I would most likely just go for a simple fade in/out approach rather than the fliping effect, which really adds nothing much in my opinion.

Adobe Community

Text animation is upside down in explorer