Leaderboard

Hey Jack, thanks a lot for your effort! Here is the the chain-of-issues - use create react app to create an App (gsap-test) - cd gsap-test - npm install gsap - npm run eject (and confirm) // ejecting is optional and shouldn't make things different edit the App.js 1. ES6 We are using imports as normal: import TweenMax from 'gsap/TweenMax' import * as Ease from 'gsap/EasePack' Everything runs fine - except npm run build which fails because of: as you are a smart developer, you are digging around the gsap Forum and learn, that you have to use the umd-version - all right, let's do that: 2. UMD Now we are importing the UMD versions: import * as TweenMax from 'gsap/umd/TweenMax' import * as Ease from 'gsap/umd/EasePack' Now everything is working. Also the build runs fine. Great. Let's add the MorphSVGPlugin, because we want to use it. 3. Plugin When running 'npm start' now, compile fails because eslint is too strict (no-undef): mmh...we are clever enough to know, how to ease eslint-rules. Let's add this entry to our package.json: 'npm start' runs and compiles. Great! Let's look at the browser: Wuat? As I console.logged the imported TweenMax, this is what I can see in the browser console: It's an empty object! The "not-so-obvious" solution was to change the order of the imports: Now everything is working. Phew. As you can see, although it's not classic bug, it's very hard to get along, if one issue creates another one. So for me the source of all the problem was the failed build when using the es6-modules (TweenLite.js:1966), because it lead me on the bumpy UMD road, where live is hard and dangerous. I hope, these details help you

Sorry, @erikb, that information is not available. You're correct. It should be relatively easy, though, to distinguish by structuring your function calls accordingly. You could even create a function to help you: function createListener(func, priority, scope) { TweenLite.ticker.addEventListener("tick", function() { func.call(scope, priority); }, this, false, priority); } createListener(preComponentPaintCb, -100, this); function preComponentPaintCb(priority) { console.log("priority: ", priority); }

Right, invalidate() will force the tween to re-record the starting/ending values but it looks like the variable "s" in your case is plugged into the duration of the tween; you can update the duration anytime like: tweenInstance.duration(newDuration); Also, I wouldn't recommend calling kill() on a timeline if your plan is to restart() it. Perhaps you meant tl.clear() to empty it of all its child animations? Does that help?

What a quick answer, thanks so much @Sahil

Your logic was correct, but you were trying to animate element with id 'shape' but your svg has element with id 'from'.

Using invalidate method will cause GSAP to re-record the values. https://greensock.com/docs/TweenLite/invalidate()

I thought you figured it out. Here is fork of Blake's previous demo. Here I am calculating two lengths from where scan should start and end, it is being determined by how much your mouse has traveled. It works fine on curves and edges, except on sharp edges where angle is too small. Actually it works just fine if you set your goals realistically. If you want more control then you might want to go through Blake's second demo. Again to understand how everything works and how you can make changes as per your requirements, you will need to get through the fundamentals of how paths work and the code we have posted. @OSUblake Do I get the trophy?

@jonForum Happy to help! BTW what you are working on looks really cool.

It's very difficult to troubleshoot blind, but it kinda sounds like your build system (well, the minifier in particular) isn't set up to accommodate ES modules and you're not using the UMD version of GSAP. Have you tried importing from the gsap/umd directory instead of just gsap? I'm very confused, though, if you're saying that 1.20.6 also has the problem because that is UMD by default in the root directory. It'd be SUPER helpful if you could create a reduced test case and maybe post it as a github repo or something. That way we could reproduce (and troubleshoot) it on our end. Possible?

Just to clarify, do you need help triggering an animation when it scrolls into the viewport or help in constructing the animation? For scroll-triggered animation, check out the discussion and links here: If you need help with the animation it would be best if you could provide a simple demo that contains some of the imagery or something close to the html and javascript that you are using. From the example you posted it seems like a basic timeline with a few tweens to move things along the y-axis would suffice without a demo its really tough to know what you want to do, or what you have tried and hasn't worked.

Hey Guys, just updated to 2.0.0, also in 1.20.6 had this same problem... > react-scripts build Creating an optimized production build... Failed to compile. Failed to minify the code from this file: ./node_modules/gsap/TweenLite.js:1966 Read more here: http://bit.ly/2tRViJ9 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! endor@0.1.0 build: `react-scripts build` npm ERR! Exit status 1

