Jump to content
Search Community

Trying to recreate TweenMax animation with new gsap syntax

Shanda test
Moderator Tag

Recommended Posts

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

 

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 :) 

 

 

  • Like 2
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...