Okay
  Public Ticket #3960178
How to create a scroll scene
Open

Comments

  • Will Munroe started the conversation

    I am trying to create my first project / slide.

    Here is basically what I am trying to do — this was done in another plugin that just didn't cut it.

    https://www.loom.com/share/b511693a3d7149d79dd65beb97de8c6a

    One of your support representatives helped me when I was trying to decide whether or not to purchase LayerSlider. He suggested I would be best to implement this as a single scroll scene.

    Would it be one scroll scene or one slide? Or both?

    I am struggling a bit and not sure where to start with questions but here is what I am confused about right now.

    1. I have 3 elements that should be there as soon as the presentation scrolls into view ("process" "Spanning all three dimensions" and the first pagination image, I don’t want these elements to transition in, I just want them to be there. How do I do that?

    2. One those elements should just always be there, it shouldn’t transition out at all and should still be there when you transition past the slideshow altogether. How do I do that?

    3. Within a slide timeline, I only seem to have a few time “anchors” for transitions: opening transition starts, opening transition completes, loop starts, loop completes, opening and loop transitions complete. Thankfully, the presentations I am putting together only have 2 or 3 “stages”. If I had more, would I need to use another slide?

    4. Since the size of the canvas appears to be in pixels, I am completely confused about how this presentation will adapt to other screen sizes. Does the plugin just kind of ad lib that?

    I will probably have more questions. I don’t want to pepper you with two many tickets, especially over a long weekend, so I will try to figure this out on my own until I hear from you.

    Thank you so much

    Will

  •   Will Munroe replied privately
  •  146
    George replied

    Hello Will,

    I’ve created a test Scroll Scene for you — you can import it into LayerSlider and take a look at the settings I used to see how everything is configured.

    The key concept to understand with scroll scenes is that you need to build your slider as if it were a normal timeline-based animation, and then LayerSlider will tie those animations to the scroll position instead of timing.
     
    It’s very important to note that with Scroll Scenes, you can only use one slide, which is why you need to rely on layer timing to emulate the effect of having multiple slides. Because of this limitation, for any layer that you want to hide or remove at some point, make sure to set its Ending Transition’s “Start When” option from “Slide Change Starts” to “Opening Transition Completes”.
     
    To fade out the first paragraph before the second fades in, you’ll want to coordinate their transition timing and Start At settings:
    • Suppose your first paragraph has an Opening transition duration of 1000ms and Ending transition also 1000ms.
    • If you want the second paragraph to start fading in after the first is fully gone, set its Start At to 2000ms.
    • If you want them to overlap, and fade one out while fading the other in, you can set the Start At of the second to 1000ms.
     
    You have full control over this by adjusting each layer’s transition timing and “Start At” value in the timeline editor.
     
    If you’d like the diagram to “rest” between stages to make it feel like there are three separate slides, you can absolutely achieve that by properly setting the Opening Transition → Start At and Ending Transition → Start When timings for your layers.
     
    You can also use percentages (%) instead of pixels (px) for offset values if you prefer.
     
    In the example I sent, I also use layer actions to animate the scene to the correct positions when clicking on the bullets.
     
    If you can describe the concept in more detail, we’d be happy to help you with the exact timing setup — or even assist directly with editing the slider if you can provide temporary WP admin access to your site.

    Attached files:  LayerSlider - scroll-scene-test - 2025-04-22 at 16.49.42.zip

    Best Regards,
    George | Kreatura Dev Team

  • Will Munroe replied

    Thank you George. I will try to move forward with these answers but I was unable to successfully import the demo you sent.

    It seems that it was created with a newer version of LayerSlider so I got a warning. Is it possible you are working with an update that has not been released?

    Thank you so much

    Will

  • Will Munroe replied

    Hi again George

    Thank you for you answers. I am afraid you didn't mention how to do a simple "fade out" transition. There is no simple preset for either fade out or fade in without adding a "swing" or a "bounce" or some such addition and I can't figure out how to do it manually.

    After that there is the question of timing but it is hard to make sense of the timing if I cannot make layers "disappear" on command. So please let me know how to configure a simple "fade-out".

    I have created a temporary login link for you https://staging.mikaelmeir.com/wp-admin/?wtlwp_token=570f34c1c059c14b4d4ce9d212cd72989b67a85178c963671695d88c572189a7ec40c8840bcf933cd2621dbd56fd434d418c0439f5e2413b38cb78b9bab9ba7e

    If you are looking into one of these slideshows, or helping me move it along. Please look at the one that says "do not touch" (that note was for someone else). If you do make changes, please do let me know exactly what you have done so I can learn how to use your plugin. Maybe a Loom video of any changes would be helpful.

    Here is the link to the Figma file I am working from: https://www.figma.com/design/UN4WpMIZkv41la01iXuDgX/Mikael-Meir-Website?node-id=12-138&t=ngxRf7VjQKFNr0Vo-1 (it is on the Website panel)

    This first slideshow is in the Figma file on the Leaders page and you will see it's 3 "stages" there (you can also reference the Loom I sent earlier) https://www.loom.com/share/b511693a3d7149d79dd65beb97de8c6a 

    I am hopeful we can implement at least one of these in the next couple of days and that the remaining ones will be easier after the first one is done.

    Thank you so much

    Will

  •  146
    George replied

    Hello Will,

    By default, any newly added layer will already fade in, as long as the Fade option is enabled in the Opening Transition. The easing setting (like “swing” or “bounce”) only defines how the animation progresses over time — not whether it’s a fade or something else. For scroll-driven scenes, I’d recommend using simpler easing types like linear or easeInOutSine for more controlled, subtle animations.

    Now, for a simple fade-out, you’ll need to configure the Ending Transition of the layer:

    1. Do not change the layer’s properties (like position or size) — this way only the opacity will animate.

    2. Set the easing to linear or easeInOutSine for a smooth effect.

    3. Make sure the Ending Transition is not set to trigger on slide change, but rather to run after the Opening Transition completes (especially important in Scroll Scene workflows).

    This setup will ensure the layer fades out cleanly and predictably when its scene ends.

    Best Regards,
    George | Kreatura Dev Team

  •  146
    George replied

    Thanks again for the access. I was able to log in to the wp-admin area, but unfortunately the admin interface is extremely slow on my end — to the point where even the LayerSlider editor isn’t loading properly.

    Because of this, I’m currently unable to make the necessary changes or review the slider setup in detail.

    Best Regards,
    George | Kreatura Dev Team

  • Will Munroe replied

    Hi George

    Yes, I noticed some terrible performance on my server this afternoon. It should be resolved by now, please try to access the admin again.

    Thank you so much

    Will

  •  146
    George replied

    Hi Will,

    I’ve duplicated your project and applied the requested settings. Let me know if everything looks good to you.

    Best Regards,
    George | Kreatura Dev Team