flim Posted October 29, 2021 Share Posted October 29, 2021 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 More sharing options...
Solution GreenSock Posted October 29, 2021 Solution Share Posted October 29, 2021 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. 1 Link to comment Share on other sites More sharing options...
flim Posted October 29, 2021 Author Share Posted October 29, 2021 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 More sharing options...
OSUblake Posted October 29, 2021 Share Posted October 29, 2021 Here's some docs on how that works (Object destructuring assignment). https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring 2 Link to comment Share on other sites More sharing options...
flim Posted October 29, 2021 Author Share Posted October 29, 2021 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 More sharing options...
OSUblake Posted October 29, 2021 Share Posted October 29, 2021 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 2 Link to comment Share on other sites More sharing options...
flim Posted October 29, 2021 Author Share Posted October 29, 2021 Many thanks for the links, very useful. 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