GSAP and scrollmagic confusion

[Bizzaro 0 Likes (Newbie)]

Ok so I am in the weeds on this. I'm not especially adept at javascript as is and this has pushed my limits. Also my normal web guy I ask questions to has gone MIA so I turn to those who know what they are doing.

 

I want to animate an image/div to slide onto my page upon scrolling down. Normally that wouldn't be an issue and I would just use animate.css BUT the content is in a scrolling div in the middle of the page which means NONE of the scrolling scripts out there will work (save for scroll magic apparently).

 

The problem is I can't make heads or tails of the available documentation between the two.

 

If you look at this page, you can see by the first arrow image what I hope to accomplish. Any help would be greatly appreciated. I've been trying to figure this issue out off and on for 3 months.

[chalkytannins 1 Likes (Newbie)]

I'm also a bumbling html noob and  found the documentation for scrollmagic is pretty poor, so i understand your pain.

 

Just make sure you're loading the iscroll stuff properly, should be something like this in the head

    <script src="js/lib/greensock/TweenMax.min.js"></script>
    <script src="js/lib/greensock/plugins/ScrollToPlugin.min.js"></script>
    <script src="js/lib/jquery.min.js"></script>
    <script src="js/lib/modernizr.custom.min.js"></script>
    <script src="js/lib/iscroll-probe.js"></script>
    <script src="scrollmagic/minified/ScrollMagic.min.js"></script>
    <script src="scrollmagic/minified/plugins/animation.gsap.min.js"></script>
    <script src="scrollmagic/minified/plugins/debug.addIndicators.min.js"></script>

then at the end before the closing body tag, 

<script>
var controller = new ScrollMagic.Controller({
            globalSceneOptions: {
                triggerHook: "onCenter"
            }
        });


new ScrollMagic.Scene({
                triggerElement: "#yourImageIDorContainer",
            })
            .setTween("#yourImageIDorContainer", 0.8, {
                x: "-500",
                ease: Power2.easeOut
            })
            .addTo(controller);

</script>

where triggerHook:onCenter means 50% of viewport height is the trigger to start animation. You can also use onEnter (very bottom of viewport) and onLeave (very top). You can also offset by number of pixels from onCenter/onLeave/onEnter with offset: value   eg.

new ScrollMagic.Scene({
                triggerElement: "#yourImageIDorContainer",
                offset: 150
            })
            .setTween("#yourImageIDorContainer", 0.8, {
                x: "-500",
                ease: Power2.easeOut
            })
            .addTo(controller);

.setTween is poorly documented, but it's a shorthand for TweenMax.to I believe. You can also declare your tween or timeline before hand as shown here:

 

http://scrollmagic.io/docs/animation.GSAP.html#Scene.setTween

 

I prefer doing it this way, so i can set the ending position of the element in the stylesheet and then TweenMax.from() rather than declaring the final position in the HTML, and setting the intial position in the stylesheet.

 

Cheers

[Bizzaro 0 Likes (Newbie)]

Can I use this to trigger an animation from something like the animate.css stylesheet or do I need to use a jquery animation of some sorts? (also is Modernizr necessary? I didn't see that listed anywhere.)

 

That stuff aside it's working kind of. The image starts halfway visible and reverses itself when I scroll back up but I am sure I can figure that stuff out.  The animation also negates the images being responsive too which kinda sucks.

 

However, this gets me on the right track. Thanks.

[chalkytannins 1 Likes (Newbie)]

It shouldn't negate them being responsive, they should still scale. 

 

You can add athe reverse:false flag 

var scene = new ScrollMagic.Scene({

        triggerHook: "onEnter",
        reverse: false
});

to prevent the animation from reversing when scrolling back up past the trigger point.

 

I believe you can call whatever functions you'd like in your scroll scene, but i haven't attempted that yet.

 

gluck

[Bizzaro 0 Likes (Newbie)]

I figured out the reverse thing but glad to know I did it right.

 

For some reason the images are being responsive now. (Not sure what changed honestly) However I can't figure out how to get the image to start outside the container: http://ovo.li/TcqI0O which I suspect is affecting why it won't stay centered when resizing the viewport - http://ovo.li/IXls8C