Okay
  Public Ticket #3555400
Showcase slider speed
Closed

Comments

  •  1
    Pawel started the conversation

    Hi there,

    Is there a way to slow down the transition speed between the slides in the Showcase Slider homepage?

    At the moment when you're on Macbook trackpad it's hard to land on a specific slide and you have to make very delicate movement on the trackpad otherwise it skips 2 pages.


    Website: http://pawelptak.com/


    Thank you,

    Pawel

  •  1,973
    Support replied

    Hello Pawel,

    plz try opening /js/scripts.js file (path relative to root theme folder), line 976 add a parameter 'speed' to the slider's options, for example

    slider = new ClapatSlider('.showcase-slider', { 
                     direction: 'vertical', 
                     snap: true,

                     speed: 2,

    ... the rest of the code follows here ....

    hard refresh the page (Ctrl+F5) before testing

    To decrease the speed put something like 0.5 to increase a higher value (2.5)


    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •  1
    Pawel replied

    Hi there

    Unfortunately that didn't work. Attached screenshot from the script file and here's a video: 

    Attached files:  Screenshot 2024-01-08 at 14.45.45.png

  •  1,973
    Support replied

    Hi Pawel,

    can you provide wp admin access in a private comment ? Make sure the admin use has full rights using Appearance -> Theme File Editor as we need to modify some files.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •   Pawel replied privately
  •  1,973
    Support replied

    So look Pawel:

    I was trying to update /js/scripts.js file to modify the initialization for the showcase slider but I get an error in the editor:

    https://prnt.sc/nza6Jc8sLGTa

    I tried to add two parameters with default values and a short explanation for each

    // how long it should wait in ms after last wheel event before snapping to position and after snapping to eliminate the residual scroll

    snapwait: { 
       before: 10,
       after: 80
    },

    // how quick the slider transitions ends

    ease: 0.075,

    so speed is related the amount of advancement and it has no effect when snapping is enabled.   ease is related with the time the transitions ends

    snapwait is used to calibrate the trackpad as it sends the same events as mouse wheel does but in much quicker succesion so it cumulates the events waiting before and after the last event counted.

    After changing these two parameteres (because you can ignore speed) plz hard refresh the page (Ctrl+F5)

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •  1
    Pawel replied

    Ok I changed the script from the server side, this helped with the issue when it's scrolling really fast but it still skips a page or 2.

    I've played with the numbers a bit so it's not scrolling so fast.

    Attached files:  Screenshot 2024-01-12 at 13.47.24.png

  •  1
    Pawel replied

    actually this stopped working and it's scrolling fast again

  •  1,973
    Support replied

    Hello Pawel,

    this is what I see after I cleared the cache (see attached the screen recording)

    So easing takes now very long to complete

    Attached files:  chrome_Q0Hfxx3Vco.mp4

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •  1
    Pawel replied

    ok I changed it back to:

    speed: 0.2,
    ease: 0.075,
    snapwait: { 
    before: 10,
    after: 80
    },


  •  1
    Pawel replied

    do you have any other suggestions on how to work around the snapping to every other page and not the to the next one?

  •  1,973
    Support replied

    Hello Pawel, sorry, are we talking about trackpad? (snapping over)

    the two parameters to work on are snap wait to adjust it for this specific case.

    We can help you also to make the slider free flow if this is a nbetter solution.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •  1
    Pawel replied

    Yes it's mainly about the trackpad, the rest works fine.

    Can you please explain to me what does before and after do in this case:

    snapwait: { 
    before: 10,
    after: 80

    Which numbers do what?

  •  1,973
    Support replied

    Hello Pawel,

    information from the developer:

    the trackpad events are the same as scroll events and they contain a delta value which represents the amount it has scrolled. There is no way to distinguish between them, they have the same type. Trackpad events occur much often in the same interval compared to the mouse wheel events, and the scroll delta is a fraction of the scroll delta coming from mouse wheel events.

    Therefore when the slider snaps, it needs to decide when it will snap - so it will wait for a certain period of time to accumulate the number of scroll events and the period of time will ignore the scroll events while it snaps to the next slide.

    snapwait.after - ignoring the scroll events for n ms after the snap has started (in my mind increasing this value this will slow the trackpad snap + scroll )

    snapwait.before - how long does the slider have to wait (in  ms) after the last scroll event in order to beginning the process of snapping (which is ending the scroll at the center of the next slider)

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •  1
    Pawel replied

    Hello,


    Not sure if this is a bug but only on this page: https://pawelptak.com/serano_portfolio/3d-renders/ when you go all the way down it seems like the portfolio section is cut? The other pages seem fine.


    Thanks,

    Pawel

  •  1,973
    Support replied

    Hello Pawel, when opening the page source I see that the page navigation is inside of a wp-columns block?

    https://prnt.sc/4iFM9eVu4DyH

    the html of the page is malformed, any opening element in the content that is not closed properly?

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  •  1
    Pawel replied

    There was a issue with the Vimeo embed, that's fixed now. Thank you!