Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by Daniel2024

  1. Thank you.


    const tweens = timeline.getChildren();
    for(var i = 0; i < tweens.length; i++) {
       if(tweens[0].progress() === 1){

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

  2. 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

  3. 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?

  4. 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.

  5. 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



  6. 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;
    } else if(menuState == 1){
    menuState = 0;


    Thank you in advance.





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

  7. 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(){

    // 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) {
    // set to true
    isAnimated.current = true;
    if(isOpen.current) {
    } else {
  8. 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?

  9. 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();
  10. 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..