Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
AlexN

Prettify the code

Go to solution Solved by ZachSaucier,

Recommended Posts

Hi All!
First of all I want to say Thanks for the magnificent product for animation. It saves so much time which we can spend on family :)

 

I will be appropriate for your help in beautifying my code, if it is possible.

 

I'm just start using GSAP and don't know if my code is optimized and pretty enough. But it works!

 

const tl = gsap.timeline({ repeat: -1, repeatDelay: 2 });

    gsap.to(".path", 50, {
      strokeDashoffset: -1000,
      ease: 'none',
      repeat: -1,
    });

    gsap.set(".plane", {
      xPercent: -50,
      yPercent: -50,
      transformOrigin: '50% 50%',
      scale: 0.7,
      autoAlpha: 0,
    });

    tl.to(".plane", {
      duration: 1,
      autoAlpha: 1,
    })
      .to(".plane",
        {
          duration: 7,
          ease: 'none',
          motionPath: {
            align: ".path",
            path: ".path",
            autoRotate: true,
            curviness: 0.5,
          },
        },
        '-=1'
      )
      .to(".plane", { duration: 3, scale: 0 }, '-=2')
      .to(".pin",
        {
          duration: 1,
          scale: 1.1,
          skewX: -10,
          rotate: 20,
          transformOrigin: '50% 100%',
        },
        '-=2'
      )
      .to(".pin",
        {
          duration: 1.5,
          scale: 1,
          skewX: 0,
          rotate: 0,
          transformOrigin: '50% 100%',
          ease: 'elastic.out(1.5, 0.2)',
        },
        '-=1'
      );

 

How it looks?

Link to comment
Share on other sites

Everything looks pretty good to me! Personal preference: I break and indent the first .to in the tl.to:

const tl = gsap.timeline();

...

tl
  .to(".plane", {
    duration: 1,
    autoAlpha: 1,
  })
  .to(...);

Note: this will not change anything from a performance standpoint, just readability. Happy tweening!

You could also just do:
 

gsap.timeline({...})
  .to('.el', {...})
  .to(...);

 

  • Like 1
Link to comment
Share on other sites

Hey Alex and welcome to the GreenSock forums.

 

We also recommend using the duration property inside of the vars instead of using the duration parameter. 

 

  • Like 2
Link to comment
Share on other sites

Thank you for the answers ! Should I close, or delete a topic somehow?

Link to comment
Share on other sites

  • Solution

You could click the "Mark as solution" button that's in the bottom of each post, but you don't have to do that. 

Link to comment
Share on other sites

7 minutes ago, AlexN said:

Should I close, or delete a topic somehow?

You usually buy a pizza for anyone who gave you an answer. 🍕:D

 

Click the "Mark As Solution" and you're good to go. Happy tweening.

 

  • Like 1
  • Haha 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.
×