Kholja

Great work @akapowl appreciated very much?

Hey @akapowl thank you for your help. Works like a charm . I used the second solution for the example. I was thinking in this direction but maybe used the wrong search terms. But also thanks for the first example. I assume this would be a great way to implement interaction with other draggables too.

I'm experimenting with ScrollTrigger horizontal scroll and additional draggables. In this example I used a horizontal fake scroll with a proxy draggable element to simulate swiping on touch-devices. Then I added some draggable boxes. If I drag a box, this works even if the boxes lying over each other. But the dragging of a box does drag the horizontal scroll proxy. Why is this happening and how could you prevent that?

At least Chrome on the iPhone let's me scroll through all panels, which was not possible on the emulator. There are some weird bugs but they are probably more CSS-related. I'm gonna do some modifications of the example and let you guys know the results.

I got this example from the forum. It works, however if you export the sample, open chrome developer tools and switch to "Responsive" in the device toolbar, the height of the pin-spacer is calculated wrong. I.e. 3800px instead of 7400 in a window size of 1200x800. The wrong calculation happens as soon you choose a device with user agent type "mobile". Why does this happen and what can I do to make it work?

Maybe helpful in some cases, if you want to make the hashes work on first page impression ( i.e. calling https://mypage.com/#about ), you can get the hash from the url like this: var hash = window.location.hash; if(hash) { var left = $(hash)[0].offsetLeft; gsap.to("html", { scrollTo: left, duration: 1}); }

Works - thank you Jack.

When I export this standard horizontal fake scroll example and view it in Chrome, there is a bit of a vertical bouncing at the start and at the end of the movement. There is no bounce, when running in Firefox or when running in Codepen's iFrame. What is the best way to prevent this effect? Using a dummy iFrame? Or is there a better solution?

To finish this up I did a short test with an audio file. Indeed you can control all other media programmatically after the audio file played due to a click or mousedown event. Controlling the video was possible without any limitations.

Good hint - thanks for pointing that out.

Thanks @iDad5 this works. Great idea, great forum

Hi Guys, I want to start a video via a slider, which is built with draggable and inertia. This works in Chrome and Firefox. Safari interprets the action after onThrowComplete as autoplay and prevents playing the video, due to it's autoplay-policy (except video is muted). However it seems to be OK for Safari if I start the video with a ordinary button (at the bottom of the example). Any idea how to solve this?