LSchneiderman

@Jack Thank you! Very aggravating!

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?

@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?

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

@akapowl Thank you. I will rethink.

OK, but I am declaring my object as suggested: https://codepen.io/lschneiderman/pen/eYbNNvj?editors=1111 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.

@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?

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?

Thank you, @Rodrigo!!

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

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?

That was it! Thank you, @Rodrigo!

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?

*Thank you*, @Rodrigo!!

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?

Thank you very, very much @Rodrigo!!

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?

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?

Thank you, @Rodrigo!!

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?

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

I've seen lovely videos playing with scrub when the video is the only thing on the page, like this: https://codepen.io/wisearts/pen/ExZGrbZ 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?

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?

@Jack Thanks!!

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.