Scroll indicator for a specific div rather than entire page

[iammarkmulvey 5 Likes (Newbie)]

Below is a great example of a scroll indicator using ScrollTrigger.

 

What I am curious about is how would you make the scroll indicator only work for a specific div or section height rather than the entire page/document height?

See the Pen abdwYaJ?editors=0110 by Mamboleoo (@Mamboleoo) on CodePen

[ZachSaucier 7,068 Likes (Superhero)]

Hey Mark. You just need to give the ScrollTrigger a trigger and optionally a start and end value:

See the Pen GRovmpJ by GreenSock (@GreenSock) on CodePen

[iammarkmulvey 5 Likes (Newbie)]

You make everything so easy Zach!

 

Thanks again for the quick response.

[ZachSaucier 7,068 Likes (Superhero)]

GSAP makes things so easy - I'm just an interpreter  

[Aamir Mansuri 0 Likes (Newbie)]

On 6/27/2020 at 1:40 AM, ZachSaucier said:

Hey Mark. You just need to give the ScrollTrigger a trigger and optionally a start and end value:

 

 

 

is it possible to do in gsap 2?  I tried but it's not work.

 

 

Here is my code:

var controller = new ScrollMagic.Controller();
$(".indicatorScrl").each(function(){

    var indicatorIn = new TimelineMax();

    indicatorIn
    .to('progress', { value: 100, ease: 'none',  scrollTrigger: {trigger: "#indiScroll", scrub: 0.3 } })

    // Make Magic Scene
    var scene = new ScrollMagic.Scene({
        triggerElement: this
    })

    .addIndicators()
    .setTween(indicatorIn).addTo(controller)
});

 

JS I  have used 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>

 

[ZachSaucier 7,068 Likes (Superhero)]

Hey @Aamir Mansuri and welcome to the GreenSock forums. We highly recommend using GSAP 3 and ScrollTrigger over older versions of GSAP and ScrollMagic. Why would you not use them?

 

ScrollMagic is not a GreenSock product and we don't support it here. However, I will say that the version of TweenMax that you're loading is really old so maybe using the latest version (2.1.3) would help?

[Aamir Mansuri 0 Likes (Newbie)]

19 hours ago, ZachSaucier said:

Hey @Aamir Mansuri and welcome to the GreenSock forums. We highly recommend using GSAP 3 and ScrollTrigger over older versions of GSAP and ScrollMagic. Why would you not use them?

 

ScrollMagic is not a GreenSock product and we don't support it here. However, I will say that the version of TweenMax that you're loading is really old so maybe using the latest version (2.1.3) would help?

 

Thanks for quick replay, 

 

 

 I have used the updated version of TweenMax.min.js but still this function is not working for me.

 

Getting this error: Uncaught ReferenceError: gsap is not defined

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

[ZachSaucier 7,068 Likes (Superhero)]

Again, we highly recommend that you upgrade to GSAP 3 and use ScrollTrigger. Then create a minimal demo that we can edit 

Then we can help you   

[Aamir Mansuri 0 Likes (Newbie)]

if i use GSAP 3 my other animation are stopped working. 

 

Here is my pen.

See the Pen eYJwjKZ by aamirmansuri007 (@aamirmansuri007) on CodePen

 

Thanks.

[ZachSaucier 7,068 Likes (Superhero)]

ScrollMagic has some trouble with GSAP 3. Like I said, we don't support ScrollMagic. Please recreate the same thing using ScrollTrigger (it's smaller, simpler, and more powerful).

[PointC 14,017 Likes (Superhero)]

Your pen works fine if you load GSAP 3.4.2. You're still loading TweenMax so you get errors of gsap is undefined. You'll also need to load ScrollTrigger.

 

I'm not sure why you're using both ScrollMagic and ScrollTrigger here, but I'd take Zach's advice and convert the whole thing to ScrollTrigger. I think you'll find it easier to use and has more features.