Daniel2024

Here is my gsap.min.js file: https://github.com/Daniel20ZA/project

im getting these errors: [Warning] Invalid property – "opacity" – "set to" – 0 – "Missing plugin? gsap.registerPlugin()" (gsap.min.js, line 11) [Warning] Invalid property – "y" – "set to" – 35 – "Missing plugin? gsap.registerPlugin()" (gsap.min.js, line 11) [Warning] GSAP target null not found. https://greensock.com (gsap.min.js, line 11)

I was running my project on localhost and I was using only greensock and scroll magic. Now im facing the problem that probably scrollMagic isn't working. I have made several animations but now on one page the animations cant be executed. "Maybe the problem is ScrollMagic. It hasn't been updated to work with v3." How can I solve this?

thank you for your help

The problem is solved. I putted the .map-file in the same folder as gsap.min.js!

here are the files: https://github.com/Daniel20ZA/project

it seems that the data is too big in my folder. Is there any other way to upload it?

proFolder I don't have the gsap.min.js.map file. It wasn't in the folder of GreenSock.

Hi Zach, no, I use vs-code. I downloaded gsap and embedded it locally. I also embedded: <script src="./js/gsap.min.js"></script> <script src="./js/scrollmagic/ScrollMagic.min.js"></script> <script src="./js/scrollmagic/animation.gsap.js"></script> <script src="./js/main.js"></script> in the same sequence like above.

Hello guys, I have included gsap.min.js in a folder. After taking a look in the console, I noticed that I am getting the notification that the gsap.min.js.map file failed to load (404). I am confused about this error, because I just included gsap.min.js in my folder and not .map file. What is wrong here? Thank you in advance. Regards Daniel

thank you Mikel!

Hello guys, I am trying to animate a menu, with two different timelines (open and close). Everything works fine. There still one little issue I need to solve: After closing the menu and toggle the button to open the menu, the open-animation doesn't work / run. Here is my code: menuIcon.addEventListener('click', MenuAnimation); var menuState = 0; function MenuAnimation(){ if(menuState == 0 ){ menuState = 1; tl.play(); } else if(menuState == 1){ tl_remove.play(); menuState = 0; } } Thank you in advance. Regards Daniel

ok, thanks First timeline is running , but the second one isn't . What is wrong in my code? / second timeline for reverse method const secTimeLine = new TimelineLite({ paused: true }); secTimeLine.to('.slide-container', 0.5 , { opacity: 0, ease: Ease.easeIn }); function closeMenu(){ tl.play(); } // event document.querySelector('.menu-icon').addEventListener('click', animateNavbar); // animation status const isAnimated = false; const isOpen = true; function animateNavbar(e){ // check for false if (isAnimated.current) { return; } // set to true isAnimated.current = true; if(isOpen.current) { openMenu() } else { closeMenu() } }

Yes, got it. So I have to delcare my openMenu() and my closeMenu(), where i insert my timelines outside of the toggleMenu function , right ? const isOpen = useRef() I can call useRef however I want , right?

I was going through the code , but I didn't get it.. I am not really familiar with react.. I changed my code. How can I add the second timeline for the reverse method? document.querySelector('.menu-icon').addEventListener('click', animateNavbar); function animateNavbar(e){ tl.reversed() ? tl.play() : tl.reverse(); }