Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by sebHewelt


    So I have two timelines:

    - masterTl 

    - subTl (within masterTl)


    What i want to achieve:

    I would like my canvas element to be hidden, and set to visible on start of the animation.


    What i get:

    When I set visibility in CSS to hidden, and set it back to visible at the beginning of the timeline...:



    canvas {
      visibility: hidden;


    .set(canvas, {
    visibility: 'visible'


    ...it immediately sets visibility: 'visible', when the subTl has no {paused: true} set. If I set {paused: true} on subTl it works, but stays paused (therefore does not set visibility to visible) on masterTl.play(), (which is obvious). I don't know how to get around it.

    I tried to set  {immediateRender: false} in both timelines - no luck.



    Here are two examples, one with subTl {paused: true}, and the other one without that setting:


    Pen with {paused: true}

    See the Pen WZaOOQ by RycerzPegaza (@RycerzPegaza) on CodePen


    Pen without {paused: true}

    See the Pen pWxwPE?editors=0010 by RycerzPegaza (@RycerzPegaza) on CodePen


    Help desperately needed :)



  2. I managed to make it work by extracting the animation into a function.

    As I am using React, I imported that function with the rest of the animation and called it in componentDidMount method.



    But, in the meantime I logged gsap globals, as you @OSUblake advised:


    console.log("GSAP Globals", window.com.greensock);


    and although I import only those:


    import { TimelineLite, CSSPlugin, Power2, Power3 } from 'gsap';


    in the console, it logs everything! Whaaat? What is TweenMax and others  not imported partials doing here?




    I guess this is not what should be available right? Especially that I do not import any of these in any other files.


  3. Hello The People of Greensock,


    I've been working with a static site generator for react lately - Gatsby.js. One of the components has a menu animation attached. In development the animation works just fine, but when deployed it just doesn't trigger.


    Code is bundled and minified with webpack.


    The weird thing is, GSAP loads up properly, the console is clear, no errors.  It's hard to investigate more since code after minification and bundling is hard to read in chrome dev tools. :/


    I'm not sure if this is related to my GSAP setup, but if anyone could take a look at the code, it would be awesome.


    This is the navAnimation itself:

    import { TimelineLite, CSSPlugin, Power2, Power3 } from 'gsap';
    import * as CSSRulePlugin from 'gsap/CSSRulePlugin';
    const slideDownTl = new TimelineLite({ paused: true, initialRender: true });
    const slideUpTl = new TimelineLite({ paused: true, initialRender: true });
    // Document-object-aware variables
    let menuBtn, menuList, shutter, shutterBf, shutterAft, menuSpans, menuSpansAfts;
    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
      document.addEventListener('DOMContentLoaded', function() {
        // Menu Button
        menuBtn = document.querySelector('.menu-btn');
        // Menu List
        menuList = document.querySelector('.list-nav');
        // Shutter Variables
        shutter = document.querySelector('.shutter');
        shutterBf = CSSRulePlugin.getRule('.shutter:before');
        shutterAft = CSSRulePlugin.getRule('.shutter:after');
        // Menu Span Variables
        menuSpans = document.querySelectorAll('.menu-span');
        menuSpansAfts = CSSRulePlugin.getRule(
          '.list-nav ul li .menu-link a .menu-span:after'
        console.log('we passed window+document check!');
        // slideDown Animation Timeline
          .set([shutterBf, shutterAft], {
            cssRule: { y: '-120%' }
          .set(menuBtn, { pointerEvents: `none` })
          .set([menuList, shutter], {
            visibility: 'visible'
          .set(menuSpans, { y: '-200%' })
            [shutterBf, shutterAft],
              cssRule: { y: '0%' },
              force3D: true,
              rotation: 0.01,
              ease: Power3.easeOut
            { y: '0%', ease: Power2.easeInOut },
          .set(menuBtn, { pointerEvents: `all` });
        // slideUp Animation Timeline
          .set(menuBtn, { pointerEvents: `none` })
          .staggerTo(menuSpans, 0.5, { y: '-200%', ease: Power2.easeIn }, 0.1)
            [shutterAft, shutterBf],
              cssRule: { y: '-120%' },
              force3D: true,
              rotation: 0.01,
              ease: Power2.easeIn
          .set([menuList, shutter], {
            visibility: 'hidden'
          .set(menuBtn, { pointerEvents: `all` });
      }); //  end DOMContentLoaded
    } // end if window !== undefined
    export const slideDown = () => {
    export const slideUp = () => {

    I check for window and document !== undefined, because Gatsby requires it on build.


    This is Header component which has navAnimation included:

    import React from 'react';
    import Link from 'gatsby-link';
    import './navigation.scss';
    import * as navAnimation from '../../static/navAnimation.js';
    class Header extends React.Component {
      constructor(props) {
        this.state = {
          isOpened: false
        this.menuToggle = this.menuToggle.bind(this);
        this.handleClickOutside = this.handleClickOutside.bind(this);
      handleClickOutside(e) {
        let clickInHeader = false;
        if (e.path) {
          clickInHeader = e.path.find(node => node.localName === 'header');
        !clickInHeader && this.menuToggle();
      menuToggle(e) {
        if (this.state.isOpened) {
          document.removeEventListener('click', this.handleClickOutside, true);
        } else {
          document.addEventListener('click', this.handleClickOutside, true);
        this.setState(prevState => {
          return { isOpened: !prevState.isOpened };
      render() {
        return (
              <div className="logo">
                <Link to="/" onClick={this.state.isOpened && this.menuToggle}>
            <div id="menu-btn-wrapper">
                className={this.state.isOpened ? 'menu-btn open' : 'menu-btn'}
                <svg className="stick" viewBox="0 0 70 32">
                  <path d="M 5 5 H70 L 5 21" />
                  <path d="M 5 15 H70 L 5 31" />
            <div className="shutter" />
            <nav className="list-nav">
                  <div className="menu-link" onClick={this.menuToggle}>
                    <Link to="/my-work">
                      <span className="menu-span">my work</span>
                  <div className="menu-link">
                    <Link to="/blog" onClick={this.menuToggle}>
                      <span className="menu-span">blog</span>
                  <div className="menu-link">
                    <Link to="/#contact" onClick={this.menuToggle}>
                      <span className="menu-span">contact</span>
    export default Header;


  4. Hey, I'm new here. Digging the docs, i found this at the beginning, and I'm confused:



    The comment says something about the situation when jQuery is included, then uses regular DOM selector example. You don't actually need jQuery for selecting all the elements with specific class. So i propose to change this example :). I believe this may be confusing for beginners like me. If you don't see it that way, just delete this topic and forget about it.  


    PS Do you have docs open sourced for proposals of changes?