Inspiring

Question

Text animation is upside down in explorer

Forum|Forum|6 years ago
April 9, 2019
1 reply
1652 views

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

This topic has been closed for replies.

Nancy OShea

Community Expert

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

kineticcreative123Author

Inspiring

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>

anissa_thompson

Community Expert

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded