Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

harp

Members
  • Posts

    32
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

harp's Achievements

Newbie

Newbie (1/14)

10

Reputation

  1. Okay made the changes: https://codepen.io/designsbyharp/pen/wZdxbE?editors=0010 Does this look better? But start/restart/pause don't work on the second run through.. How come TweenMax does the trick and loading.to/set doesn't? Thank you.
  2. Hello, All event listeners are working for me except for this one: Function creation let fadeOutHeroContent = function(){ console.log('Lets fade ".hero" out...'); loading.to(heroEL, .5, { opacity: 0, ease: Power4.easeOut }); } code on line: 22 - 25 Function call on event listener: // User option to skip ".hero" content - remove it skipEL.addEventListener( "click", fadeOutHeroContent); code on line: 46 Full code is here: codepen link Thank you.
  3. Hello folks!! Hope everyone is having a great Saturday! I have a question. I created a slider and it fades the image in from scale value 1.2 to 1 and fades out to scale value .8 then I'm resetting the image so it will come in back from value 1.2 with clearProps: 'scale(1.2)' It all works fine but once the image scales to value 1 it jumps.. not sure why, tried to use clearProps: 'all' but just need scale to go back to value 1.2 before the image fades in. issue seems to be the clearProps which is located on line 111 and 144. Also, to add in my css I have set the transform: scale(1.2) so the first image starts from that value and also in clearProps it keeps resetting to 1.2(default css value). Let me know if this approach is wrong and whatelse I maybe doing wrong. Thank you all! Here is the codepen: https://codepen.io/harp30/project/editor/ALPxOW
  4. Okay okay. So, in this case its best to just have two separate timelines without connection to master(no need for master)? Thank you. Learning a lot! Very passionate about this stuff so everyones guidance really means a lot and because of it I'm improving.
  5. 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.
  6. 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:
  7. I'm creating a new forum for this with codepen.. and ill make it less confusing - my mistake.
  8. 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
  9. 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;
  10. and how to add a label to play at a certain point?
  11. 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()?
  12. 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;
  13. 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.
  14. 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!*
  15. 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!
×