[unblurring text filter with ScrollTrigger]

Thank you, @PointC!

 

[unblurring text filter with ScrollTrigger]

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

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

[How detect when scrubbing video is finished?]

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?

See the Pen 9e810322d70c306de2d18237d0cb2d78?editors=0010 by shshaw (@shshaw) on CodePen

[ScrollTrigger -- how to set a class on reverse]

Thank you, @GreenSock!!

[ScrollTrigger -- how to set a class on reverse]

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?

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

[ScrollTrigger - make some elements scroll faster than others]

@Jack - thank you!

[ScrollTrigger - make some elements scroll faster than others]

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?

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

[How to install?]

Thank you, @Jack!!

[How to install?]

@Jack What about the token, though?

[How to install?]

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?

[ScrollTrigger animating along a pth]

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

[ScrollTrigger animating along a pth]

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

[ScrollTrigger animating along a pth]

What if I have a dot on the line (ball03) and I only want it to appear when the line draws to that point?

 

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

[ScrollTrigger animating along a pth]

@Jack Perfect! Thank you!

[ScrollTrigger animating along a pth]

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

 

[ScrollTrigger animating along a pth]

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 

See the Pen OJMRYbd by delwinh (@delwinh) on CodePen

 as my model. What needs to change in the code for the animation to work?

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

[How to pin one div just underneath another]

Yes, thank you, @Jack!

[How to pin one div just underneath another]

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.

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

[ScrollTrigger - play audio when scroll to certain point on the page]

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

[ScrollTrigger - play audio when scroll to certain point on the page]

@mikel I need it to work with ScrollTrigger.

[ScrollTrigger - play audio when scroll to certain point on the page]

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?

[ScrollTrigger - play audio when scroll to certain point on the page]

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

[ScrollTrigger - play audio when scroll to certain point on the page]

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

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

[ScrollTrigger- pin then fade in]

That worked. Many thanks!

[ScrollTrigger- pin then fade in]

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?