Public Ticket #2219803
Parallex sliding


  • Remus started the conversation

    Hi, I noticed the parallex versions of sliders, experience lots of vertical panning effect on a mobile device. On the desktop its great, with mouse movement, but on a phone, eg. if browsing laying in bed or even regular use the experience is weird, to the point that it looks like bad coding.

    Is there a way to control the parallex effect on device tilt for both the vertical and horizontal axis?
    Let me know.


  • [deleted] replied

    Hello Remus,

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

    Yes, you can apply parallax movement on both axes. You can even change the intensity of the parallax effect. These settings are described in the documentation in the layer-transition-parallax section.

    Also, if you need different parallax values for mobile, you can use the device specific layers feature. Since version 6 of LayerSlider you have the option to display layers only on certain devices (desktop, mobile, tablet). This feature gives you the option to create separate layers and layouts for mobile, tablet and desktop view in the same slide, and only show them on the required device. Basically, use different parallax layers that are moving around less for mobile. It's detailed in the device-support section in the same main tab.

  • Remus replied

    Thanks for the reply. 

    I tried them out and I have a question.

    Is there a way I can toggle a slide (eg. class="ls-slide is-hide-phone") between devices... instead of each layer  within the slide div. The example class breaks the coding btw. I know it hiding layers can have its uses, but is there a hack to hiding or toggling the entire slide? I don't seem to find in the documentation.

    Let me know. Cheers

  • [deleted] replied

    Unfortunately there is no option for that at the moment. You can only hide layers or the slider itself (Hide under and Hide over), but not slides.

  • Remus replied

    Ok understood.
    Question: Is there a way to change the initialization of the viewport? Meaning, for example, if I position my slider to the bottom of the page... it seems like on scrolling to the bottom, its only initializing the animation when the bottom fold of the browser reaches halfway down the y-axis of the slider. So it seems weird like there is an empty space till it reaches the init point.

    I would prefer if i could control the y value to when it inits... or at the very least, once the viewport passes 0 to 5 pixels upwards past the bottom fold of the browser... it starts animating.

    Let me know. Cheers.

    PS. i have already tried startInViewport: false with autoStart: true, which is not what im trying to achieve above. 

  • [deleted] replied

    At the moment you cannot change the trigger point of the startInViewport option. As you've mentioned, it is set to be the center of the slider. Currently, you can either automatically start sliders after pageload or when the viewport reaches their center.

  • Remus replied

    Hi Attila,

    Im trying to use "slider.slides.current.timeline" to work with gSap. However there is no documentation on how to use it correct. the code below is crashing. If you can, provide me with an "example code" of how to correctly tap into gSaps api.

    $('#slider').on('slideTimelineDidCreate', function(event, slider) {
    slider.slides.current.timeline.play(); //crashes

  • [deleted] replied

    This will be the correct code:

    $('#slider').on('slideTimelineDidCreate', function(event, data ) {
    /// your code

    where data is structured as follows:

    data.layersOnSlideTimeline - layers on the slide timeline (current slide)

    data. slideTimelineDuration - the duration of the timeline in seconds

    data.slideTimeline - the timeline itself

    and you can use commands such as: