[video not showing or playing on iphone/Safari]

@Jack Thank you! Very aggravating!

[video not showing or playing on iphone/Safari]

When I view a video that is triggered to play with scrolltrigger, it doesn't show up or play when I'm viewing it on an iphone 12 Pro with a Safari browser. 

 

Here is a link that shows the same thing: https://newsinteractive.post-gazette.com/.testLaura/test.php

 

Again, I'm only seeing this on Safari running on iphone. What should I be doing differently please?

See the Pen KKbyQGV by lschneiderman (@lschneiderman) on CodePen

[problem with massive image and horizontal scroll when at the bottom of a page]

@RodrigoThat does work, but now I seem to have a weird thing with the pin where as soon as the massive image gets to a certain point on the page (where start hits scroller-end), massiveImage jumps up to its pin spot. I can't get it to just scroll to a certain point and then stick at that point. I'm also unable to reproduce this effect in codepen. I think it might have something to do with anticipatePin. I've tried putting smaller numbers in there (.5, .25) to no avail. Any advice?

[problem with massive image and horizontal scroll when at the bottom of a page]

@Rodrigo How would I make the image advance a shorter distance with each scroll?

[Mute/unmute audio after click a button]

@akapowl Thank you. I will rethink.

[Mute/unmute audio after click a button]

OK, but I am declaring my object  as suggested:

 

I'm using the same code for both videos. At first, the code worked on the first video (the audio could be heard when you scrolled to that video), but not the second (the audio could not be heard). But now, no audio is heard when you scroll to the first video and the second video is frozen. This is what is confusing me.

[Mute/unmute audio after click a button]

@Rodrigo why doesn't #vid1 have a muted property? In the html, it's listed as     <video playsinline muted loop autoplay class="subsection" id="vid1">. Doesn't that give #vid1 a muted property?

 

 

[Mute/unmute audio after click a button]

I have many videos that start out muted autoplaying on loop. When the user scrolls to them, I want the video to become unmuted so the user can hear the video. Once the video scrolls past, I want the video to be muted again.

 

The way I have things coded, the videos become unmuted onLeaveBack, but not onEnter. Why is this happening?

See the Pen eYbNNvj?editors=1111 by lschneiderman (@lschneiderman) on CodePen

[getting each video to play/pause at a certain point]

Thank you, @Rodrigo!!

 

[getting each video to play/pause at a certain point]

@mvaneijgen I put in those two console.log lines of code and got back "object" and undefined.

[getting each video to play/pause at a certain point]

I want to have videos play with audio on my website, so I made a button that users have to click in order to see more than a screen of the site. When you click this button, the muted property on each video is turned to false. Then when each video comes into view, I want it to play with audio. When each video is no longer in view, I want it to pause. But I'm getting errors in my ScrollTrigger code for playing and pausing video. I've tried using video, $(video)[0], $(this)[0], but nothing seems correct. Can anyone assist please?

See the Pen yLGBpez?editors=1111 by lschneiderman (@lschneiderman) on CodePen

[how to pin an element to a specific position]

That was it! Thank you, @Rodrigo!

[how to pin an element to a specific position]

I want to pin a dropdown menu to a specific spot when my navbar gets pinned to the top. 

 

When you click the "Day 1" element in the navbar, then .dropdownL scrolls down. I need .dropdownL to be positioned absolutely so that it scrolls down directly beneath "Day 1" UNTIL "Day 1" gets pinned to the top of the screen. At that point, I want .dropdownL to have a position: fixed, top: 50px and left: 2.5vw.

 

How do I set the pin position to this very specific spot please?

 

 

See the Pen MWzLExP by lschneiderman (@lschneiderman) on CodePen

[pinning content below horizontal scroll so it is visible]

*Thank you*, @Rodrigo!!

[pinning content below horizontal scroll so it is visible]

I don't know if my codepen exactly shows this, but it shows on a big screen. 

 

I have a massively wide image that I'm showing with horizontal scroll.

 

BUT I want the content that comes after it to freeze in place under it, *where the user can see it*, until the horizontal scroll is done, and then have the content scroll normally. Right now, the content freezes but it isn't visible. It's below the screen area. So all that shows is the massive image. I want the massive image to take up 50vh and have the content that comes after it be visible but "pinned" underneath. Does that make sense? How can I do that?

 

See the Pen YzRJVBE by lschneiderman (@lschneiderman) on CodePen

[problem with massive image and horizontal scroll when at the bottom of a page]

Thank you very, very much @Rodrigo!!

[problem with massive image and horizontal scroll when at the bottom of a page]

I'm having a bit of trouble with a massive image and horizontal scroll. It's based on this code: https://easeseas.es/posts/horizontal-scroll-cristobal-balenciaga-museoa/

 

This code works perfectly well on my page when it's the only item on the page. However, when it's at the bottom of a long web page, or even a webpage a few screens long, the horizontal scroll goes abruptly from the beginning of the image to the end with no scrolling in between. 

 

My codepen doesn't seem to reproduce this issue, but you can see it when I put my test page on a server: https://newsinteractive.post-gazette.com/.testLaura/test2.php

 

Can anyone tell me what has gone wrong or how to correct for it?

See the Pen YzRJVBE by lschneiderman (@lschneiderman) on CodePen

[using pin and each]

I want to pin every element of a certain class when it gets to the center of the screen. I don't want them to pin all at once -- just once each one reaches the center of the screen. I'm trying to use forEach and ScrollTrigger pin. Can someone tell me please what I'm doing wrong?

See the Pen XWyMJwM?editors=1111 by lschneiderman (@lschneiderman) on CodePen

[horizontal scroll with one large image not working]

Thank you, @Rodrigo!!

 

[horizontal scroll with one large image not working]

I'd like my page to scroll normally until it gets to this one hugely wide image. Then I want it to scroll horizontally until it gets to the end of the image, and then resume scroll normally.

 

I was able to get it to work, kind of. It scrolls, but not to the end of the image, which is huge, and the image should be shrunken to fit within the height of one screen.

 

Can someone help me understand what I'm doing wrong please?

See the Pen qBJmJvq by lschneiderman (@lschneiderman) on CodePen

[Video play with scrub doesn't work in the middle of other content]

Thank you, @Jack!! That did the trick!

[Video play with scrub doesn't work in the middle of other content]

I've seen lovely videos playing with scrub when the video is the only thing on the page, like this:

See the Pen ExZGrbZ by wisearts (@wisearts) on CodePen

 

But when the video is surrounded by other content on a page -- as it will inevitably be -- how do you get the video play on scrub AND hold off the  other content from scrolling over it until it's done playing?

See the Pen ZEqeJWx by lschneiderman (@lschneiderman) on CodePen

[Video is pinning when pin set to false or not set]

I have some videos that I want to start/stop on scroll. The behavior is slightly different for desktop and mobile. On desktop, the video pins and plays, while on mobile, it doesn't pin but still plays, though at a different trigger point. What's happening, though, is that on mobile, it both pins and plays, although the trigger point is correct. Why is this happening please and how do I correct it?

See the Pen yLRaReY by lschneiderman (@lschneiderman) on CodePen

[Pin is working, but nothing is scrolling over it]

@Jack Thanks!!

[Pin is working, but nothing is scrolling over it]

I want to have a full-screen image pin while text boxes scroll over it. 

 

I have the pin working, but nothing happens on scroll until it unpins -- the text box doesn't scroll over it.

 

Could use some help please on what I'm doing wrong.

See the Pen vYVGEqM by lschneiderman (@lschneiderman) on CodePen