Alright, folks, please update to version 2.0.1 (just published) and you should see the issues resolved It had to do with some older build systems not liking a line of ES6 code in TweenLite (yes, a single line). And the order of import thing required a tweak to the UMD version of TweenMax. My apologies for any headaches this caused. A special thanks to @bitmonkey for the detailed explanation as to how to reproduce the issue! Please let me know if that resolves things for everyone. I'm pretty sure it will.

I've added a minimal test repo at https://github.com/alexhillel/gsap-test-case - running node 10.3.0 and npm 6.1.0 on my Mac: npm install npm run production results in: ERROR Failed to compile with 1 errors 7:47:34 PM error /scripts/main.js from UglifyJs Name expected [./node_modules/gsap/TweenLite.js:1966,0][/scripts/main.js:2045,6] Asset Size Chunks Chunk Names /scripts/main.js 382 kB 0 [emitted] [big] /scripts/main npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! gsap-test-case@ production: `NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the gsap-test-case@ production script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/alexhillel/.npm/_logs/2018-05-30T18_47_34_790Z-debug.log

Very sorry to hear about all the hassles! I'm quite surprised, actually, as things seemed to work great in various build system setups right out of the box, including webpack. We gave several people advanced access to 2.0.0 and the results were fantastic. We typically heard that it worked better than ever, making things easier too. Obviously something is different in your scenario, so I'm eager to learn about the specifics. That's why I keep asking for a reduced test case that would allow me to reproduce the errors on my end, otherwise it's extremely difficult to troubleshoot. You really shouldn't have to use the UMD stuff unless your build system is pretty old and doesn't understand ES modules. I'm no expert, but from my understanding most modern build systems LOVE (even prefer) ES modules. I'm very confused by the whole "order of imports" thing too - this is the first I've heard of that. Again, I'm eager to figure out why that's happening for you. Is there any chance you could give me access to a github repo or something that'd allow me to reproduce the problem on my end? Again, I'm super eager to do whatever we can to solve things and make it easier to use. I feel terrible that 2.0.0 is causing headaches for you.

I've messed around the new package structure the last 2 hours and it nearly drove me mad. As much as I was looking forward to the 2.0.0 version as confused I am now. Maybe I am missing something obvious, but for me gsap as an npm package works totally different than all other kids on the block. I expect the following to work out of the box: import TweenMax from 'gsap/TweenMax' also when bundling the stuff with webpack etc. As I learned from the forum for gsap I have to use the UMD bundle for that import * as TweenMax from 'gsap/umd/TweenMax' Also hardly learned: The order of imports makes a huge difference. I was importing the MorphSVGPlugin (UMD Version) first, and afterwards TweenMax (also UMD) which leads to an empty object as imported module by webpack. So I have to import the umd-TweenMax before anything else. Don't get me wrong - I absolutely love GSAP, but the package structure makes things more complicated than expected. Why don't all other npm modules have this distinction (umd, esm etc.) ? Next: When using the bonus MorphSVGPlugin as UMD Version, e.g. create-react-app fails to compile because of their strict eslint rules (no-undef of 'define') ... as you can see it's an endless daisy-chain of hard to unravel things. It's no bug, but it seems way to complicated.

Thanks guys. I actually got it to work with .invalidate() method. I figured i didn't need the tl.add() function. I could easily control my tween which is an instance of TweenMax() with pause(), play(), restart() directly. so the .invalidate() method worked fine. And yes I initially tried this tweenInstance.duration(newDuration); but didn't work probably because I was applying the method to TimelineMax instead of TweenMax which is the actual instance of my tween. Thanks for the help

Nice work, @Sahil!

Would love to but I cannot, sorry. Too many plates spinning at the moment. Tap out.

Here's another way you can do it with an onRepeat: Happy tweening!

Welcome to the GreenSock forums! Thanks for the demo. The trick here is to invert the scaleX value on each repeat: var scale = 1; function flip(){ TweenLite.set('.cat-chased', { scaleX: scale *= -1 }) } Your flip() function wasn't being called because it was set to onComplete. Your tween that moved the cat horizontally was set to repeat infinitely (repeat:-1) so technically it would never complete. onRepeat fires after each iteration of the tween is done.

Thanks for the demo. It appears to me that the tweens are running as soon as the page loads. I made a slight change to make the tweens slower and added scaling: If you look at the pen in a larger browser window you will see that any element in the viewport animates in on page load... most likely due to the fact that it is above its respective trigger. I think with the opacity and slight y changes, it was just hard to tell it was happening on page load. It looks to me that things are working as they should. I don't really use ScrollMagic and its not one of GreenSock's products, so please keep in mind there is very little we can do to actually support it. Unfortunately it looks like the project has been abandoned for a few years now, but for more ScrollMagic help it might be worth filing an issue here: https://github.com/janpaepke/ScrollMagic/issues

