Jump to content
Search Community

RequireJS - how do I get GSAP/ScrollMagic working with this

pixelspencil test
Moderator Tag

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

I've been working on an animation that works standalone as expected on scroll, it basically staggers on scroll so each path in my SVG animated in fast fade on scroll down, and fade out on scroll up.

I was looking at this article but cannot work out how to import the scripts and get it running via RequireJS like I can standalone:
https://github.com/janpaepke/ScrollMagic/issues/160#issuecomment-59058452

Here is my code example, it's WIP so the code is not absolutely correct yet.

 

require.config({
    baseUrl: '../ScrollMagic/js',
    paths: {
        TweenMax: '_dependent/greensock/TweenMax.min',
        TimelineMax: '_dependent/greensock/TweenMax.min',
        ScrollMagic: 'jquery.scrollmagic',
        ScrollScene: 'jquery.scrollmagic',
        "ScrollMagic.debug": 'jquery.scrollmagic.debug',
        jquery: '_dependent/jquery.min'
    }
});
require(['jquery', 'ScrollMagic', 'ScrollScene', 'ScrollMagic.debug'], function( $, ScrollMagic, ScrollScene, debug) {
    // do stuff
});

This is a cut down version of my working code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/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/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

<script>
	// init controller
				var controller = new ScrollMagic.Controller();
</script>

<div class="spacer s_viewport"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve">
						<g id="mainsvg">
							<path d="..." /> <!-- x27 of these pathes -->
						</g>
					</svg>
<script>
	// build tween
					var tween = TweenMax.staggerFromTo("path", 2, {
						opacity: 0
					}, {
						opacity: 1,
						ease: Back.easeOut
					}, 1);

					// build scene

					var scene = new ScrollMagic.Scene({
							triggerElement: "#mainsvg",
							duration: 200
						})
						.setTween(tween)
						.addIndicators({
							name: "staggering"
						}) // add indicators (requires plugin)
						.addTo(controller);
</script>

<div class="spacer s_viewport marker"></div>

Can anyone help please?

 

Thanks in advance!

Link to comment
Share on other sites

Hello pixelspencil and Welcome to the GreenSock Forum!

 

Others more familiar with RequireJS can possible have a proper answer for you.

 

But in the meantime here is a link to search query for RequireJS in the GSAP forum:

 

https://greensock.com/forums/index.php?app=core&module=search&do=search&fromMainBar=1&search_app=forums:forum:11&search_term=requirejs

 

Thank You! :)

  • Like 1
Link to comment
Share on other sites

It'd probably be very useful for you to create a reduced test case in codepen or something with just the bare minimum code to verify that TweenMax is getting in there properly. Here's a quick one I did:

 

http://codepen.io/GreenSock/pen/1c0566ae905c6e941ddb5f9038736c4f/?editors=0010

 

This definitely seems like more of a RequireJS question and unfortunately I'm not very familiar with it. 

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