Tee Posted April 24, 2020 Share Posted April 24, 2020 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); Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 24, 2020 Share Posted April 24, 2020 Hey Tee. I'm not on a Windows PC at the moment. What does the dev tools console say? Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 24, 2020 Share Posted April 24, 2020 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); Link to comment Share on other sites More sharing options...
Tee Posted April 24, 2020 Author Share Posted April 24, 2020 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? Link to comment Share on other sites More sharing options...
PointC Posted April 24, 2020 Share Posted April 24, 2020 Edge doesn't like x/y in getBoundingClientRect(). You'll need to use left/top. 2 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted April 24, 2020 Share Posted April 24, 2020 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: 2 1 Link to comment Share on other sites More sharing options...
Tee Posted April 24, 2020 Author Share Posted April 24, 2020 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! Link to comment Share on other sites More sharing options...
OSUblake Posted April 24, 2020 Share Posted April 24, 2020 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 4 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now