Jump to content

Search the Community

Showing results for tags 'requirejs'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 8 results

  1. Zuriel

    Angular2 Split Text

    Anyone have any luck with angular2 and split text. when i try and run it on a component thats part of a template it bombs out complaining about SplitText .length which to me just says its not getting the template from Angular?? export class AboutBgComponent implements AfterViewInit { private spicy = "this is my text"; private mySplitText:any; constructor() {} ngAfterViewInit() { this.mySplitText = new SplitText(this.spicy, {type:"words"}); console.log(this.spicy) } } tried in the constructor, tried after init as well as a bunch of other things not included in this demo. So anyone who can spin up an angular2 app and let me know?
  2. Hi, In our magento project, we need to add scroll magic animations. we used the following code to include libraries: requirejs-config.js: var config = { paths: { "TweenMax" : "js/TweenMax.min", "scrollMagic" : "js/ScrollMagic", "animation.gsap" : "js/plugins/animation.gsap" }, deps: [ ], "shim": { /*"wc_owlCorousel" : { "deps" : ['jquery'] }*/ "TweenMax" : { exports: 'TweenMax', }, "scrollMagic" : { exports: 'scrollMagic', }, "animation.gsap" : { exports: 'animation.gsap', }, } }; And in library files placed in the respective folders. Then, we added this code in our html page: requirejs(['jquery','scrollMagic'], function ($,ScrollMagic) { ............... ................. But when running we get this error: (ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js. We tried some alternatives such as : requirejs(['jquery','scrollMagic', 'TweenMax'], function ($,ScrollMagic, TweenMax) { .......................... } But nothing is woked. Please let me know how to include scroll magic and green sock in magento (or in require js)
  3. 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!
  4. TL;DR I upgraded our project to use 1.19.0 after using 1.18.2 and requirejs couldn't find TweenLite unless I defined it explicitly in the require config paths object. Is it the expected behavior? We do amd with requirejs. My GSAP section in the paths object looks like this (there is also a base url defined of our external libs server): paths: { // ... TweenMax: {min: serviceURL('tweenmax/1.19.0/minified/TweenMax.min'), source: serviceURL('tweenmax/1.19.0/uncompressed/TweenMax')}, TimelineMax: {min: serviceURL('tweenmax/1.19.0/minified/TweenMax.min'), source: serviceURL('tweenmax/1.19.0/uncompressed/TweenMax')}, ScrollToPlugin: {min: serviceURL('tweenmax/1.19.0/minified/plugins/ScrollToPlugin.min'), source: serviceURL('tweenmax/1.19.0/uncompressed/plugins/ScrollToPlugin')}, DrawSVGPlugin: {min: serviceURL('tweenmax/1.19.0/minified/plugins/DrawSVGPlugin.min'), source: serviceURL('tweenmax/1.19.0/uncompressed/plugins/DrawSVGPlugin')}, // ... } This setup worked for a long time now without changing anything but version numbers up until 1.18.2. After changing the paths to 1.19.0 I got a console error by reuirejs saying it got 404 on TweenLite because it tried to load it from localhost - require.min.js:34 GET http://localhost/TweenLite.js The way to overcome it was to add a line in paths for TweenLite too TweenLite: {min: serviceURL('tweenmax/1.19.0/minified/TweenMax.min'), source: serviceURL('tweenmax/1.19.0/uncompressed/TweenMax')}, Is it an expected behavior? Is it a bug? Am I missing something in the require config? Thanks. Tom.
  5. Hi everyone, I use TweenMax and Draggable (GSAP 1.15.0) with RequireJS for a project. My require config is : require.config({ paths: { TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax', Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable', }, shim: { Draggable: { deps: ['TweenMax'] } } }); It works like expected. But i have problem during the minification step with the r.js tool. The compiler looks for the TweenLite file, but doesn't find it. I have found in this thread http://greensock.com/forums/topic/7213-using-timelinelite-and-tweenlite-with-requirejs/ that I can set the paths like this : require.config({ paths: { TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax', Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable', TweenLite: 'TweenMax' } }); But now the error is that the TweenMax file is not found. If I do directly require.config({ paths: { TweenMax: '../../local/js-vendor/gsap/src/uncompressed/TweenMax', Draggable: '../../local/js-vendor/gsap/src/uncompressed/utils/Draggable', TweenLite: '../../local/js-vendor/gsap/src/uncompressed/TweenLite' } }); it works as expected. But TweenLite is packaged two times (inside TweenMax + TweenLite directly) A workaround is exclude TweenLite with the compiler options. requirejs: { compile: { options: { paths:{ 'TweenLite':'empty:' } } } } I don’t know if there is a better way to fix the problem, but for the moment it works for me. Hope it helps. And I’m all ears if someone has a best solution.
  6. I'm having fun getting Draggable and TweenMax working with RequireJS (as part of a Durandal project). I think there might be a bug in Draggable, it looks to me like it is missing a dependency definition for CSSPlugin. The define for it looks like this: _gsScope._gsDefine("utils.Draggable", ["events.EventDispatcher","TweenLite"], function(EventDispatcher, TweenLite) { On line 1757 CSSPlugin gets referenced as a global object: setRatio:(_isOldIE ? function() { TweenLite.set(target, tempVars); } : CSSPlugin._internals.setTransformRatio || CSSPlugin._internals.set3DTransformRatio) This line fails with an exception when I am loading Draggable via RequireJS. I have fixed it by changing the define call to: _gsScope._gsDefine("utils.Draggable", ["events.EventDispatcher","TweenLite", "plugins.CSSPlugin"], function(EventDispatcher, TweenLite, CSSPlugin) { Does this look like a valid fix or am I missing some other reason why this call to CSSPlugin as a global object should be like it is ?
  7. Thanks to Greensock for helping me find my way on Twitter. I thought I'd share my solution for any other people out there that are searching for a configuration of Require + Backbone through external modules & shim's like I was: require.config({ paths: { 'jquery': 'libs/jquery-2.1.1', 'underscore': 'libs/underscore', 'backbone': 'libs/backbone', 'TweenLite': 'libs/greensock/TweenLite', 'CSSPlugin': 'libs/greensock/plugins/CSSPlugin', 'EasePack': 'libs/greensock/easing/EasePack' }, shim: { 'underscore': { exports: '_' }, 'backbone': { deps: [ 'underscore', 'jquery' ], exports: 'Backbone' }, 'TweenLite': { exports: 'TweenLite' } } }); require([ 'backbone', 'app/app', 'TweenLite', 'CSSPlugin', 'EasePack' ], function(Backbone, App, TweenLite) { 'use strict'; App.initialize(); });
  8. Hi I love GreenSock tools, they're a first class complement to HTML5. I've just renewed my subscription and am in the process of understanding how TweenMax works with RequireJS. Through perseverance I've got TweenMax working, but I'm a bit unsure if my workflow is correct. I've read various posts that seem to confuse my understanding, perhaps as they may be out of date. It would be great if Greensock or community could post an up-to-date tutorial on how TweenMax and it's Plugins work with RequireJS and some clear examples. What I find confusing is based on various areas (and the following questions are based from other posts on sites/forums perhaps now out of date). So with TweenMax v 1.11.6 and RequireJS v 2.1.11 (latest downloads at the time of writing): Do we still need a GreensockAMDPath? Why define window.GreenSockGlobals? (Is this best practice with RequireJS). My understanding of RequireJS is that we benefit from avoiding the global namespace. Are we still expected to use a 'shim' in the RequireJS config object to get TweenMax working? How are TweenMax plug-ins added with RequireJS. Is the latest TweenMax AMD? I have a feeling that there could be quite a few others asking similar questions. If anyone in the GreenSock community can help then I (and am sure others) look forward to reading your posts. Many thanks in advance for any help / examples...