I think the biggest issue is just that you're starting with something that fills the screen and scaling that 4x and animating it down. So let's say your screen is 1,000 by 1,000 - that means the browser is having to calculate 16,000,000 pixels initially, and gradually get down to 1,000,000. So even though you're scaling by 4, it's actually 16 times as many pixels. That's a lot of pixels! You could try setting will-change: transform in your CSS for the animating element, but be careful: https://greensock.com/will-change You could also make things more efficient by using a single tween instance and just reusing it (play() it to open, reverse() to close) and force it to render initially (before any clicks so that the start/end values are pre-recorded) like: But again, I think the biggest issue here is the amount of stress on the browser to do graphics rendering. Canvas would probably perform faster. For example, you could use PixiJS. But I realize that means rebuilding a lot which may not be fun. I wish there was a silver bullet that GSAP had that could magically save the browser from its graphics rendering load.

Here's a rough concept with just the GreenSock logo: You could easily apply the same concept to an image that's sitting on top of another image to create that gradated transition that moves with the mouse. As a performance consideration, I just create a single tween that moves the mask from left to right, and then tween that tween's progress value according to how far the mouse is across the whole image. So if it's in the middle, the progress would be 0.5, for example. Hope that helps!

Here's a somewhat related demo. Using a little brute force to prevent any overlapping. You could do the same thing. And no, you don't have to move an element to figure out if it's going to overlap. Rectangles are a very useful model. Just update your model until it isn't overlapping. var bounds = element.getBoundingClientRect(); var rect = { x: bounds.left, y: bounds.top, width: bounds.width, height: bounds.height };

There's a lot of HTML5 game engines like Phaser, Construct, PlayCanvas and Cocos, but I don't know how useful they would be for building a user interface. Like a lot of physics libraries, SAT.js does not do anything visually. It just calculates stuff for you. You have to wire it up to whatever you're using. Using Draggable + SAT.js like you described. It will move the draggable off of whatever item it does a collision check against, but there's a problem, just like I described in my previous post. When your draggable is moved off an item, it might be pushed onto another item. That item might have already been checked for collisions, or it might push your draggable back to the item it was just moved from. You can run through the collision detection process multiple times and hope that it will settle in a place where it doesn't overlap, but there are no guarantees without adding more logic to the process.

humm, well i think it working now . I had to re-code my logic with a specific ticker for the mouse. and a also change some property your use by alpha,beta,delta,meta it more easy to understand for me. they are float pixi point . And the ticker perform compute those valur to set the pointer xy. This operation is only done once when the mouse ishovers a specific object. //$mouse.initialize() _mouse.prototype.initialize = function() { this.screenX = 1600, this.screenY = 900; this.icon = null; this.alpha = new PIXI.Point(0,0); // coor 1 this.beta = new PIXI.Point(0,0); // coor 2 this.moved = false; // mouse are moving indicator this.isDown = false; // mouse is down indicator this.tiker = this.create_tikers(); this.tiker.start(); this.sensiX = this.sensiY = 0.8; this.dirH = this.dirV = 0; // direction hori, vert (4,6,2,8) base 10 // check if started path selector this.tweenLastCase = null; this.startedPathCase = null; // easing mouse this.tween = new TweenLite(this.position, 0, { x:0, y:0, ease:Power4.easeOut, }); this.createSpriteMouse(); this.create_Listeners(); //this.debug(); // FIXME: REMOVE }; _mouse.prototype._mousemove = function(event){ // determine the direction this.dirH = event.movementX>0 && 6 || event.movementX<0 && 4 || 0; this.dirV = event.movementY>0 && 2 || event.movementY<0 && 8 || 0; this.alpha.x+=(event.movementX*this.sensiX); this.alpha.y+=(event.movementY*this.sensiY); this.inCase = $cases.onMouseMove(this.alpha.x,this.alpha.y, this.isDown); }; _mouse.prototype.create_tikers = function() { // Tikers for editor update (document Title, check scroll) return new PIXI.ticker.Ticker().add((delta) => { const metaX = (this.alpha.x/$camera.zoom.x)+$camera.position.x; // reel position (will compute zoom + camera..) const metaY = (this.alpha.y/$camera.zoom.y)+$camera.position.y; let deltaX,deltaY; // diff let ease = this.inCase && 0.2 || 0.8; if(this.inCase && this.focused !==this.inCase){ this.focused = this.inCase; this.alpha.x-=(metaX-this.inCase.x)/2; this.alpha.y-=(metaY-this.inCase.y)/2; }; this.beta.x += (this.alpha.x - this.beta.x) * ease; this.beta.y += (this.alpha.y - this.beta.y) * ease; this.tween.vars.x = this.beta.x; this.tween.vars.y = this.beta.y; this.tween.invalidate(); this.tween.play(0); // TODO: DELETE ME DEBUG ONLY document.title = ` alphaXY: [${~~this.alpha.x},${~~this.alpha.y}] || betaXY: [${~~this.beta.x},${~~this.beta.y}] || metaXY: [${~~metaX},${~~metaY}] || ` }); }; thanks @Sahil

