Jump to content
GreenSock

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

Question about Javascript

Go to solution Solved by GreenSock,

Recommended Posts

In that CodePen, I cannot understand these few lines of code

 

const {
  gsap: { timeline, set, registerPlugin },
  ScrollTrigger,
} = window

What is the purpose of assign window to gsap, ScrollTrigger?

See the Pen KKVMmdz by jh3y (@jh3y) on CodePen

Link to comment
Share on other sites

  • Solution

That's not assigning window to gsap - it looks like he was just creating some aliases that were simpler to work with in his code. So he can reference timeline instead of gsap.timeline, and set instead of gsap.set. Another way of writing that would be: 

const timeline = window.gsap.timeline;
const set = window.gsap.set;
const registerPlugin = window.gsap.registerPlugin;
const ScrollTrigger = window.ScrollTrigger;

Does that clear things up? 

 

It's part of the more modern ES6 syntax sugar.

  • Thanks 1
Link to comment
Share on other sites

Thanks for explaining that, those modern JS syntaxes are really like puzzle.

 

But I don't understand why add window before the gsap.timeline etc.?

Link to comment
Share on other sites

Thanks for the docs link. But I not quit understand why need to include window, because if I remove window then the code will not work. In other examples there is no window before gsap.registerPlugin.

 

const registerPlugin = gsap.registerPlugin;

 

Also I cannot get the meaning of "..." in the line "...document.querySelectorAll(".apple-image--complete")"

const COMPLETES = [
  ...document.querySelectorAll(".apple-image--complete"),
  document.querySelector(".apple-image--complete"),
];
 
Link to comment
Share on other sites

23 minutes ago, flim said:

But I not quit understand why need to include window, because if I remove window then the code will not work. In other examples there is no window before gsap.registerPlugin.

 

You don't need to include it. Just do it the way we show in our docs and demos. You do not need to refer the window for any GSAP stuff. The author of that CodePen is just using an advanced coding style. In fact, it's the first time I've seen someone do that.

 

// const {
//   gsap: { timeline, set, registerPlugin },
//   ScrollTrigger,
// } = window

// registerPlugin(ScrollTrigger)


gsap.registerPlugin(ScrollTrigger)

const setClip = () =>
  gsap.set('.logo path', {
    x: () => window.innerWidth / 2 - 12,
    y: () => window.innerHeight / 2 - 12,
    scale: 0,
    transformOrigin: '50% 50%',
  })

setClip()
ScrollTrigger.addEventListener('refresh', () => {
  setClip()
  document.documentElement.scrollTop = 0
})

...

const INTRO = () =>
  gsap.timeline({
    scrollTrigger: {
      scrub: 0.5,
      trigger: '.section--intro',
      pin: '.section--intro .section__content',
      start: 'top top',
      end: 'bottom bottom',
    },
  })

 

13 minutes ago, flim said:

Also I cannot get the meaning of "..." in the line "...document.querySelectorAll(".apple-image--complete")"

 

It's more ES6 code. That's just another way to concat and copy arrays.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_array_literals

 

A good resources for a lot of the stuff you're bringing up can be found in this JavaScript course. It's really good!

https://wesbos.com/javascript

 

  • Like 2
Link to comment
Share on other sites

Many thanks for the links, very useful.

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.
×