Helmholtz Relaunch

Frontend-Development, HTML, CSS with SASS, Vanilla JS (ES6), Preact, GSAP, Typo3
Client: 3pc

The Helmholtz Association of German Research Centres is the largest scientific organisation in Germany. The relaunch included a complete rewrite of the frontend using the BEM methodology for HTML / CSS, Vanilla JS for interactive elements, Preact for a headless SOLR search and the GSAP animation library for storytelling.

helmholtz.de

  • Responsive Fluid Frontend

  • Modular SCSS with BEM

  • Headless SOLR Search with Preact

    									useEffect(() => {
    // if isOpen is true, prevent scoll on body element
    if (isOpen) {
      document.body.classList.add('nav-is-open');
    } else {
      document.body.classList.remove('nav-is-open');
    }
  }, [isOpen]);

  useEffect(() => {
    const hasActiveFilter = element => element.selected;
    const hasActiveFilters = facet.options.some(hasActiveFilter);
    setIsActive(hasActiveFilters);
  }, [facet, isOpen]);

  • GSAP Storytelling Page

    									ScrollTrigger.create({
      animation: tl,
      trigger: storyHeaderWrapper,
      pin: viewport.isDesktop
        ? true
        : viewport.isTablet
        ? true
        : viewport.isMobile
        ? false
        : '',
      start: () =>
        viewport.isDesktop
          ? '-99'
          : viewport.isTablet
          ? '-89'
          : viewport.isMobile
          ? '-81'
          : '',
      end: () => 'bottom top',
      toggleActions: 'play pause resume reset',
      scrub: 1,
      invalidateOnRefresh: true,
      onUpdate: self => progress(self),
      onLeave: () => {
        video.pause();
      },
      onEnterBack: () => {
        video.play();
      },
    });

  • Vanilla JS Interactive Elements

    									createSlider = () => {
    // configure Swiper to use modules
    Swiper.use([Navigation, Scrollbar, Pagination]);

    const swiperDefaultConfig = {
      scrollbar: {
        el: $('.swiper-scrollbar', this.container),
        hide: false,
        draggable: true,
      },
      navigation: {
        nextEl: $('.swiper-button--next', this.container),
        prevEl: $('.swiper-button--previous', this.container),
      },
      mousewheel: false,
      watchOverflow: true,
      slidesPerView: 'auto',
      watchSlidesProgress: true,
      speed: 400,
      on: {
        init: swiper => {
          this.onReady && this.onReady(swiper);
        },
      },
    };

    const sliderConfig = merge(swiperDefaultConfig, this.sliderOptions);

    this.swiper = new Swiper(this.target, sliderConfig);
  };