HomTom

In my CodePen example, when I first come to the page, I have to click the burger menu twice in order to run the animations. Why is that? How can I fix it, so that only one click runs the animation.

WOW! Thanks. Yes, this is exactly what I had in mind. Would it be possible to explain your way of achieving it? 1. You first set the scale to 2, why? 2. Why rotate: -360 Thanks

What would be a shorter and better way to achieve the same animation? For example would it be possible to use yoyo effect for it? const myAnimation = gsap.timeline({ repeat: -1 }); myAnimation .fromTo('.rectangle', { duration: 3, scale: 0, opacity: 0, rotate: -160 }, { duration: 3, scale: 1, opacity: 1, rotate: 0 }) .to('.rectangle', { duration: 3, scale: 2, opacity: 1, rotate: 160 }, '<=1') .to('.rectangle', { duration: 3, scale: 0, opacity: 0, rotate: -160 })

1000 thanks. Both solutions did work for me: 1. First solution: With bonus plugins: Download the bonus ZIP above. Then, in the "npm-install-this" folder you'll find a gsap-bonus.tgz tarball file. Drop that into your project directory, navigate there with your console and then simply: npm install ./gsap-bonus.tgz 2. Second solution: You need to add the /types directory from the .tgz file in the GSAP download to your project. Then create an empty jsconfig.json file in your project's directory and VSCode should use the type declarations for GSAP in your other .js files for code hinting.

Hi Zach, Many thanks for your response. For now I'm just using the GSAP CDN in my HTML file like this: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script> I'm going to try this and will report back: With bonus plugins: Download the bonus ZIP above. Then, in the "npm-install-this" folder you'll find a gsap-bonus.tgz tarball file. Drop that into your project directory, navigate there with your console and then simply: npm install ./gsap-bonus.tgz

In this example: tl.to( [ thing1, thing2, thing3], { duration:1.5, scale:0.97, autoAlpha:0, ease: "back", stagger:0.3}, "<-1") What does the last <-1 means?

Hi, GSAP is amazing and I love working with it, however I have a strange problem with VSCode's auto complete when I write gsap syntax. The gsap code works fine, but apparently VSCode is confusing it with something else and the auto complete always changes my gsap code to something else. Please see the attached video: https://drive.google.com/file/d/11GPmBRnazTyw2HYM3HVszqY4xYEMskkS/view?usp=sharing How can I fix this issue?

The following code is working, but I'm not sure if this is the best way to write it. const nav = document.querySelector('nav') const tl = gsap.timeline({ paused: true, defaults: { duration: 0.5 } }) const showNav = tl.to(nav, { autoAlpha: 1 }) // override the visibility hidden from css .fromTo('nav li', { stagger: 0.1, y: 100, opacity: 0 }, { stagger: 0.1, y: 0, opacity: 1 }) Is there a better and shorter way to achieve the same?

Sorry, I now found out why it wasn't working. I had to add a higher z-index to the button. I wanted to delete the question but couldn't find any Delete option.

In my animation, I can start the animation by clicking on the Red button in the top right corner of the page. But I also want to be able to reverse the animation by clicking a second time on the same button. To achieve this I'm using this condition, but it's not working: tl.reversed() ? tl.play() : tl.reverse() This is the complete code: const tl = gsap.timeline({ defaults: { duration: 1 } }) tl.from('.anim1', { stagger: 0.6, y: -50, opacity: 0 }) .from('aside', { backgroundPosition: '200px 0px', opacity: 0 }, '-=1.5') // relative timing (-= means sooner) .from('img', { y: 30, opacity: 0 }, '-=0.5') const playBtn = document.getElementById('play-btn') playBtn.addEventListener('click', () => { tl.reversed() ? tl.play() : tl.reverse() })

The following JS is adding an eventlistener to all 3 **li** elements. HTML <div class="burgerIcon"> <div class="burgerLine"></div> <div class="burgerLine"></div> <div class="burgerLine"></div> </div> JS const burgerLines = document.querySelectorAll('.burgerLine') burgerLines.forEach((burgerLine) => { burgerLine.addEventListener('mouseover', (e) => { console.log('The burger is hovered') TweenMax.to(burgerLine, 0.2, { x: -10 }) }) }) But how can I add the eventlistener only to the first and last **li** elements ?