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.
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.
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.
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.
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.
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. Cheers.
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.
Cheers.
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.
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
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.
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.
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.
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.
Cheers.
$('#slider').on('slideTimelineDidCreate', function(event, slider) {
slider.slides.current.timeline.play(); //crashes
});
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:
data.slideTimeline.play();
data.slideTimeline.pause().clear();