Jump to content
Search Community

GSAP and scrollmagic confusion

Bizzaro test
Moderator Tag

Go to solution Solved by chalkytannins,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

  • Solution

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

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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