Simple collision detection is using Draggable's hit test. What you're asking is much, MUCH more complicated than that. You would need to use something like the Separating Axis Theorem (SAT), and find the Minimum Translation Vector (MTV). The MTV is the shortest distance that the colliding object can be moved in order to no longer be colliding. And collision detection should be done while you're dragging. Trying to check for collisions on drag end will only make it more complicated. What happens if you drop a box in the middle of 4 other boxes, so that each edge is overlapping a different box? There might be not be a solution as the different boxes can keep pushing your draggable back and forth between each other, resulting in an infinite loop. You can read up on SAT in the links here. You will need Flash to view some of the demos in those links. https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection#Separating_Axis_Theorem SAT.js might be a good library to look at. If there's a collision, the response object will give you the MTV. https://github.com/jriecken/sat-js

@La Colonia @einomi @Friebel It's not an Uglify issue. It's the create-react-app being really strict. There is a line of ES6 code in TweenLite that is causing the build to bailout, and we'll get that fixed. Note that GSAP is now at version 2.0.0. There's also some new documentation about using npm. https://greensock.com/docs/NPMUsage To get the smallest build possible, I would follow this format for now. Import what you need from "gsap/all", and then put everything you import inside an array so it doesn't get dropped by tree shaking. import { TweenMax, TimelineMax, AttrPlugin, CSSPlugin, Bounce } from "gsap/all"; const activated = [ TweenMax, TimelineMax, AttrPlugin, CSSPlugin, Bounce ]; That will create a bundle that should look like this. Notice how it imports the TweenMaxBase module, which doesn't include any include plugins. @GreenSock this line of code needs to be changed again. And _gsScope should be defined just as window. Leaving _gsScope the way it is now will cause TweenLite to be excluded from the gsap bundle. It will still work, but it won't be optimized for production. export const {Ease, Linear, Power0, Power1, Power2, Power3, Power4, TweenPlugin} = _gsScope;

Hi @soupking I have a lot of posts about displacement mapping, mostly about PixiJS, but it works exactly the same in SVG. However, there is a bug in Chrome that prevents you from using an image for the map, so my demo here is broke. ? SVG documentation is really bad, but MDN does have a little info on <feDisplacementMap>. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDisplacementMap Look at the scale attribute. That controls how much displacement takes place.

Here's one by @Jonathan

Sorry, but I'm not following what you are trying to do. Are you trying to animate one css var based on the value of another css var? It would really help if you could put together a very basic codepen that shows how your elements are set up and how you expect them to animate. It doesn't have to be fancy, just the bare minimum of code to illustrate the issue. It would be of even greater help to see how you would do this in CSS even without animation... just so we have an idea of the end result you are trying to achieve (and if its even possible). Thanks! ps. In case you haven't seen it, this article shows how GSAP handles css var tweening: https://greensock.com/css-variables

You're actually doing it in exactly the correct way. It's much better to just do x:headerLeftWidth than to do: transform: "translateX(" + headerRightWidth + ")" ...because when you use the GSAP shortcuts like x, y, rotation, scaleX, scaleY, etc., it allows GSAP to avoid re-parsing the matrix from the browser, plus it's more accurate for any rotational values beyond 180 degrees (matrix decomposition is inherently ambiguous when it comes to rotational values). Happy tweening!

Hi and welcome to the GreenSock forums, You need to load TextPlugin separately. It is available on the cloudfare cdn https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/TextPlugin.min.js Here is a little demo http://codepen.io/GreenSock/pen/GqKrxG?editors=0010

In case anyone came across this forum post with a particular use case like mine (e.g. seeking to a label time with sped-up playback), I used a TweenMax.to() call instead of TimelineMax.tweenTo(): function quickSeekToTimeLabel( timeline, label, duration ) { TweenMax.to( timeline, duration || 0.2, {time: timeline.getLabelTime(label)}); }