Jump to content
GreenSock

iammarkmulvey

Scroll indicator for a specific div rather than entire page

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

You make everything so easy Zach!

 

Thanks again for the quick response.

Link to comment
Share on other sites

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

  • Like 1
  • Haha 1
Link to comment
Share on other sites

  • 1 month later...
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>

 

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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 errorUncaught ReferenceError: gsap is not defined

 

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

Link to comment
Share on other sites

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 :)  

Link to comment
Share on other sites

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).

  • Like 2
Link to comment
Share on other sites

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. :)

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×