CODEWITHSUNDEEP
javascriptecmascript-6namespaces
HendrikEng
HendrikEng

Reputation: 684

Adding a const to an object literal in ES6

i am new to JS and i am trying to learn more about namespaces.

i am rewriting some animation tasks in ES6 and since use different animations for mobile and desktop animations i decided to put the mobile and desktop animations into their own namespaces.

however i am struggling to create scrollmagic controller in this namespace so i would be able to use the same controller for all mobile animations.

this is my animation.js

export const controller = new ScrollMagic.Controller();

/**
 * Mobile animations
 */

export const mobile = {

  servicesHome: {
    init: () => {
      const trigger = document.querySelectorAll('.js-service-trigger');
      const elements = document.getElementsByClassName('js-service-tile__fig');

      trigger.forEach((id, i) => {
        const scene = new ScrollMagic.Scene({
          triggerElement: id,
          reverse: true,
          triggerHook: 1,
          offset: 0,
          duration: 280,
        })
          .on('enter', () => {
            elements[i].classList.add('js-service-tile__fig--is-active');
          })
          .on('leave', () => {
            elements[i].classList.remove('js-service-tile__fig--is-active');
          })
          .addTo(controller);
      });
    },
  },
 };

i would prefer to achieve something like :

export const mobile = {

  controller: {
    const controller = new ScrollMagic.Controller();
  },

  servicesHome: {
    init: () => {
    .
    .
    .
          .addTo(this.controller);
      });
    },
  },
};

so the controller could sit inside the namespace its used but i get 'const is a reserved word' error as well as i can't access the controller with this.controller

Upvotes: 1

Views: 580

Answers (1)

Estus Flask
Estus Flask

Reputation: 222720

It should be

const controller = new ScrollMagic.Controller();
export const mobile = {
  controller,
  ...

Or if controller variable isn't used anywhere else, just

export const mobile = {
  controller: new ScrollMagic.Controller(),
  ...

Upvotes: 1

Related Questions