HISE Logo Forum
    • Categories
    • Register
    • Login

    How to use CSS pan button with HISE

    Scheduled Pinned Locked Moved Scripting
    11 Posts 5 Posters 138 Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • CatABCC
      CatABC
      last edited by

      013833ad-1715-41c4-809d-a380ab90f15b-image.png
      I want to use CSS to make the button translate across the panel and include a transition animation. Can CSS do this?

      //I am a new student at HISE._
      //Windows11 & MacOS Ventura 13.6.7_

      GabG 1 Reply Last reply Reply Quote 0
      • CatABCC
        CatABC
        last edited by

        In addition, I found that transform: translateX(); on the button does not work, it always translates diagonally

        //I am a new student at HISE._
        //Windows11 & MacOS Ventura 13.6.7_

        1 Reply Last reply Reply Quote 0
        • GabG
          Gab @CatABC
          last edited by

          @CatABC CSS can definetly do it, here's an example

          If you resize the button you'll need to reajust some settings.

          HiseSnippet 1253.3ocsV01SabDDdOfKp1sMpH0e.qRUULQ.4rMPHmaUI7VKp.gVSRe4Kn06MmuUbdWq81CraT9uzeh868CzYu6r8YraB0R8PfXlclYe1mcdYuPq3PRhRSbpd4v9.w4ybaOTZhNHhIjjSNj37X2yXIFPSyUs+v9rjDHf33r72aU3TYER12e8c6yhYRNLQEg7VkfCmJ5ILSzdwd+nHN9XV.bonWIq2ZuS3J4ApXUJhmkc8H8Y7qYcgyYVyVxk7CrjHhyybazHjuqm2tMatsGi0Lfw1pNz7kP3Ng7s8doWPms8ve1g37niBDFktsgYfDhyJ6qBF1NRcqLeCdqHQzIFrB0IswcNW8wp3.6QzpkbPjHN3hQDUBAixESnskyosuz8LQfXr9Iz2Wjs.chGkIPmklFdKOE7p+uAu4.ImRPZkbHspaatVz2LYEKd9T2Sj3sYHCumJCkbaIK8SttGnPKjlM6wtFNViBi8n1NddqSw+rVqp32CzP7RMwPugoocpS+V5Hu5BlCT85qjnPsmrepwnj0eh0gm+f9r1QOPCH0QiUpqoLY.MDfXZnB2pr3M0lmo4TVXILvyb+TEmEeJFhWICNFCPMKHFa9lI.dvhERnsYXLzNB.DuUqtYRFkkaG8cUo32sh.SjOdv6OnUlhHPzMx3Sat0HMcvb5tZUpLvm9UbNuEMWsRG.ZepD4iVkzrglEHRS7o0ewnHzWkHLBkzmpgXlQbSgCFMSNZEVbL0ayFITfk.anRM4lvS0XhfOFBg8pJWYOltq.8odFpq9djXeF8xHfxEZdLPuVp5Pe1ym9.662APdFJN37bB0m9zmdePx5jnhSMi.opuOcauuNWJFBsjyX5pf+Zry84uIZtGsLNTk40aiDlxjBBzd94+KRXvuUaCzs0lk0rvYdz1ergPF.CPJZDFFrQRDKPcqO0i1n+fre0c6vp4sd1Oa1.C+6sEIHW9KQfjxi.90PvrD4nEd2roGa0X2sC2pEEiw9woPoEyxwwztDamCaLee04G16cOkS3Y4m1ndl5FfZlbUaTYRZKoO2nFgNnKhkBaOKLCQJXyW1ZVSYbapYgsktFRvhMnF5ytYTzCohGqFqaKCmoPcbQ5ZsBSkb6sHxJmqLvqk0Vq56pVA2A58WJLbtqYaJnUwwfdtKaGVo+PNVSl1qCnWG61fWViMDaHOcW9G8v5xWTRUxPk7Dov759Pg7GdLEonImc5PABQSMYyFdbwrg7ttDAFjJtEsfIYvu7bcxaN4PlgMJPXLw8oOnMB6ww4P3FbHe9PmJtGBIWiE4Y1VzcGm57.11AS1xq1a3Xg+TsWmtidTPkGc2c28FqZr.u2DsMa1LbZsMrpWc0U+aqZCLvLUHtypMqYCww042Qg7FMVouovgrWbPlctJNQWEjh8QldLu8wPEKfYESMa0NVz1iYXYR8+vreuO3r+GJDW08BggGMeLtzbvHde++AFKdwzm6dTXHvMS.3JtG+qK5yi9Ha+OisxExtmwLZAlm4ddZu1X1.GvcWJg3D6E+R1ZlbYOqrkAZCxfLAaRSwh0sxNEKVezhjdLtVcEOuRy9lrOISChIY16WqfOjFkoyTfQH8vmHdEmOcnlwwFKpiMWTG2ZQcb6E0wcVTGewh53tebGsuf+UoFUu7xFB4rKNJqgniyQRFlAlksR9G3VIAK.
          

          Enjoy!

          Christoph HartC ChazroxC CatABCC 3 Replies Last reply Reply Quote 7
          • Christoph HartC
            Christoph Hart @Gab
            last edited by

            @Gab nice one!

            GabG 1 Reply Last reply Reply Quote 1
            • GabG
              Gab @Christoph Hart
              last edited by

              @Christoph-Hart Thanks!

              1 Reply Last reply Reply Quote 0
              • ChazroxC
                Chazrox @Gab
                last edited by

                @Gab Woah that was pretty smooth.... You're gewwd. 👏

                GabG 1 Reply Last reply Reply Quote 1
                • GabG
                  Gab @Chazrox
                  last edited by

                  @Chazrox Thanks!

                  1 Reply Last reply Reply Quote 0
                  • DabDabD
                    DabDab
                    last edited by DabDab

                    @orange can we have a similar Repo/thread for CSS like you did for LAF Collection For Everyone ?
                    https://forum.hise.audio/topic/6615/laf-collection-for-everyone?_=1746597125645

                    Everybody is free to share their CSS files as HISE Snippets or Codes.

                    Bollywood Music Producer and Trance Producer.

                    ChazroxC 1 Reply Last reply Reply Quote 4
                    • ChazroxC
                      Chazrox @DabDab
                      last edited by

                      @DabDab That would be cool. 👍

                      1 Reply Last reply Reply Quote 0
                      • CatABCC
                        CatABC @Gab
                        last edited by

                        @Gab cool,This is exactly what I wanted, you are awesome

                        //I am a new student at HISE._
                        //Windows11 & MacOS Ventura 13.6.7_

                        GabG 1 Reply Last reply Reply Quote 1
                        • GabG
                          Gab @CatABC
                          last edited by

                          @CatABC Glad you enjoy it!

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post

                          49

                          Online

                          1.7k

                          Users

                          11.7k

                          Topics

                          101.8k

                          Posts