Animation won't work in Edge

[Tee 3 Likes (Newbie)]

So I got the following gsap animation inside of a function to animate some of my content - it works fine in ever browser, but not for Edge - how so? Do I need some polyfill? 

 

Additionally FYI only the element img is not being animated - the rest (left, right) is. For some reason, inspecting the img element, it solely says translate3d(0,0,0).

I tried matrix, I tried force3D but nothing helped.

 

const currentBounds = {
    x: img.getBoundingClientRect().x,
    y: img.getBoundingClientRect().y,
    width: img.getBoundingClientRect().width,
    height: img.getBoundingClientRect().height
};

const scale = ((window.innerWidth * 42) / 100 - currentBounds.width) / currentBounds.width + 1;

const newPos = {
    x: (window.innerWidth / 2 - currentBounds.width / 2) - currentBounds.x,
    y: window.innerHeight * 0.6
};

const matrix = 'matrix(' + scale + ',0,0,' + scale + ',' + newPos.x + ',' + newPos.y + ')';

const ease = Quint.easeInOut;

gsap.timeline().set(title,{
    opacity: 1
});

animation = gsap.timeline({onReverseComplete: () => {
        activeTile = -1;
        document.querySelector('.ch__cart-holder').style.pointerEvents = 'auto';
        title.style.opacity = null
    }
})
    .to(img, 1, {
        ease: ease,
        x: newPos.x,
        y: newPos.y,
        scale: scale,
        force3D: true
        // transform: matrix
    }, 0)
    .to(left, 1, {
        ease: ease,
        x: -3000,
        opacity: 0,
        force3D: true
    }, 0)
    .to(right, 1, {
        ease: ease,
        x: 3000,
        opacity: 0,
        force3D: true
    }, 0)
    .to(title, 1, {
        ease: ease,
        y: 0,
        yPercent: -50,
        opacity: 1,
        color: 'black'
    }, 0.75);

 

[ZachSaucier 7,050 Likes (Superhero)]

Hey Tee. I'm not on a Windows PC at the moment. What does the dev tools console say?

[ZachSaucier 7,050 Likes (Superhero)]

Side note: I think you're really like some of GSAP 3's features like defaults. Here's how I'd write your JS:

const currentBounds = img.getBoundingClientRect();

const scale = ((window.innerWidth * 42) / 100 - currentBounds.width) / currentBounds.width + 1;

const newPos = {
    x: (window.innerWidth / 2 - currentBounds.width / 2) - currentBounds.x,
    y: window.innerHeight * 0.6
};

gsap.set(title, { opacity: 1 });

animation = gsap.timeline({
    defaults: {duration: 1, ease: "power4.inOut"}, 
    onReverseComplete: () => {
        activeTile = -1;
        gsap.set('.ch__cart-holder', {pointerEvents: 'auto'});
        gsap.set(title, {clearProps: 'opacity'});
    }
})
    .to(img, {
        x: newPos.x,
        y: newPos.y,
        scale: scale
    }, 0)
    .to(left, {
        x: -3000,
        opacity: 0
    }, "<")
    .to(right, {
        x: 3000,
        opacity: 0
    }, "<")
    .to(title, {
        y: 0,
        yPercent: -50,
        opacity: 1,
        color: 'black'
    }, 0.75);

 

[Tee 3 Likes (Newbie)]

22 minutes ago, ZachSaucier said:

Hey Tee. I'm not on a Windows PC at the moment. What does the dev tools console say?

 

Nothing, but I tried logging currentBounds with all the values of the current position from getBoundingClientRect() - but smh this didn't return any values, even though Edge should support getBoundingClientRect() - any ideas? 

 

And thanks for the hints, definetely gonna use 'em! What does "<" mean though?

[PointC 13,796 Likes (Superhero)]

Edge doesn't like x/y in getBoundingClientRect(). You'll need to use left/top. 

[ZachSaucier 7,050 Likes (Superhero)]

1 minute ago, Tee said:

What does "<" mean though?

It means start at the beginning of the previous tween declared before that tween. See this post on the position parameter for more info:

 

[Tee 3 Likes (Newbie)]

5 minutes ago, PointC said:

Edge doesn't like x/y in getBoundingClientRect(). You'll need to use left/top. 

Did the trick, thank you! 

[OSUblake 18,336 Likes (Superhero)]

This seems redundant. 

const currentBounds = {
    x: img.getBoundingClientRect().x,
    y: img.getBoundingClientRect().y,
    width: img.getBoundingClientRect().width,
    height: img.getBoundingClientRect().height
};

 

Why not do this?

 

const currentBounds = img.getBoundingClientRect();

 

Just be sure to use left, top for your calcs.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Browser_compatibility