Slider Effect with push out elements

Support
#1

I want to create a slider where 3 elements are always visible, when a new element is added the element on the other side should fly out again.

(The blurred images should be outside the window.)

Bildschirmfoto 2021-11-17 um 09.41.32
Bildschirmfoto 2021-11-17 um 09.41.321911×435 181 KB

The whole thing should happen in an endless loop, so I use the carousel function.
The whole thing works so far so good, except for the side effect that the other elements of the carousel are visible in the background although they should actually be offset to the left or right!

This is the formula with which I create the offset:

translateX(calc((50vw * clamp(0, var(--x-slide-distance) - 1, 1)) * var(--x-slide-balance)))

Access data and more info in the security note.

UPDATE:

I have now created the push-out slider on another page where the effect works much better. There seems to be no problem with the carousel elements.

Unfortunately there are still a few points that don’t quite work:

  1. the start of the animation seems to be shifted to the right and only aligns itself correctly to the center after the first slide change.

  2. on an iPhone Chrome Browser the animation does not appear correctly and seems choppy. On safari it seems to be better.

  3. on some images a dark line seems to appear during the animation. But then it disappears. (Chrome Browser)

Bildschirmfoto 2021-11-18 um 13.50.46

I have added the access data to the second page as well.
The slider looks really cool, and i would be happy to see it working perfectly :slight_smile:

Slider Effect with push out elements #2
#2

Hey @Regnalf,

This is queued to be reviewed by our development team.

Please temporarily deactivate the coming soon page so we could see the page without logging in. And by the way, your password doesn’t work. We don’t currently need access though but just update the password just in case.

Thanks.

#3

Hi, i deactivated the “under construction” pages, and set password for both pages again, should work now.

#4

Hey @Regnalf,

The animation is smooth on an iPhone 11 and Chrome and the animation is smooth. This could be an issue with your device only. What iOS and browser version are you using.

Regarding the border, I couldn’t see it and the image in your screenshot too. What page can we see that?

Thanks.

#5

I have an iPhone 11 with OS 15.1 and have the issue in Chrome Browser, not in Safari. I sent you the link in secure note.

But the issue with the lines, is not allways happening.

#6

I made a screen video capture of the iPhone Chrome Browser issue. Battery safe mode was not active!

#7

And it seems that also some of the demo sliders won’t work correctly.

#8

Hey @Regnalf,

I previously said I tested in iPhone 11 Chrome.

I’ll just add that I’m using Chrome Mobile version 94.0.4 (see the video in the secure note. The video doesn’t represent the exact smoothness though). What is your browser version?

The video you posted about our demo, by the way, is a known issue that is now queued for investigation.

Thanks.

#10

Hi @christian, i’m using version 96.0.4664.53 on the iPhone 11.

On my iPad (5th generation) with the same browser version number, the issue does not occur.

I also tested it on an older iPhone SE in the Chrome browser, and the issue doesn’t occur there either.

#11

Hey @Regnalf,

Thank you for providing more information.

Regretfully, we don’t have a device with Chrome 96.0.4664.53 right now so I’m going to post this case in our issue tracker so this will be queued for investigation by our development team.

Just keep the video of the issue up to help in the investigation.

Thanks.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.