kandi background
Explore Kits

AnimationMenu | Pop-up animation menu looks like the menu of Path | Menu library

 by   LeeHanYeong Java Version: Current License: No License

 by   LeeHanYeong Java Version: Current License: No License

Download this library from

kandi X-RAY | AnimationMenu Summary

AnimationMenu is a Java library typically used in User Interface, Menu applications. AnimationMenu has no bugs, it has no vulnerabilities and it has low support. However AnimationMenu build file is not available. You can download it from GitHub.
Pop-up animation menu looks like the menu of Path 2.0. Demo App - Google play. ##Setup 이클립스에서 AnimationMenu 라이브러리 프로젝트를 Import합니다. 사용할 프로젝트에서 AnimationMenu 프로젝트를 라이브러리로 추가해줍니다. ##Usage 사용할 레이아웃 xml파일에 AnimationMenu를 추가합니다. 추가한 AnimationMenu내에 MainButton으로 사용할 View를 추가합니다. setAnimationMenuOnClickListener로 버튼의 클릭이벤트를 설정해줍니다.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • AnimationMenu has a low active ecosystem.
  • It has 24 star(s) with 9 fork(s). There are 8 watchers for this library.
  • It had no major release in the last 12 months.
  • AnimationMenu has no issues reported. There are no pull requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of AnimationMenu is current.
AnimationMenu Support
Best in #Menu
Average in #Menu
AnimationMenu Support
Best in #Menu
Average in #Menu

quality kandi Quality

  • AnimationMenu has 0 bugs and 0 code smells.
AnimationMenu Quality
Best in #Menu
Average in #Menu
AnimationMenu Quality
Best in #Menu
Average in #Menu

securitySecurity

  • AnimationMenu has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • AnimationMenu code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
AnimationMenu Security
Best in #Menu
Average in #Menu
AnimationMenu Security
Best in #Menu
Average in #Menu

license License

  • AnimationMenu does not have a standard license declared.
  • Check the repository for any license declaration and review the terms closely.
  • Without a license, all rights are reserved, and you cannot use the library in your applications.
AnimationMenu License
Best in #Menu
Average in #Menu
AnimationMenu License
Best in #Menu
Average in #Menu

buildReuse

  • AnimationMenu releases are not available. You will need to build from source code and install.
  • AnimationMenu has no build file. You will be need to create the build yourself to build the component from source.
  • Installation instructions are not available. Examples and code snippets are available.
AnimationMenu Reuse
Best in #Menu
Average in #Menu
AnimationMenu Reuse
Best in #Menu
Average in #Menu
Top functions reviewed by kandi - BETA

