Shanda Posted September 16, 2020 Share Posted September 16, 2020 I made the mistake of sharing this animation with my team before I figured out how it works without ExpoScaleEase. My changes are in the codepen under the JS and commented out. Any help is very much appreciated. TweenMax.set(".play-circle-01", { rotation: 90, transformOrigin: "center" }) TweenMax.set(".play-circle-02", { rotation: -90, transformOrigin: "center" }) TweenMax.set(".play-perspective", { xPercent: 6.5, scale: .175, transformOrigin: "center", perspective: 1 }) TweenMax.set(".play-video", { visibility: "hidden", opacity: 0, }) TweenMax.set(".play-triangle", { transformOrigin: "left center", transformStyle: "preserve-3d", rotationY: 10, scaleX: 2 }) const rotateTL = new TimelineMax({ paused: true }) .to(".play-circle-01", .7, { opacity: .1, rotation: '+=360', strokeDasharray: "456 456", ease: Power1.easeInOut }, 0) .to(".play-circle-02", .7, { opacity: .1, rotation: '-=360', strokeDasharray: "411 411", ease: Power1.easeInOut }, 0) const openTL = new TimelineMax({ paused: true }) .to(".play-backdrop", 1, { opacity: .95, visibility: "visible", ease: Power2.easeInOut }, 0) .to(".play-close", 1, { opacity: 1, ease: Power2.easeInOut }, 0) .to(".play-perspective", 1, { xPercent: 0, scale: 1, ease: Power2.easeInOut }, 0) .to(".play-triangle", 1, { scaleX: 1, ease: ExpoScaleEase.config(2, 1, Power2.easeInOut) }, 0) .to(".play-triangle", 1, { rotationY: 0, ease: ExpoScaleEase.config(10, .01, Power2.easeInOut) }, 0) .to(".play-video", 1, { visibility: "visible", opacity: 1 }, .5) const button = document.querySelector(".play-button") const backdrop = document.querySelector(".play-backdrop") const close = document.querySelector(".play-close") button.addEventListener("mouseover", () => rotateTL.play()) button.addEventListener("mouseleave", () => rotateTL.reverse()) button.addEventListener("click", () => openTL.play()) backdrop.addEventListener("click", () => openTL.reverse()) close.addEventListener("click", e => { e.stopPropagation() openTL.reverse() }) /* updating to new v of gsap gsap.set(".play-circle-01", { rotation: 90, transformOrigin: "center" }) gsap.set(".play-circle-02", { rotation: -90, transformOrigin: "center" }) gsap.set(".play-perspective", { xPercent: 6.5, scale: .175, transformOrigin: "center", perspective: 1 }) gsap.set(".play-video", { visibility: "hidden", opacity: 0, }) gsap.set(".play-triangle", { transformOrigin: "left center", transformStyle: "preserve-3d", rotationY: 10, scaleX: 2 }) const rotateTL = new gsap({ paused: true }) .to(".play-circle-01", .7, { opacity: .1, rotation: '+=360', strokeDasharray: "456 456", ease: Power1.easeInOut }, 0) .to(".play-circle-02", .7, { opacity: .1, rotation: '-=360', strokeDasharray: "411 411", ease: Power1.easeInOut }, 0) const openTL = new gsap({ paused: true }) .to(".play-backdrop", 1, { opacity: .95, visibility: "visible", ease: Power2.easeInOut }, 0) .to(".play-close", 1, { opacity: 1, ease: Power2.easeInOut }, 0) .to(".play-perspective", 1, { xPercent: 0, scale: 1, ease: Power2.easeInOut }, 0) .to(".play-triangle", 1, { scaleX: 1, ease: Power4(2, 1, Power2.easeInOut) }, 0) .to(".play-triangle", 1, { rotationY: 0, ease: Power4(10, .01, Power2.easeInOut) }, 0) .to(".play-video", 1, { visibility: "visible", opacity: 1 }, .5) const button = document.querySelector(".play-button") const backdrop = document.querySelector(".play-backdrop") const close = document.querySelector(".play-close") button.addEventListener("mouseover", () => rotateTL.play()) button.addEventListener("mouseleave", () => rotateTL.reverse()) button.addEventListener("click", () => openTL.play()) backdrop.addEventListener("click", () => openTL.reverse()) close.addEventListener("click", e => { e.stopPropagation() openTL.reverse() }) */ See the Pen ZEWjYqd by okcwebdev (@okcwebdev) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted September 16, 2020 Share Posted September 16, 2020 Hey @Shanda - welcome to the forum. I might misunderstand, but why couldn't you use the ExpoScaleEase? gsap.fromTo("#image", {scale: 0.5}, {duration: 1, scale: 3, ease: "expoScale(0.5, 3, power2.inOut)"}); 2 Link to comment Share on other sites More sharing options...
akapowl Posted September 16, 2020 Share Posted September 16, 2020 Not sure if I actually got everything in there to new syntax or if I might have missed something, but here you go See the Pen 0b74b8ba3f7846d4bc2150c2b8dfdfe8 by akapowl (@akapowl) on CodePen Also there's little things you could want to adjust. For example, if you tween on opacity and visibility at the same time you could also simply just tween on autoAlpha. gsap.to(".something", { duration: 1.0, opacity: 1, visibility: "visible" }) could also be gsap.to(".something", { duration: 1.0, autoAlpha: 1 }) Or if inside a timeline all your tweens have a duration of 1.0, you could set defaults for the timeline, like so const openTL = gsap.timeline({ paused: true, defaults: { duration: 1.0} }) and wouldn't have to set that duration of 1.0 to every single tween. (Can also do that with eases etc. ) But those are just suggestions 2 Link to comment Share on other sites More sharing options...
Shanda Posted September 19, 2020 Author Share Posted September 19, 2020 On 9/16/2020 at 6:38 PM, akapowl said: Not sure if I actually got everything in there to new syntax or if I might have missed something, but here you go Also there's little things you could want to adjust. For example, if you tween on opacity and visibility at the same time you could also simply just tween on autoAlpha. gsap.to(".something", { duration: 1.0, opacity: 1, visibility: "visible" }) could also be gsap.to(".something", { duration: 1.0, autoAlpha: 1 }) Or if inside a timeline all your tweens have a duration of 1.0, you could set defaults for the timeline, like so const openTL = gsap.timeline({ paused: true, defaults: { duration: 1.0} }) and wouldn't have to set that duration of 1.0 to every single tween. (Can also do that with eases etc. ) But those are just suggestions @akapowl Thank you for your help and the bonus tip! 1 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