[ScrollTrigger reverse animation using fromTo]

When up scrolling on the screen, the animation should be the reverse. 

 

This is the example: the example build in TimelineMax

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

 

 

I have update my code with GSAP3 but it's not working.

 

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

[Scroll indicator for a specific div rather than entire page]

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.

[Scroll indicator for a specific div rather than entire page]

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>

[Scroll indicator for a specific div rather than entire page]

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>