Jump to content
Search Community

Scroll indicator for a specific div rather than entire page

iammarkmulvey test
Moderator Tag

Recommended Posts

  • 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

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.
×
×
  • Create New...