sebHewelt

I chose the first option . Works like a charm!

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...: CSS: canvas { visibility: hidden; } JS: subTl .set(canvas, { visibility: 'visible' }) masterTl.add(subTl); ...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. Examples: Here are two examples, one with subTl {paused: true}, and the other one without that setting: Pen with {paused: true} Pen without {paused: true} Help desperately needed

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.

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 slideDownTl .set([shutterBf, shutterAft], { cssRule: { y: '-120%' } }) .set(menuBtn, { pointerEvents: `none` }) .set([menuList, shutter], { visibility: 'visible' }) .set(menuSpans, { y: '-200%' }) .timeScale(1.2) .staggerTo( [shutterBf, shutterAft], 1, { cssRule: { y: '0%' }, force3D: true, rotation: 0.01, ease: Power3.easeOut }, 0.3 ) .staggerTo( menuSpans, 0.5, { y: '0%', ease: Power2.easeInOut }, 0.1, '-=0.7' ) .set(menuBtn, { pointerEvents: `all` }); // slideUp Animation Timeline slideUpTl .set(menuBtn, { pointerEvents: `none` }) .staggerTo(menuSpans, 0.5, { y: '-200%', ease: Power2.easeIn }, 0.1) .staggerTo( [shutterAft, shutterBf], 0.75, { cssRule: { y: '-120%' }, force3D: true, rotation: 0.01, ease: Power2.easeIn }, 0.25, '-=0.4' ) .set([menuList, shutter], { visibility: 'hidden' }) .set(menuBtn, { pointerEvents: `all` }); }); // end DOMContentLoaded } // end if window !== undefined export const slideDown = () => { slideDownTl.play(0); }; export const slideUp = () => { slideUpTl.play(0); }; 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) { super(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) { navAnimation.slideUp(); document.removeEventListener('click', this.handleClickOutside, true); } else { navAnimation.slideDown(); document.addEventListener('click', this.handleClickOutside, true); } this.setState(prevState => { return { isOpened: !prevState.isOpened }; }); } render() { return ( <header> <h1> <div className="logo"> <Link to="/" onClick={this.state.isOpened && this.menuToggle}> <span>Seba</span> <span>Hewelt</span> </Link> </div> </h1> <div id="menu-btn-wrapper"> <button className={this.state.isOpened ? 'menu-btn open' : 'menu-btn'} onClick={this.menuToggle}> <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" /> </svg> </button> </div> <div className="shutter" /> <nav className="list-nav"> <ul> <li> <div className="menu-link" onClick={this.menuToggle}> <Link to="/my-work"> <span className="menu-span">my work</span> </Link> </div> </li> <li> <div className="menu-link"> <Link to="/blog" onClick={this.menuToggle}> <span className="menu-span">blog</span> </Link> </div> </li> <li> <div className="menu-link"> <Link to="/#contact" onClick={this.menuToggle}> <span className="menu-span">contact</span> </Link> </div> </li> </ul> </nav> </header> ); } } export default Header;

Ok , now it struck me. I got it xd Thanks!

You see, even your way of explaining it includes a jQuery example. That's what i meant here. I know the comment is correct - the example it refers to could be more clear

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?