Jump to content


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

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:

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


    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>

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

<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 -->
	// 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
							name: "staggering"
						}) // add indicators (requires plugin)

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




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:




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.