Владимир Голубь

Какой смысл применения тут gsap. Применяю его когда анимация зависит от прокрутки экрана, а тут после после смены слайда она запускается и все.

Аналогично
https://www.chartjs.org/docs/latest/charts/line.ht...

Можете попробовать сделать так:

scales: {
            x: {
                ticks: {
                    callback: function(value, index, values) {
                        return `<span>${ value.month }</span> ${ value.year }`;
                    }
                }
            }
        }

Посмотри на slyled-components

nodemon, причем тут webpack, если запускаете сервер на node.js

Можешь сделать это на slick slider

Моя версия на React

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

import './testMenu.css';

class testMenu extends Component {

    constructor(props) {
        super(props);

        this.state = {
            menu: [
                {
                    title: 'Пункт 1',
                    active: true
                },
                {
                    title: 'Пункт 2',
                    active: false
                },
                {
                    title: 'Пункт 3',
                    active: false
                },
                {
                    title: 'Пункт 4',
                    active: false
                },
                {
                    title: 'Пункт 5',
                    active: false
                }
            ]
        };

        this._menuItems = [];
        this._menuHover = null;
        this._menuBlock = null;

    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        if (this.state.menu != nextState.menu) {
            console.log('Should');
            return true;
        }

        return false;
    }

    componentDidMount() {
        this.getStyleMenuBlock()
    }

    componentDidUpdate() {
        this.getStyleMenuBlock();
    }

    handlerClickItem = (indexClick) => {
        let menuItems = this.state.menu.slice();

        menuItems.map((item, indexItem) => {
            if (indexItem == indexClick) {
                item.active = true;
            } else {
                item.active = false;
            }
        });

        this.setState({
            menu: menuItems
        })
    };

    getStyleMenuBlock = () => {

        let menuItems = this.state.menu.slice(),
            activeIndex = 0;

        let leftMenuBlock,
            leftMenuItem;

        menuItems.map((item, index) => {
            if (item.active) {
                activeIndex = index;
            }
        });

        leftMenuItem = ReactDOM.findDOMNode(this._menuItems[activeIndex]).getBoundingClientRect().left;
        leftMenuBlock = ReactDOM.findDOMNode(this._menuBlock).getBoundingClientRect().left;

        this._menuHover.style.transform = `translate3d(${ leftMenuItem - leftMenuBlock  }px, 0, 0)`;
        this._menuHover.style.width = ReactDOM.findDOMNode(this._menuItems[activeIndex]).getBoundingClientRect().width + 'px';
        this._menuHover.style.height = ReactDOM.findDOMNode(this._menuItems[activeIndex]).getBoundingClientRect().height + 'px';
    };

    render() {
        return (
            <div className='test-menu'>
                <ul className='test-menu__menu' ref={ref => { this._menuBlock = ref }}>
                    <React.Fragment>
                        {
                            this.state.menu.map((item, index) =>
                                <li
                                    key={ index }
                                    className={`test-menu__item ${ item.active ? 'test-menu__item_active' : '' }`}
                                    onClick={ () => this.handlerClickItem(index) }
                                    ref={ref => { this._menuItems[index] = ref; return true; }}
                                >{ item.title }</li>
                            )
                        }
                        <li
                            className='test-menu__hover'
                            ref={ref => { this._menuHover = ref }}
                        />
                    </React.Fragment>
                </ul>
            </div>
        )
    }
}

export default testMenu;

.test-menu {
    margin-top: 100px;
    display: flex;
}

.test-menu__menu {
    list-style-type: none;
    position: relative;
    display: flex;
    padding: 0;
    margin: 0;
    margin-left: 100px;
    margin-bottom: 100px;
    box-sizing: border-box;
}

.test-menu__item {
    padding: 5px 10px;
    border: 1px solid black;
    list-style-type: none;
    margin: 0 0 0 10px;
}

.test-menu__item_active {
    border: 1px solid red;
}

.test-menu__item:before {
    display: none;
}

.test-menu__block:before {
    display: none;
}

.test-menu__hover {
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
    height: 2px;
    background: red;
    opacity: 0.3;
    box-sizing: border-box;
    -webkit-transition: -webkit-transform 0.5s, width 0.5s, height 0.5s;
    transition: transform 0.5s, width 0.5s, height 0.5s;
    -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1);
    -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
    transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);
}

Функция load делает возможным загрузку html содержимого в выбранный элемент.

Для получения пути картинки В вашем случае, необходимо сделать ajax запрос на страницу с картинкой (если конечно это возможно без ошибки CORS), а далее путем парсинга, получить url картинки и вставить ее в style элемента.

Другой подход: в документации написано в случае успеха можно вызвать функцию. Где есть возможность получить доступ к полученным данным и уже спарсить их.

.load( url [, data] [, complete(responseText, textStatus, XMLHttpRequest)] )

Используй slick-slider или owl-gallery

Не совсем понятен Ваш вопрос, предположу, что имеете в виду это:

mass: [{
      textBlockShow: true,
      titleChildrenBox: 'Второй блок',
      textChildrenBox: 'А это я! На меня нажми и перейди',
      CheckBoxShow: false,
      ArrowBoxShow: true,
      sliderShow: false
     }
]

addElement = (el) => {
  mass.push({
        textBlockShow: el.textBlockShow ? el.textBlockShow : false,
        titleChildrenBox: el.titleChildrenBox ? el.titleChildrenBox : '',
        textChildrenBox: el.textChildrenBox ? el.textChildrenBox : '',
        CheckBoxShow: el.CheckBoxShow ? el.CheckBoxShow : false,
        ArrowBoxShow: el. ArrowBoxShow ? el. ArrowBoxShow : false,
        sliderShow: el.sliderShow ? el.sliderShow : false
  })
}

addElement({ sliderShow: true });

То есть в данном случае нет необходимости каждый раз указывать все значения.

Задай каждому слайду в data, к какому табу он принадлежит. По умолчанию поставь всем display: none, а по переключению вкладок показывай/скрывай необходимые слайды.

let galleries = document.getElementsByClassName('work-slide__gallery');

galleries.map((gallery, index) => {
  gallery.dataset.fancybox = `gallery_${ index }`;
}

Точный Ваш код не знаю, но предположу. Что нужно сделать что-то подобное.

Для простой реализации этого можно использовать фреймворки, посмотри на работу react, react-router.

Прочитай про роутинг на js.

Не знаю актуален ли вопрос.

Но если смотреть код компонента Layout, то ширину получаем из функции rhythm.

<div
        style={{
          marginLeft: `auto`,
          marginRight: `auto`,
          maxWidth: rhythm(24),
          padding: `${rhythm(1.5)} ${rhythm(3 / 4)}`,
        }}
      >

Она находится в utils

import { rhythm, scale } from "../utils/typography"

Она является свойством объекта typography

export const rhythm = typography.rhythm

Его мы получаем из

import Wordpress2016 from "typography-theme-wordpress-2016"

const typography = new Typography(Wordpress2016)

Для изменения исходных стилей можно попробовать (пример):

Wordpress2016.overrideThemeStyles = () => {
  return {
    "a.gatsby-resp-image-link": {
      boxShadow: `none`,
    },
  }
}

Они создают виртуальный DOM, с которым уже взаимодействуют.

Если хотите использовать без изменения HTML-кода, то можно использовать ref на нужном элементе.