Okay
  Public Ticket #1919664
Trigger Middle Transition with JS
Closed

Comments

  • Karl started the conversation

    Hello,

    I know the basic steps for what I'd like to do in LayerSlider, but can't find the right syntax to use. I'm building an interactive module that allows the user to input a few values, and then scales different layers of the scene to reflect the entered values. After poking around, it looks like I can use the ID tag for a layer in Javascript, but don't know how to specify Scale X as the value I want. 
    What are the names of the scale x and scale y attributes to use in scripting? How do I include them in my script? document.getElementById("idOfLayer").ScalX?

    Also, I think it'd be best to trigger the Middle Transition for the layers I want to change, but don't know how to trigger the Middle Transition when the user clicks on a button. I've combed through the documentation, but cannot find anything that explains how to do it. How do I trigger that Middle Transition in my JavaScript?

    Thanks!

  •  108
    George replied

    Hello Karl,

    Thank you for getting in touch with us. My name is George and I'm happy to assist you today. I appreciate your patience while we've been working towards your ticket.

    Unfortunately there is no way to trigger the built-in middle / loop transition of the layer with custom JS code.

    Best Regards,
    George | Kreatura Dev Team

  • Karl replied

    Hmm... that's unfortunate. Would this setup work?

    Two identical Slides. When the user inputs the values, it applies the target Scale Y value to the layer on the other slide then triggers the transition to that slide. Only the layers that are effected by the user inputted values have visible transitions on them, so the user just sees the scale change on the layers I want to change. The code on Slide 1 only affects the scale of the layers on Slide 2 and vice versa. By bouncing between the slides, we get the scaling transitions triggered by JS.
    Is that doable?

  •  108
    George replied

    I'm sorry, I have to specify myself: there is no way to trigger / change any layer transitions. So if you set a layer transition, the layer will do the same transition again and again when the slider is changing to that slide. You cannot modify it "on-the-fly". The only way to achieve this is to re-create the whole slider, initialize it with the new layer transition settings and run it. We are doing the same in our Slide Transition Gallery. But for this you will need to have your complete slider markup and you will have to use the LayerSlider API of course.

    Best Regards,
    George | Kreatura Dev Team

  • Karl replied

    I'm trying to use CSS to change the scale of the video layers I've set up in LayerSlider. I set IDs for the three video layers, but when I use document.getElementById() to assign them to variables in my HTML layer, it returns Null. Why doesn't it see the IDs? My script doesn't call for the IDs until a button is pressed, so the scene should have loaded the IDs already.

    Do I have to embed each video on the HTML layer and use CSS to do the Z-depth and Blend modes?

    Thanks!

  •  108
    George replied

    I recommend you to use jQuery. LayerSlider uses it, so you don't have to include it separately. in jQuery, you can get / select the element with the following:

    jQuery( '#someid' )

    which will be the layer itself (and not the video inside) but you can scale the layer (the video inside will also scale with).

    Could you, please show me your slider? Maybe I could recommend more detailed instructions.

    Best Regards,
    George | Kreatura Dev Team

  • Karl replied

    Thanks for the advice! I really appreciate it. How do I show you the Slider?

  • Karl replied

    Here's my Slider.

  •  108
    George replied

    I checked your slider and the problem is that you included a whole website's html code into the Input Form layer. You cannot do this because it will break the whole site. Because the slider is inside a website's <body> element, you cannot use html, head or body elements in a layer. You will not need to include jQuery as well, because LayerSlider includes it. So first of all this should be solved. I recommend you not to use any style and script tags inside a layer. These should be included outside of the slider.

    Best Regards,
    George | Kreatura Dev Team

  • Karl replied

    I tried rebuilding the whole thing outside of LayerSlider. I got the whole thing working except for the animate() function, which doesn't trigger at all. I've attached the code. Do you know why this is happening? If I can get it to work here, I can try to rebuild it in LayerSLider. I was just trying to remove reasons for it not to work. 

    Thanks for the info about html layers in LS.

  •  108
    George replied

    I checked your code and I think I can recommend maybe a better solution for you. Do you know CSS transitions? https://www.w3schools.com/css/css3_transitions.asp

    I think that you would much easier achieve what you need with css transitions.

    For example, you have an element with id="someid", and you want to scale this element on hover. In this case you will need to use the following css codes:

    #someid {
    transition: transform 1s ease-in-out;
    }

    Note #1: the css property you need to animate, the timing and easing can be changed,

    #someid:hover {
    transform: scale(1.2);
    }

    Note #2: maybe you will need to use !important at the end of both lines.

    If you need to achieve the same by clicking to the element, you should use an extra css class name for it:

    #someid.someclass {
    transform: scale(1.2);


    And you should add / remove .someclass to the #someid element with JS on click action. That is much easier and faster than using .animate

    jQuery( '#someid' ).on( 'click', function(){
    $(this).toggleClass( 'someclass' );
    });

    Best Regards,
    George | Kreatura Dev Team