harp

Solved it: playTimeline(){ //this.tlMaster.landTimeline.play(); //did this this.tlMaster.play('play-landtimeline'); } masterTimeline(){ console.log('testing'); this.tlMaster .add(this.loadTimeline()) // .addLabel('label') // and did this.. .addPause() .add('play-landtimeline') .add(this.landTimeline()); }; So, paused the master timeline and then added a label - 'play-landtimeline' When playTimeline is called via click function then master timeline will play and will play at the label which will run the this.landTimeline method. Thank you for the help Sorry about my mistakes, I will include codepen and better explaining.

Hello, I had previously created a forum for this but my approach was wrong - I did not add a Codepen so this is the same forum but with codepen and better explanation of what I'm trying to achieve. Objective: Have two timelines run under master timeline - first timeline will run automatically and then the second timeline will be paused by default. Hence, the second timeline will run "only" when user clicks a button. 1. first timeline - works beautifully. 2. second timeline run on button click - works but isn't controlled by master timeline not sure how to fix it, tried labels and etc but no luck. Tried to pause the mastertimeline when second timeline is added but didn't work. Here is the codepen:

I'm creating a new forum for this with codepen.. and ill make it less confusing - my mistake.

Okay got it working in codepen. Sorry, I'm new to all this thats why make mistake of not putting on codepen. Here is the link: working but not controlled by the click. Only want the landtimeline to run when user clicks btn

Okay thank you! Added a label in master timeline and then playing it via playTimeline but still taking a while to start up, not sure what I did wrong.. /* * * OBJECTIVE: play animation and then play remaining animation when user clicks btn * * * ************************************** * ERROR: playTimeline(){ this.tlMaster.play('label'); //did this console.log('hii'); } ************************************** * * * */ import SplitText from './SplitText'; // import { TimelineLite } from 'gsap'; class IntroAnimations{ constructor(){ this.ctaLoad = document.querySelector('#js-cta-load'); this.tlTest = new TimelineLite(); this.splitVal_title = new SplitText().implementDomElement(document.querySelector('#js-company-name')), this.splitVal_companyInfo = new SplitText().implementDomElement(document.querySelector('#js-loading-caption')), this.tlMaster = new TimelineMax(); this.masterTimeline(); this.ctaLoad.addEventListener('click', this.playTimeline.bind(this)); }; playTimeline(){ this.tlMaster.play('label'); //did this console.log('hii'); } landTimeline(){ let loadingPage = document.querySelector('.loading'), jsLogo = document.querySelector('#js-logo'), jsMenuToggle = document.querySelector('#js-menu-toggle'); this.tlTest // .addLabel('user-clicked') .staggerTo(this.splitVal_title, .3, {opacity: 0, autoAlpha: 0, x: 5, ease: Power4.easeOut}, 0.02) .staggerTo(this.splitVal_companyInfo, .2, {opacity: 0, autoAlpha: 0, x: 5, ease: Power4.easeOut}, 0.02, '-=.2') .to(loadingPage, .7, {opacity: 0, autoAlpha: 0, ease: Power4.easeOut}, '-=.7') .to([jsLogo, jsMenuToggle], 1, {opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, '-=.6'); return this.tlTest; } loadTimeline(){ let tlload = new TimelineLite(), counterHolder = document.querySelector('#js-interval-counter'), navigationItems = document.querySelectorAll('.navigation__items'), counter = { value: 0 }, el = counterHolder; tlload .set([this.splitVal_title, this.splitVal_companyInfo], {autoAlpha: 0, opacity: 0, x: 34}) .to(counter, 3, {value: 100, onUpdate: function () { el.textContent = Math.ceil(counter.value)+'%'; }, ease:Power3.easeInOut}) .to(el, .6, {opacity: 0, autoAlpha: 0}) .set(el, {display: 'none'}) .staggerTo(this.splitVal_title, 1.5, {opacity: 1, autoAlpha: 1, x: 0, ease: Power4.easeOut}, 0.08, '-=.55') .staggerTo(this.splitVal_companyInfo, 7, {opacity: 1, autoAlpha: 1, x: 0, ease: Power4.easeOut}, 0.03, '-=1.35') .addLabel('title-caption-finished', '-=6.5') .to(navigationItems, 3, {opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, 'title-caption-finished') .to(this.ctaLoad, 3, {opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, 'title-caption-finished'); // .addLabel('load-animations-done'); return tlload; }; masterTimeline(){ console.log('testing'); this.tlMaster .add(this.loadTimeline()) .add('label') // and did this.. .add(this.landTimeline()); }; }; export default IntroAnimations;

and how to add a label to play at a certain point?

OHHH. Okay I thought by clicking on the button the landTimeline() would run from its position of start. So, it doesn't run in that way instead I have to make it jump to a certain position because its connected to the masterTimeline()?

The codepen isn't really working to test this out because I'm using es6 modules and webpack. Here is the code: I'm trying to play this.tlTest when the user clicks a button, it works but it works after a good 20 seconds or so and not sure why it's doing that. If you want I can send you the whole project as a zipped file. import SplitText from './SplitText'; // import { TimelineLite } from 'gsap'; class IntroAnimations{ constructor(){ this.ctaLoad = document.querySelector('#js-cta-load'); this.tlTest = new TimelineLite({paused: true}); this.splitVal_title = new SplitText().implementDomElement(document.querySelector('#js-company-name')), this.splitVal_companyInfo = new SplitText().implementDomElement(document.querySelector('#js-loading-caption')), this.masterTimeline(); this.ctaLoad.addEventListener('click', this.playTimeline.bind(this)); }; playTimeline(){ this.tlTest.play(); console.log('playyy'); } landTimeline(){ console.log('okkkk'); let loadingPage = document.querySelector('.loading'), jsLogo = document.querySelector('#js-logo'), jsMenuToggle = document.querySelector('#js-menu-toggle'); this.tlTest .staggerTo(this.splitVal_title, 1.5, {opacity: 0, autoAlpha: 0, x: 30, ease: Power4.easeOut}, 0.08) .staggerTo(this.splitVal_companyInfo, 7, {opacity: 0, autoAlpha: 0, x: 30, ease: Power4.easeOut}, 0.03, '-=1.35') .to(loadingPage, 1.7, {opacity: 0, autoAlpha: 0, ease: Power4.easeOut}) .to([jsLogo, jsMenuToggle], 1, {opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, '-=.5'); return this.tlTest; } loadTimeline(){ let tlload = new TimelineLite(), counterHolder = document.querySelector('#js-interval-counter'), navigationItems = document.querySelectorAll('.navigation__items'), counter = { value: 0 }, el = counterHolder; tlload .set([this.splitVal_title, this.splitVal_companyInfo], {autoAlpha: 0, opacity: 0, x: 34}) .to(counter, 3, {value: 100, onUpdate: function () { el.textContent = Math.ceil(counter.value)+'%'; }, ease:Power3.easeInOut}) .to(el, .6, {opacity: 0, autoAlpha: 0}) .set(el, {display: 'none'}) .staggerTo(this.splitVal_title, 1.5, {opacity: 1, autoAlpha: 1, x: 0, ease: Power4.easeOut}, 0.08, '-=.55') .staggerTo(this.splitVal_companyInfo, 7, {opacity: 1, autoAlpha: 1, x: 0, ease: Power4.easeOut}, 0.03, '-=1.35') .addLabel('title-caption-finished', '-=6.5') .to(navigationItems, 3, {opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, 'title-caption-finished') .to(this.ctaLoad, 3, {opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, 'title-caption-finished'); return tlload; }; masterTimeline(){ console.log('testing'); new TimelineMax() .add(this.loadTimeline()) .add(this.landTimeline()); }; }; export default IntroAnimations;

I'm just wondering because I have been using es6 class structure with gsap and its great - the forum members helped me discover this and I love it. I have been doing some reading and discovered that functional programming is also great too. Does anyone recommend creating animations with a functional programming approach? Thank you, I'm a novice so just trying to research about such topics.

Hello, Yes! I viewed that post and I learned a lot! What my purpose/goal is: Create really cool 3D web graphics and animations. I want to learn WebGl and Greensock. What I learned from the form which was sent: Before learning WebGL/fully focus on GSAP: 1. Learn/get better at Core JavaScript especially ES6 because class syntax is much cleaner than regular OOP Inheritance approach so I'm following this: https://codepen.io/osublake/pen/44fd943b80c95bb48a030410f9b8f91b?editors=0010 https://codepen.io/osublake/pen/d14328e8948d2c55d92b666e5c7a73de?editors=0010 Plus other online sources but full practice of classes. I was before trying to learn what functional programming is but ES6 class syntax is what I'll focus on first then learn other approaches when I get good at classes. 2. Improve on the Math: https://www.amazon.ca/Foundation-HTML5-Animation-JavaScript-Lamberta/dp/1430236655/ref=sr_1_1?ie=UTF8&qid=1519763836&sr=8-1&keywords=Foundation+HTML5+Animation+with+JavaScript 3. Watch videos of other code from pros like: https://www.youtube.com/watch?time_continue=5&v=8aGhZQkoFbQ 4. Learn from forums like GSAP I've scheduled my work schedule so I can work 4 days a week and rest 2 days focus on JS and Math. Conclusion, Work hard, don't give up, and keep coding. Have questions then message this great forum. Thank you! *if I'm missing anything please advice me. Very grateful for this forum!*

OH WOW!!! SO MUCH LESS CODE!!! WOW! SO MUCH CLEANER AND SO MUCH MORE ACCURATE TO THE POINT! WOW! THANK YOU! I want to get better at programming - javascript. I'm a novice. Any tips on how to get better? Just keep making mistakes? I'm so thankful for your guidance, if you tutor I'd be happy to learn!

Okay works.. thank you sir. But isn't it bad to have global variables? I guess if its in an IIFE is okay?

Okay that works too now.. not suppose to call the function ok go it! Also, It doesn't close.. opens fine but then doesn't run the else if statement.. What am I doing wrong here? Thank you, very grateful for your time and teachings.

Okay done but why doesn't it work on click of the menuCta.. Its doing it automatically.

Hello, Yes, I agree. I'm sorry for not posting the codepen. Here is the link below: https://codepen.io/harp30/project/editor/ZOLzQy So, issue is still not able to open menu or close..

Did thanks! But menuOpen variable is not assigning value true. it still says as false... if(menuOpen === false){ console.log(menuOpen); //prints fine tlMenu .addLabel('menu-open') .to(this.menu, 1, {opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, 'menu-open') .to(this.ctaLinks, 1, {color: 'black', ease: Power4.easeOut}, 'menu-open') .to(this.hamburger, 1, {stroke: 'black', ease: Power4.easeOut}, 'menu-open'); menuOpen = true; // why not working here? Not assigning true, stays false. }

Trying to toggle the menu - open it and close it within this function below but the variable storing the boolean value to toggle isn't working past the first if statement: Menu opens fine but doesn't close.. Error is: value assigned - menuOpen - isn't used. How to fix this? menuToggle(){ let tlMenu = new TimelineLite(); let menuOpen = false; if(menuOpen === false){ console.log(menuOpen); //prints fine tlMenu .addLabel('menu-open') .to(this.menu, 1, {opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, 'menu-open') .to(this.ctaLinks, 1, {color: 'black', ease: Power4.easeOut}, 'menu-open') .to(this.hamburger, 1, {stroke: 'black', ease: Power4.easeOut}, 'menu-open'); menuOpen = true; // why not working here? }else if(menuOpen = true){ // false doesn't change to true so wouldn't work tlMenu .addLabel('menu-close') .to(this.menu, 1, {opacity: 0, autoAlpha: 0, ease: Power4.easeOut}, 'menu-close') .to(this.ctaLinks, 1, {color: 'white', ease: Power4.easeOut}, 'menu-close') .to(this.hamburger, 1, {stroke: 'white', ease: Power4.easeOut}, 'menu-close'); menuOpen = false; }; }

Yes, makes total sense! Thank very much!

Is it best to set all your soon to be animated elements in css and then just animate the values in our timelines? Is it bad to set the element(s) values in the timeline and then animate, like: let testTl = new TimelineLite(); testTl .set(jsScrollCta, {opacity: 0, autoAlpha: 0}) .to(jsScrollCta, 1, {opacity: 1, autoAlpha: 1}); Is this bad practice? Because if we set a lot of elements and then animate, that will cause slowdown right?

Okay thats so awesome! Thank you! I was trying to create each module for a certain timeline and then add to a final module which is the master timeline but I guess I'm overkilling it! Your example is great and I'll follow that. Thank you OSUblake

okay got it thankssss! I actually did it this way so i can set the elements to animate: animateChars(domElement){ let spans = this.implementDomElement(domElement); this.tlLetters = new TimelineLite({}); this.tlLetters.set(spans, {autoAlpha: 0, opacity: 0, y: 40}); // so elements can have some settings this.tlLetters.pause(); this.tlLetters .staggerTo(spans, 1, {opacity: 1, autoAlpha: 1, y: 0, ease: Power4.easeInOut}, '.03') .staggerTo(spans, 1, {delay: .5, opacity: 0, autoAlpha: 0, y: -40, ease: Power4.easeInOut}, '.03'); return { tlLetters: this.tlLetters }; } masterTimeline(){ let tlMaster = new TimelineMax({onComplete: function(){ console.log('OKKKK'); }}); let tlLetters = new LetterAnimation(document.querySelector('.company-name')).tlLetters; tlMaster .add(tlLetters.resume()) // .add(tlCaptions()) }

How to pause an animation on start? I want the mastertimeline to control when it plays. Doesn't seem to work: Here is my code for a timeline which connects to the mastertimeline and would play there animateChars(domElement){ let spans = this.implementDomElement(domElement); this.tlLetters = new TimelineLite({}); this.tlLetters.pause(); this.tlLetters.set(spans, {autoAlpha: 0, opacity: 0, y: 40}) .staggerTo(spans, 1, {opacity: 1, autoAlpha: 1, y: 0, ease: Power4.easeInOut}, '.03') .staggerTo(spans, 1, {delay: .5, opacity: 0, autoAlpha: 0, y: -40, ease: Power4.easeInOut}, '.03'); return { tlLetters: this.tlLetters }; } /* * * OBJECTIVE: * * A MASTER TIME-LINE WILL CONTROL/HOLD ALL OTHER TIME-LINES: * tlLetters FROM LETTERANIMATIONS.JS * tlCaptions FROM CAPTIONSANIMATION.JS * * TASK * 1: CREATE MASTER TIME-LINE WITHIN A CLASS STRUCTURE * * * */ import LetterAnimation from './LetterAnimations'; import CaptionAnimation from './CaptionsAnimation'; class IntroAnimations{ constructor(){ this.masterTimeline(); }; masterTimeline(){ let tlMaster = new TimelineMax({onComplete: function(){ console.log(tlMaster); }}); let tlLetters = new LetterAnimation(document.querySelector('.company-name')).tlLetters; // let tlCaptions = new CaptionAnimation(document.querySelectorAll('.heading-skewY-from-bottom')); console.log(tlLetters.paused()); tlMaster .add(tlLetters().paused(false)) // .add(tlCaptions()) } }; export default IntroAnimations;

This is the class: // import $ from 'jquery'; // import gsap from 'greensock'; /* * * OBJECTIVE: Retrieve h1 tag from user and break h1 text value into chars * and then animate each char onto the screen. * *Make it robust/provide options* * * Task: * 1. retrieve h1 tag/dom element * 2. place the chars into the h1 via a span tag * * */ class LetterAnimations{ constructor(domElement){ this.animateChars(domElement); } implementDomElement(domElement){ let splitDomElement = domElement.textContent.split(''), span, spans = []; domElement.textContent = ''; for(let i = 0; i < splitDomElement.length; i++){ span = document.createElement('span'); span.innerHTML = splitDomElement[i]; span.className = 'char-heading-primary'; span.id = 'span'+(i+1); domElement.appendChild(span); spans.push(span); }; this.styleChars(spans); return spans; }; styleChars(span){ span[6].style.paddingRight = '2rem'; span[9].style.paddingRight = '2rem'; span[13].style.paddingRight = '2rem'; }; animateChars(domElement){ let spans = this.implementDomElement(domElement), tlLetters = new TimelineLite({}); tlLetters.set(spans, {autoAlpha: 0, opacity: 0, y: 40}) .staggerTo(spans, 1, {opacity: 1, autoAlpha: 1, y: 0, ease: Power4.easeInOut}, '.03') .staggerTo(spans, 1, {delay: .5, opacity: 0, autoAlpha: 0, y: -40, ease: Power4.easeInOut}, '.03') return {tlLetters}; } } export default LetterAnimations; I just want the tlLetters so I can call use it to add into my master timeline: import LetterAnimation from './LetterAnimations'; import CaptionAnimation from './CaptionsAnimation'; class IntroAnimations{ constructor(){ this.masterTimeline(); }; masterTimeline(){ let tlMaster = new TimelineMax(); let tlLetters = new LetterAnimation(document.querySelector('.company-name')); let tlCaptions = new CaptionAnimation(document.querySelectorAll('.heading-skewY-from-bottom')); console.log(tlLetters); // tlMaster // .add(tlLetters) // .add(tlCaptions); } }; export default IntroAnimations; But its not working... how to get just the timeline - tlLetters and use it? Thank you.

Hello, I'm trying to repeat an animation 3 times - for each element that is inside an array. The element will fade in and then fade out. Here is the code: How do I pass in an argument into the test function via the delayedCall method? Thank you. animateCaptions(intro){ let domH1s = this.generateCaptions(intro), stayTime = 2, slideTime = .8, currentH1 = 0; const tlCaptions = new TimelineLite({delay: 1.7}); function test(currentH1){ tlCaptions .to(domH1s[currentH1], slideTime, {opacity: 1, autoAlpha: 1}) .add(function(){ currentH1 = ++currentH1 % domH1s.length; }) .to(domH1s[currentH1], slideTime, {opacity: 0, autoAlpha: 0}) }; for(let i = 0; i < domH1s.length; i++){ TweenLite.delayedCall(stayTime, test); } // for(let i =0;i<domH1s.length;i++){ // tlCaptions // .to(domH1s[i], .9, {opacity: 1, autoAlpha: 1}); // //check to see if we are on the last index: // //i === captions.length-1 -> length = 3 -1 = 2. // //i works: 0, 1 ,2 so i(2) === captions.length-1 // if(i+1 === domH1s.length){ // tlCaptions.to(domH1s[i], .5, {opacity: 1, autoAlpha: 1}) // }else{ // tlCaptions.to(domH1s[i], .5, {opacity: 0, autoAlpha: 0, delay: 1.4}); // } // }; return tlCaptions; };

okay okay thanks! Spans are usually inline but I changed it to inline-block and it worked fine. Thank you. I can also use divs but even then have to switch to inline-block if I want side by side or.. display flex with flex-direction row.. that will work too. Thank you! Hope you are having a great day!