[Horizontal scroll with draggable proxy + draggable box not working independently]

Great work @akapowl appreciated very much👏

[Horizontal scroll with draggable proxy + draggable box not working independently]

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.

[Horizontal scroll with draggable proxy + draggable box not working independently]

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?

 

See the Pen jOBrYyP by kholja (@kholja) on CodePen

[ScrollTrigger calculates wrong pin-spacer height when user agent type is mobile]

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.

[ScrollTrigger calculates wrong pin-spacer height when user agent type is mobile]

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?

See the Pen wvoNzQG by kholja (@kholja) on CodePen

[How to create anchor menu to horizontal scrolling page?]

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});
}

 

[Ugly vertical bounce at start and ending of horizontal fake scroll in Chrome.]

Works - thank you Jack.

[Ugly vertical bounce at start and ending of horizontal fake scroll in Chrome.]

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?

See the Pen dab3fba5dadb5e3fb8837f7151bbbfa4 by akapowl (@akapowl) on CodePen

[Draggable to start video not working in Safari]

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.

[Draggable to start video not working in Safari]

1 hour ago, iDad5 said:

Just 2 cents more, if you don’t want the poster frame to be replaced by the first frame of the actual video - which might happen under certain preloaded conditions, it might also work to start playing a hidden video or even audio. I’m not 100% sure, but my understanding is, that once ans media has started due to user interaction, the rest on that page is fair game for programming. 

Good hint - thanks for pointing that out.

[Draggable to start video not working in Safari]

34 minutes ago, iDad5 said:

You could try to start the video on mousedown (when the user starts dragging) and immediately pause it. After that you should be able to play it programmatically ever after

Thanks @iDad5 this works. Great idea, great forum

[Draggable to start video not working in Safari]

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?

 

See the Pen wvoOWRQ by kholja (@kholja) on CodePen