kandi has reviewed AnimationMenu and discovered the below as its top functions. This is intended to give you an instant insight into AnimationMenu implemented functionality, and help decide if they suit your requirements.

  • start animation
    • Start an animation for a sub - button .
      • Enables or disables the button menu buttons .
        • Initializes the view .
          • Sets the offset .
            • Sets the position .
              • Play a sound .
                • Set a sound file .
                  • Set the text size
                    • Sets the index .

                      Get all kandi verified functions for this library.

                      Get all kandi verified functions for this library.

                      AnimationMenu Key Features

                      AnimationMenu는 FrameLayout형태로 추가됩니다.

                      추가한 View는 xml의 미리보기에서 어떻게 나타날지 보여집니다.

                      AnimationMenu를 선언 및 초기화합니다.

                      setLength. 반드시 가장 먼저 설정합니다.

                      setDirection. 메뉴가 어떤 방향으로 펼쳐질지 정합니다.

                      setMainBtn. MainButton으로 사용할 View의 id를 지정해줍니다.

                      addSubBtn. SubButton으로 사용할 drawable의 id와 크기, BubbleMessage를 지정해줍니다.

                      AnimationMenu는 자체 OnClickListener인 AnimationMenuOnClickListener를 가지고 있습니다.

                      Activity에서 구현시 Parameter에 this를 사용 후, Activity에 implements합니다.

                      Listener에서 구현한 onMainBtnClick과 onSubBtnClick 함수에 Click 동작을 지정합니다.

                      AnimationMenu Examples and Code Snippets

                      See all related Code Snippets

                      default

                      copy iconCopydownload iconDownload
                      <?xml version="1.0" encoding="utf-8"?>
                      <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                      	android:layout_width="match_parent"
                      	android:layout_height="match_parent">
                      
                      	<arcanelux.animationmenu.AnimationMenu
                      		android:layout_width="match_parent"
                      		android:layout_height="match_parent"
                      		android:id="@+id/animationMenu1">
                      	</arcanelux.animationmenu.AnimationMenu>
                      
                      </FrameLayout>
                      

                      Toggling lottie hamburger/menu animation on .nav-link click?

                      copy iconCopydownload iconDownload
                      let iconMenu = document.querySelector('.lowe-menu');
                      
                          let animationMenu = bodymovin.loadAnimation({
                                  container: iconMenu,
                                  renderer: 'svg',
                                  loop: false,
                                  autoplay: false,
                                  animationData: {"v":"5.7.4","fr":60,"ip":0,"op":39,"w":600,"h":600,"nm":"hamburger to x","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"ScaleCTRL","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[300,300,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[391.026,391.026,100],"ix":6,"l":2}},"ao":0,"ip":0,"op":39,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Line03","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":32,"s":[48]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":37,"s":[45]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":47,"s":[45]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":52,"s":[48]},{"t":60,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[0,30.5,0],"to":[0,-5.083,0],"ti":[0,5.083,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[0,0,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[0,0,0],"to":[0,5.083,0],"ti":[0,-5.083,0]},{"t":69,"s":[0,30.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-9.75,-20,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63,-20],[43.5,-20]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":39,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Line02","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0,0],"ix":2,"l":2},"a":{"a":0,"k":[-9.75,-20,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63,-20],[43.5,-20]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":1,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":20,"s":[50]},{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":58,"s":[50]},{"t":78,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":1,"s":[100]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":20,"s":[50]},{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":58,"s":[50]},{"t":78,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":39,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Line01","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":32,"s":[-48]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":37,"s":[-45]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":47,"s":[-45]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":52,"s":[-48]},{"t":60,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[0,-30.5,0],"to":[0,5.083,0],"ti":[0,-5.083,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[0,0,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[0,0,0],"to":[0,-5.083,0],"ti":[0,5.083,0]},{"t":69,"s":[0,-30.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-9.75,-20,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63,-20],[43.5,-20]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":39,"st":0,"bm":0}],"markers":[]}
                          });
                      
                          var directionMenu = 1;
                            iconMenu.addEventListener('click', (e) => {
                            animationMenu.setDirection(directionMenu);
                            animationMenu.play();
                            directionMenu = -directionMenu;
                          });
                          
                          var navLinks = document.querySelectorAll('.nav-link')
                          var menuToggle = document.getElementById('lowetoggle')
                          var bsCollapse = new bootstrap.Collapse(menuToggle, {toggle:false})
                          
                          navLinks.forEach((l) => {
                          l.addEventListener('click', () => { 
                              if (window.innerWidth < 992){ // This part fixes flickering on desktop nav-items!
                                  bsCollapse.toggle()
                                  animationMenu.setDirection(directionMenu);
                                  animationMenu.play();
                                  directionMenu = -directionMenu;
                              }
                           });
                      });
                      .navbar-lowe {background-color: black;}
                      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
                      <nav class="navbar navbar-expand-lg navbar-lowe">
                              <div class="container-fluid">
                                <a class="navbar-brand" href="#">
                                  <p>Logo</p>
                                </a>
                                <button
                                  class="navbar-toggler"
                                  type="button"
                                  data-bs-toggle="collapse"
                                  data-bs-target="#lowetoggle"
                                  aria-controls="lowetoggle"
                                  aria-expanded="false"
                                  aria-label="Toggle navigation"
                                >
                                <div class="lowe-menu" style="width: 50px;"></div>
                                </button>
                                <div class="collapse navbar-collapse" id="lowetoggle">
                                  <div class="navbar-nav align-items-end">
                                    <a class="nav-link active" href="#home">Home</a>
                                    <a class="nav-link" href="#work">Work</a>
                                    <a class="nav-link" href="#contact">Contact</a>
                                  </div>
                                  <div class="navbar-text ms-auto text-end">
                                    <a class="btn nav-button" role="button">Call Today <strong>05555555 555</strong></a>
                                  </div>
                                </div>
                              </div>
                            </nav>
                       <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.8.1/lottie.min.js"></script>
                      <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
                      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
                      let iconMenu = document.querySelector('.lowe-menu');
                      
                          let animationMenu = bodymovin.loadAnimation({
                                  container: iconMenu,
                                  renderer: 'svg',
                                  loop: false,
                                  autoplay: false,
                                  animationData: {"v":"5.7.4","fr":60,"ip":0,"op":39,"w":600,"h":600,"nm":"hamburger to x","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"ScaleCTRL","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[300,300,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[391.026,391.026,100],"ix":6,"l":2}},"ao":0,"ip":0,"op":39,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Line03","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":32,"s":[48]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":37,"s":[45]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":47,"s":[45]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":52,"s":[48]},{"t":60,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[0,30.5,0],"to":[0,-5.083,0],"ti":[0,5.083,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[0,0,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[0,0,0],"to":[0,5.083,0],"ti":[0,-5.083,0]},{"t":69,"s":[0,30.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-9.75,-20,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63,-20],[43.5,-20]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":39,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Line02","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0,0],"ix":2,"l":2},"a":{"a":0,"k":[-9.75,-20,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63,-20],[43.5,-20]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":1,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":20,"s":[50]},{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":58,"s":[50]},{"t":78,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":1,"s":[100]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":20,"s":[50]},{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":58,"s":[50]},{"t":78,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":39,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Line01","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":32,"s":[-48]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":37,"s":[-45]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":47,"s":[-45]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":52,"s":[-48]},{"t":60,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[0,-30.5,0],"to":[0,5.083,0],"ti":[0,-5.083,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[0,0,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[0,0,0],"to":[0,-5.083,0],"ti":[0,5.083,0]},{"t":69,"s":[0,-30.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-9.75,-20,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63,-20],[43.5,-20]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":39,"st":0,"bm":0}],"markers":[]}
                          });
                      
                          var directionMenu = 1;
                            iconMenu.addEventListener('click', (e) => {
                            animationMenu.setDirection(directionMenu);
                            animationMenu.play();
                            directionMenu = -directionMenu;
                          });
                          
                          var navLinks = document.querySelectorAll('.nav-link')
                          var menuToggle = document.getElementById('lowetoggle')
                          var bsCollapse = new bootstrap.Collapse(menuToggle, {toggle:false})
                          
                          navLinks.forEach((l) => {
                          l.addEventListener('click', () => { 
                              if (window.innerWidth < 992){ // This part fixes flickering on desktop nav-items!
                                  bsCollapse.toggle()
                                  animationMenu.setDirection(directionMenu);
                                  animationMenu.play();
                                  directionMenu = -directionMenu;
                              }
                           });
                      });
                      .navbar-lowe {background-color: black;}
                      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
                      <nav class="navbar navbar-expand-lg navbar-lowe">
                              <div class="container-fluid">
                                <a class="navbar-brand" href="#">
                                  <p>Logo</p>
                                </a>
                                <button
                                  class="navbar-toggler"
                                  type="button"
                                  data-bs-toggle="collapse"
                                  data-bs-target="#lowetoggle"
                                  aria-controls="lowetoggle"
                                  aria-expanded="false"
                                  aria-label="Toggle navigation"
                                >
                                <div class="lowe-menu" style="width: 50px;"></div>
                                </button>
                                <div class="collapse navbar-collapse" id="lowetoggle">
                                  <div class="navbar-nav align-items-end">
                                    <a class="nav-link active" href="#home">Home</a>
                                    <a class="nav-link" href="#work">Work</a>
                                    <a class="nav-link" href="#contact">Contact</a>
                                  </div>
                                  <div class="navbar-text ms-auto text-end">
                                    <a class="btn nav-button" role="button">Call Today <strong>05555555 555</strong></a>
                                  </div>
                                </div>
                              </div>
                            </nav>
                       <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.8.1/lottie.min.js"></script>
                      <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
                      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
                      let iconMenu = document.querySelector('.lowe-menu');
                      
                          let animationMenu = bodymovin.loadAnimation({
                                  container: iconMenu,
                                  renderer: 'svg',
                                  loop: false,
                                  autoplay: false,
                                  animationData: {"v":"5.7.4","fr":60,"ip":0,"op":39,"w":600,"h":600,"nm":"hamburger to x","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"ScaleCTRL","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[300,300,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[391.026,391.026,100],"ix":6,"l":2}},"ao":0,"ip":0,"op":39,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Line03","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":32,"s":[48]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":37,"s":[45]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":47,"s":[45]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":52,"s":[48]},{"t":60,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[0,30.5,0],"to":[0,-5.083,0],"ti":[0,5.083,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[0,0,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[0,0,0],"to":[0,5.083,0],"ti":[0,-5.083,0]},{"t":69,"s":[0,30.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-9.75,-20,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63,-20],[43.5,-20]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":39,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Line02","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0,0],"ix":2,"l":2},"a":{"a":0,"k":[-9.75,-20,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63,-20],[43.5,-20]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":1,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":20,"s":[50]},{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":58,"s":[50]},{"t":78,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":1,"s":[100]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":20,"s":[50]},{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":58,"s":[50]},{"t":78,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":39,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Line01","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":32,"s":[-48]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":37,"s":[-45]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":47,"s":[-45]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":52,"s":[-48]},{"t":60,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[0,-30.5,0],"to":[0,5.083,0],"ti":[0,-5.083,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[0,0,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[0,0,0],"to":[0,-5.083,0],"ti":[0,5.083,0]},{"t":69,"s":[0,-30.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-9.75,-20,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63,-20],[43.5,-20]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":39,"st":0,"bm":0}],"markers":[]}
                          });
                      
                          var directionMenu = 1;
                            iconMenu.addEventListener('click', (e) => {
                            animationMenu.setDirection(directionMenu);
                            animationMenu.play();
                            directionMenu = -directionMenu;
                          });
                          
                          var navLinks = document.querySelectorAll('.nav-link')
                          var menuToggle = document.getElementById('lowetoggle')
                          var bsCollapse = new bootstrap.Collapse(menuToggle, {toggle:false})
                          
                          navLinks.forEach((l) => {
                          l.addEventListener('click', () => { 
                              if (window.innerWidth < 992){ // This part fixes flickering on desktop nav-items!
                                  bsCollapse.toggle()
                                  animationMenu.setDirection(directionMenu);
                                  animationMenu.play();
                                  directionMenu = -directionMenu;
                              }
                           });
                      });
                      .navbar-lowe {background-color: black;}
                      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
                      <nav class="navbar navbar-expand-lg navbar-lowe">
                              <div class="container-fluid">
                                <a class="navbar-brand" href="#">
                                  <p>Logo</p>
                                </a>
                                <button
                                  class="navbar-toggler"
                                  type="button"
                                  data-bs-toggle="collapse"
                                  data-bs-target="#lowetoggle"
                                  aria-controls="lowetoggle"
                                  aria-expanded="false"
                                  aria-label="Toggle navigation"
                                >
                                <div class="lowe-menu" style="width: 50px;"></div>
                                </button>
                                <div class="collapse navbar-collapse" id="lowetoggle">
                                  <div class="navbar-nav align-items-end">
                                    <a class="nav-link active" href="#home">Home</a>
                                    <a class="nav-link" href="#work">Work</a>
                                    <a class="nav-link" href="#contact">Contact</a>
                                  </div>
                                  <div class="navbar-text ms-auto text-end">
                                    <a class="btn nav-button" role="button">Call Today <strong>05555555 555</strong></a>
                                  </div>
                                </div>
                              </div>
                            </nav>
                       <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.8.1/lottie.min.js"></script>
                      <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
                      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

                      Scroll Bar is not working in ScrollView qml

                      copy iconCopydownload iconDownload
                      import QtQuick 2.15
                      import QtQuick.Window 2.15
                      import QtQuick.Controls 2.15
                      import QtQuick.Layouts 1.12
                      import QtGraphicalEffects 1.15
                      
                      Window {
                          width: 740
                          height: 580
                          visible: true
                          color: "#00000000"
                          title: qsTr("Hello World")
                      
                          Rectangle {
                              id: rectangle
                              color: "#40405f"
                              anchors.fill: parent
                      
                              RowLayout{
                                  anchors.fill: parent
                      
                                  Button {
                                      id: button
                                      text: qsTr("Menu")
                                      width: 100
                                      height: 50
                                  }
                      
                                  ScrollView {
                                      id: scrollView
                                      Layout.fillWidth: true
                                      Layout.fillHeight: true
                      
                                      RowLayout{
                                          implicitHeight: 2000
                                          implicitWidth: 2000
                      
                                          Column {
                                              id: columnMenu
                                              width: 0
                                              anchors.fill: parent
                                              spacing: 10
                      
                                              Repeater{
                                                  model: 50
                                                  delegate:  Button {
                                                      text: qsTr("Button")
                                                  }
                                              }
                                          }
                                      }
                                  }
                              }
                          }
                      }
                      

                      Content inside .each in click function only being called once

                      copy iconCopydownload iconDownload
                      function openMenu() {
                          const menuMain = $('.menu');
                          const menuWhite = $('.menu__bg.white');
                          const menuLightblue = $('.menu__bg.lightblue');
                          const menuLinks = $('.menu-links');
                      
                          $(menuMain).addClass('open');
                          $(menuWhite).addClass('open');
                          $(menuLightblue).addClass('open');
                          setTimeout(function() {
                              $(menuLinks).each(function(i) {
                                  $(this).delay(100*i).queue( function() { /* staggered add of classes with delay */
                                      $(this).addClass('visible');
                                  });
                              });
                          }, 500); /* the .open classes have 500ms transition, that's why it's 500 timeOut */
                      };
                      
                      $(menuLinks).each(function(i) {
                              console.log(i);
                              $(this).delay(100*i).queue( function() {
                                  $(this).addClass('visible');
                                  $(this).dequeue();
                              });
                          });
                      

                      Show a specific frame on initial load in lottie animation

                      copy iconCopydownload iconDownload
                      let iconMenu = document.querySelector('.bodymovinanim1');
                      let animationMenu = bodymovin.loadAnimation({
                              container: iconMenu,
                              renderer: 'svg',
                              loop: false,
                              autoplay: false,
                              path: "https://assets2.lottiefiles.com/packages/lf20_txJcSM.json",
                              initialSegment: [51.5, 200],
                      });
                      
                      iconMenu.addEventListener('mouseover', (e) => {
                      animationMenu.play();
                      });
                      

                      See all related Code Snippets

                      Community Discussions

                      Trending Discussions on AnimationMenu
                      • Toggling lottie hamburger/menu animation on .nav-link click?
                      • Scroll Bar is not working in ScrollView qml
                      • Content inside .each in click function only being called once
                      • Show a specific frame on initial load in lottie animation
                      Trending Discussions on AnimationMenu

                      QUESTION

                      Toggling lottie hamburger/menu animation on .nav-link click?

                      Asked 2022-Jan-07 at 01:20
                      SOLVED, SEE MY SOLUTION BELOW

                      Hello so my navigation works fine like this apart from when the links are clicked, the lottie animation doesn't toggle back to it's first frame.

                      Could anyone help me with a solution to this as I've been trying for awhile now with no luck.

                      I'm using bootstrap and this is my navigation toggler button:

                      <button
                              class="navbar-toggler"
                              type="button"
                              data-bs-toggle="collapse"
                              data-bs-target="#lowetoggle"
                              aria-controls="lowetoggle"
                              aria-expanded="false"
                              aria-label="Toggle navigation"
                            >
                            <div class="lowe-menu" style="width: 50px;"></div>
                            </button>
                      <lottie-player id="toggleLottie" src="assets/menu.json" style="width:50px;">"></lottie-player>
                      </button>
                      

                      and this is my js:

                      let iconMenu = document.querySelector('.lowe-menu');
                      
                      let animationMenu = bodymovin.loadAnimation({
                              container: iconMenu,
                              renderer: 'svg',
                              loop: false,
                              autoplay: false,
                              path: "/assets/menu.json"
                      });
                      
                      var directionMenu = 1;
                        iconMenu.addEventListener('click', (e) => {
                        animationMenu.setDirection(directionMenu);
                        animationMenu.play();
                        directionMenu = -directionMenu;
                      });
                      
                      var navLinks = document.querySelectorAll('.nav-link')
                      var menuToggle = document.getElementById('lowetoggle')
                      var bsCollapse = new bootstrap.Collapse(menuToggle, {toggle:false})
                      
                      navLinks.forEach((l) => {
                          l.addEventListener('click', () => { bsCollapse.toggle() })
                      });
                      

                      ANSWER

                      Answered 2022-Jan-07 at 01:17
                      Bootstrap 5 Lottie Hamburger Menu

                      Solved this myself, So if you are using Lottie for your hamburger menu in Bootstrap, and your page is using anchor links to scroll to different sections, this code will make the hamburger close on clicking a .nav-link element.

                      Hope this is useful, as I've not found anyone else with a snippet for this online! Maybe I didn't far though!

                      let iconMenu = document.querySelector('.lowe-menu');
                      
                          let animationMenu = bodymovin.loadAnimation({
                                  container: iconMenu,
                                  renderer: 'svg',
                                  loop: false,
                                  autoplay: false,
                                  animationData: {"v":"5.7.4","fr":60,"ip":0,"op":39,"w":600,"h":600,"nm":"hamburger to x","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"ScaleCTRL","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[300,300,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[391.026,391.026,100],"ix":6,"l":2}},"ao":0,"ip":0,"op":39,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Line03","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":32,"s":[48]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":37,"s":[45]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":47,"s":[45]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":52,"s":[48]},{"t":60,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[0,30.5,0],"to":[0,-5.083,0],"ti":[0,5.083,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[0,0,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[0,0,0],"to":[0,5.083,0],"ti":[0,-5.083,0]},{"t":69,"s":[0,30.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-9.75,-20,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63,-20],[43.5,-20]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":39,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Line02","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[0,0,0],"ix":2,"l":2},"a":{"a":0,"k":[-9.75,-20,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63,-20],[43.5,-20]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":1,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":20,"s":[50]},{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":58,"s":[50]},{"t":78,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":1,"s":[100]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":20,"s":[50]},{"i":{"x":[0.411],"y":[1]},"o":{"x":[0.938],"y":[0]},"t":58,"s":[50]},{"t":78,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":39,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Line01","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":24,"s":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":32,"s":[-48]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":37,"s":[-45]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":47,"s":[-45]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":52,"s":[-48]},{"t":60,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":15,"s":[0,-30.5,0],"to":[0,5.083,0],"ti":[0,-5.083,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":24,"s":[0,0,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":60,"s":[0,0,0],"to":[0,-5.083,0],"ti":[0,5.083,0]},{"t":69,"s":[0,-30.5,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-9.75,-20,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-63,-20],[43.5,-20]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":15,"ix":5},"lc":2,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":39,"st":0,"bm":0}],"markers":[]}
                          });
                      
                          var directionMenu = 1;
                            iconMenu.addEventListener('click', (e) => {
                            animationMenu.setDirection(directionMenu);
                            animationMenu.play();
                            directionMenu = -directionMenu;
                          });
                          
                          var navLinks = document.querySelectorAll('.nav-link')
                          var menuToggle = document.getElementById('lowetoggle')
                          var bsCollapse = new bootstrap.Collapse(menuToggle, {toggle:false})
                          
                          navLinks.forEach((l) => {
                          l.addEventListener('click', () => { 
                              if (window.innerWidth < 992){ // This part fixes flickering on desktop nav-items!
                                  bsCollapse.toggle()
                                  animationMenu.setDirection(directionMenu);
                                  animationMenu.play();
                                  directionMenu = -directionMenu;
                              }
                           });
                      });
                      .navbar-lowe {background-color: black;}
                      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
                      <nav class="navbar navbar-expand-lg navbar-lowe">
                              <div class="container-fluid">
                                <a class="navbar-brand" href="#">
                                  <p>Logo</p>
                                </a>
                                <button
                                  class="navbar-toggler"
                                  type="button"
                                  data-bs-toggle="collapse"
                                  data-bs-target="#lowetoggle"
                                  aria-controls="lowetoggle"
                                  aria-expanded="false"
                                  aria-label="Toggle navigation"
                                >
                                <div class="lowe-menu" style="width: 50px;"></div>
                                </button>
                                <div class="collapse navbar-collapse" id="lowetoggle">
                                  <div class="navbar-nav align-items-end">
                                    <a class="nav-link active" href="#home">Home</a>
                                    <a class="nav-link" href="#work">Work</a>
                                    <a class="nav-link" href="#contact">Contact</a>
                                  </div>
                                  <div class="navbar-text ms-auto text-end">
                                    <a class="btn nav-button" role="button">Call Today <strong>05555555 555</strong></a>
                                  </div>
                                </div>
                              </div>
                            </nav>
                       <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.8.1/lottie.min.js"></script>
                      <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
                      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

                      Source https://stackoverflow.com/questions/70614610

                      Community Discussions, Code Snippets contain sources that include Stack Exchange Network

                      Vulnerabilities

                      No vulnerabilities reported

                      Install AnimationMenu

                      You can download it from GitHub.
                      You can use AnimationMenu like any standard Java library. Please include the the jar files in your classpath. You can also use any IDE and you can run and debug the AnimationMenu component as you would do with any other Java program. Best practice is to use a build tool that supports dependency management such as Maven or Gradle. For Maven installation, please refer maven.apache.org. For Gradle installation, please refer gradle.org .

                      Support

                      For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

                      DOWNLOAD this Library from

                      Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
                      over 430 million Knowledge Items
                      Find more libraries
                      Reuse Solution Kits and Libraries Curated by Popular Use Cases
                      Explore Kits

                      Save this library and start creating your kit

                      Explore Related Topics

                      Share this Page

                      share link
                      Consider Popular Menu Libraries
                      Try Top Libraries by LeeHanYeong
                      Compare Menu Libraries with Highest Support
                      Compare Menu Libraries with Highest Quality
                      Compare Menu Libraries with Highest Security
                      Compare Menu Libraries with Permissive License
                      Compare Menu Libraries with Highest Reuse
                      Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
                      over 430 million Knowledge Items
                      Find more libraries
                      Reuse Solution Kits and Libraries Curated by Popular Use Cases
                      Explore Kits

                      Save this library and start creating your kit

                      • © 2022 Open Weaver Inc.