Jump to content
GreenSock

Daniel2024

Members

  • Posts

    21

  • Joined

  • Last visited

 Content Type 

Posts posted by Daniel2024

    access each tween in timeline

    in GSAP

    Posted

    Thank you.

      

    const tweens = timeline.getChildren();

for(var i = 0; i < tweens.length; i++) {
   if(tweens[0].progress() === 1){
      console.log('hit');
   }
}

    Here, i wanted to console log , after the the first tween of the timeline ends. What i am doing wrong?

    access each tween in timeline

    in GSAP

    Posted

    Hello,

     

    i created a timeline and want to access each tween individually. How can i do it?

     

    Furthermore i want to add a general function to the end of each tween. I used .add() after each tween, but is there another way to solve this?

     

    Thank you in advance.

     

    Regards Daniel

    Console is returning: Failed to load gsap.min.js.map

    in GSAP

    Posted

    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?

    Console is returning: Failed to load gsap.min.js.map

    in GSAP

    Posted

    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.

    Console is returning: Failed to load gsap.min.js.map

    in GSAP

    Posted

    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

     

     

    Rerun animation on click after closing menu

    in GSAP

    Posted

    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

     

    See the Pen abbgBKq by Daniel2024 (@Daniel2024) on CodePen

    Open and Close menu

    in GSAP

    Posted

    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()
    }
     
    }

    Open and Close menu

    in GSAP

    Posted

    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?

    Open and Close menu

    in GSAP

    Posted

    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();
    }

    Open and Close menu

    in GSAP

    Posted

    if I want to add a second timeline for the reverse method , how can I do it?

     

    So first i am running the first timeline and when i click to close the menu I want to add a different timeline..

     

×
Login Create Account