shwarp shwarp - 3 months ago 14
Javascript Question

GreenSock TimelineMax on path elements not working in Safari and Firefox

I'm trying to animate several path elements that I create and append in JavaScript/jQuery. Then I'm using a Timeline to animate those elements one by one (with different values so I can't use a stagger). At the end I don't want to play the full timeline but just a percentage of it.

This works just fine in Chrome but doesn't in Safari and Firefox, and I can't figure out why.

Here is a CodePen:
http://codepen.io/elisabeth_hamel/pen/kXqOmw

EDIT :
The CodePen was updated and is now working.

And here is the code:

HTML

<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 2 1' preserveAspectRatio='xMinYMid meet'></svg>


CSS

svg{
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 60px;
margin: auto;
overflow: visible;
z-index: 1;
.up{
-webkit-transform: translate3d(0, 40px, 0);
transform: translate3d(0, 40px, 0);
}
.down{
-webkit-transform: translate3d(0, 40px, 0);
transform: translate3d(0, -40px, 0);
}
}


JS

$(function(){
var trianglesTimeline = new TimelineMax({paused: true, smoothChildTiming: true});

function setAnimations(){
var nbTriangles, i = 0, svg = '', random = 1, thisPath;

nbTriangles = ($(window).width() - 60)/9 | 0;
for(i; i<nbTriangles; i++){
random = (Math.random()*(2.5-0.5) + 0.5).toFixed(1);
if(i%2 === 0){
svg += "<path fill='#000' d='M0 0H2 L1 1Z' class='down' data-op='"+random+"' data-x='"+i+"' style='opacity:0'/>";
}else{
svg += "<path fill='#000' d='M0 1H2 L1 0Z' class='up' data-op='"+random+"' data-x='"+i+"' style='opacity:0'/>";
}
}
$('svg').html(svg);

i = 0;
for(i; i<nbTriangles; i++){
thisPath = $('path').eq(i);
TweenMax.set(thisPath, {x: thisPath.data('x')}, 0);
trianglesTimeline.to(thisPath, 0.3, {opacity: thisPath.data('op'), y: '0px', delay: 0.04*i}, 0);
}
trianglesTimeline.tweenTo( trianglesTimeline.duration() * 0.1 );
}

setAnimations();
});


Any help would be appreciated!

Answer

Ok so, turns out the CSS rule transform rule was overriding the transform set by TweenMax on path elements. I have no idea why!

So I replaced the classes by inline transforms. Here is the new working code if anyone is interested:

CSS

svg{
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 60px;
    margin: auto;
    overflow: visible;
    z-index: 1;
}

JS

$(function(){
    var trianglesTimeline = new TimelineMax({paused: true, smoothChildTiming: true});

    function setAnimations(){
        var nbTriangles, i = 0, svg = '', random = 1, thisPath;

        nbTriangles = ($(window).width() - 60)/9 | 0;
        for(i; i<nbTriangles; i++){
            random = (Math.random()*(2.5-0.5) + 0.5).toFixed(1);
            if(i%2 === 0){
                svg += "<path fill='#000' d='M0 0H2 L1 1Z' transform='translate("+i+", 40)' data-op='"+random+"' style='opacity:0'/>";
            }else{
                svg += "<path fill='#000' d='M0 1H2 L1 0Z' transform='translate("+i+", -40)' data-op='"+random+"' style='opacity:0'/>";
            }
        }
        $('svg').html(svg);

        i = 0;
        for(i; i<nbTriangles; i++){
            thisPath = $('path').eq(i);
            trianglesTimeline.to(thisPath, 0.3, {opacity: thisPath.data('op'), y: '0px', delay: 0.04*i}, 0);
        }
        trianglesTimeline.tweenTo( trianglesTimeline.duration() * 0.1 );
    }

    setAnimations();
});