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?