LSchneiderman

Thank you, @PointC!

I'm having trouble unblurring text with ScrollTrigger and CSS. Please tell me what I'm doing wrong...

I'm using the example above in Codepen to scrub through a video on scroll. When the video is played to the end, I want to start being able to scroll the rest of my web page. How do I detect when the video is finished and allow normal scrolling to start?

Thank you, @GreenSock!!

I have a trigger that works correctly scrolling forward, but not backward. Going forward, I want the navbar to change from highlighting Part 1 to highlighting Part 2 at a certain point, then to change from highlighting Part 2 to highlighting Part 1 when you scroll backward past that point. My code doesn't work for the backward scrolling part. What am I doing wrong please?

@Jack - thank you!

I'd like to have some elements of my project move faster on scroll than others. In this project, I'd like #screen2 to move slower than #screen3. How would I do that please?

Thank you, @Jack!!

@Jack What about the token, though?

We just bought Club Greensock BusinessGreen. But how do we install this? We don't have npm or yarn. We need to download it to our laptop/PCs and to our production server. We basically just want the DrawSVG plugin. How do we do this?

@Jack ?You're the man! Thank you!

@mikel That's great! The set seems to be what I need. If I want to fade in the ball, would I set opacity to 0 in the css and then make the set phrase read: set(".ball03",{opacity:"1"}, 2.48); How would I set the number of seconds for the animation?

What if I have a dot on the line (ball03) and I only want it to appear when the line draws to that point? https://codepen.io/lschneiderman/pen/mdmNaGq?editors=1111

@Jack Perfect! Thank you!

@Cassie Thank you!! I don't know if you can help me with this tweak, but when I incorporated the path into my larger project, the circle follows the path, but when it reaches the end, it jumps back to its original, beginning spot: var action = gsap .timeline({ defaults: { duration: 9 }, scrollTrigger: { trigger: "#path-pin", start: "top top", end: "+=200%", pin: true, pinSpacing: true } }) .to(".ball01", { duration: 0.01, autoAlpha: 1 }) .from("#path", { drawSVG: 0 }, 0) .to( ".ball01", { motionPath: { path: "#path", align: '#path', alignOrigin: [0.5, 0.5] } }, 0 ); How do I make that circle just stay at the end of the svg path once it has followed the path all the way?

I want to animate ball01 along the svg path, starting from behind ball02, continuing along the line and stopping at ball04. I think the svg will need to be pinned for it to stay in view while the animation is taking place. I'm using https://codepen.io/delwinh/pen/OJMRYbd as my model. What needs to change in the code for the animation to work?

Yes, thank you, @Jack!

I'm trying to pin a div on top and then later pin something just underneath the first div. I am still very new to the whole GreenSock/ScrollTrigger world and don't have my bearings yet. Could someone help me with what am I doing wrong with these pins? I don't understand pin spacing and I wish I could use responsive spacing with percentages rather than pixels.

The "onEnter" function was what I needed. Thank you, @mikel!

@mikel I need it to work with ScrollTrigger.

Can scrolling be the user action that triggers audio at a certain point? And what if I had the user click to play one audio file. Do I need them to click again to play a second audio file?

@OSUblake is clicking the only action that will cause audio to play?

How would I play an audio clip as a loop when I scroll to a certain point in the page using ScrollTrigger and GSAP?

That worked. Many thanks!

Dear akapowl, Thanks for your reply! What you provided is close to what I want to happen, but I just want the second image to fade in over the first without seeing it scroll at all. Is that possible?