Leaderboard

Hi @Deepak Oberoi Draggable uses simple axis-aligned bounding box (AABB) collision detection. It can only detect overlap between 2 boxes, like what is returned by Element.getBoundingClientRect(). For other shapes, you will need to handle the collision detection yourself, like inside a liveSnap points function. https://greensock.com/docs/Utilities/Draggable#snapping For collision detection between circles, lines, and convex polygons, you can use the Separating Axis Theorem (SAT). For concave polygons, you will have to split them up into smaller, convex shapes. Here are 2 libraries that can help with that. https://github.com/Sinova/Collisions https://github.com/jriecken/sat-js And here's a thread about using SAT with Draggable. I know that my demo doesn't work as intended in that thread, but I mentioned beforehand that it probably won't because you need to do collision detection while you're dragging.

I don't know what you're doing, but those aren't calls made by GSAP. Those are scripts for the forum.

That is happening because your child timelines are paused so when you add them into the parent timeline, parent timeline starts playing but tweens remain paused. That's why when you click on 'play 1 and 2' nothing happens. When you click on 'play 1' and 'play 2' they jump because your parent timeline is complete and playhead of child timelines is tied to parent timeline. I doubt you can play child timelines independently, though you can tween them.

Hm, I don't have time to rewrite all the code and troubleshoot at the moment, but I'll offer a few things: There's no need for killAll(), especially in every scroll event. It looks like you're re-creating your entire tween on every single scroll event (extremely inefficient). I'd add some conditional logic that only recreates the tween when absolutely necessary. Is there a particular reason you don't want to just chain all 3 bezier animations together and then adjust the progress value of that one timeline? I didn't quite understand why you felt the need to be juggling between them, killing/recreating so often, etc. Seems cleaner to just create them all once, drop 'em into a TimelineLite and scrub the progress value accordingly. But maybe I'm missing something. If your goal is to drop all the animations from a timeline, you can use timeline.clear() instead of the brute-force, global TweenMax.killAll(). I hope that at least nudges you in the right direction

I just tested this in IE11 and didn't see any problems. The set() seemed fine to me. If you want to experiment a bit, you could always remove the sets and use fromTo() tweens to see if you see any difference in IE11. Happy tweening.

Weird. I don't know what would cause that, but you can see that it wasn't using your local file. It's using TweenMax.min.js from cdnjs.

@Shaun Gorneau Thanks a ton, got it working myself! https://codepen.io/chrissnoek/pen/RJrdzo

Actually, a script tag does the same thing as eval, and can be just as harmful. That's why browsers won't let you do something like this to create a script. someElement.innerHTML = '<script>alert("HACKED!")</script>'; // FAIL That, and the fact that the parser doesn't know where the script tag ends. See how it's done to create a CDN fallback. window.TweenMax || document.write('<script src="gsap/TweenMax.min.js">\x3C/script>')

import { TweenLite, TimelineMax, Linear, Back, Sine } from 'gsap/all'; // vs import { TweenLite, TimelineMax, Linear, Back, Sine } from 'gsap'; Here's the result of that. "gsap" is the brown/tan bundle, and "gsap/all" is the blue bundle. Not only is "gsap/all" smaller in size, but everything it imports will be hoisted, making it load it faster. Notice how "node_modules" only appears once for "gsap/all". It appears several times for "gsap". You can import like this if you want to, just don't expect the file size to be different. It doesn't matter what you do, the output will always be TweenMax with all it's plugins. // Exports everything in TweenMax import "gsap"; // Exports everything in TweenMax import TweenMax from "gsap"; // Exports everything in TweenMax import { TweenMax } from "gsap"; // Exports everything in TweenMax import TweenMax from "gsap/TweenMax"; // Exports everything in TweenMax import { TweenMax } from "gsap/TweenMax"; // Exports everything in TweenMax import { TweenLite, TimelineMax, Linear, Back, Sine } from 'gsap'; // Exports everything in TweenMax import { TweenLite, TimelineMax, Linear, Back, Sine } from 'gsap/TweenMax'; Let's just say that those methods are deprecated. This is now the recommended way to import a la carte. import { TweenMax, TimelineMax, AttrPlugin, CSSPlugin } from "gsap/all"; // Ensure modules don't get dropped by tree-shaking const activated = [ TweenMax, TimelineMax, AttrPlugin, CSSPlugin ];

If the label is on the master timeline, it's quite simple. Use an onComplete callback and the tweenFromTo() method to tween the timeline to that label after the repeats are done. Here's the same demo from above with that addition. That works if the label is on the master timeline. The way you have it structured in your demo code, the label is on a nested timeline. That's a bit trickier. I've actually never tried that and had to look it up. This thread seems to cover it nicely. My recommendation would be to make it easy on yourself and add the label to the master timeline. You could move those two panel opacity tweens in part 6 to a new part 7 so a label would fit nicely between them on the master. Hopefully that helps. Happy tweening.

@djohnson we can't test firebase serve as you have to be logged in for that. I just tried the latest version of GSAP (2.0.1) with Angular 6, and it worked fine... that is until I created a production build. I'm pretty sure that's a problem with the Angular CLI. It's doing weird stuff, like not even executing some code. If you search around, you'll find that there are a lot of issues with the latest version of the Angular CLI. If all else fails, just add your scripts to angular.json file. https://github.com/angular/angular-cli/wiki/stories-global-scripts If Angular is running is slow, it's probably because of how change detection is triggered inside a zone. When an animation is playing, Angular will call ngAfterViewChecked on your components, even if you haven't implemented that method. It does that on every animation frame, which might be happening 60 times/second. That's a lot of extra work! To prevent Angular from doing that, you need to add this line of code in polyfills.ts, right before the zone.js import. // Allow animation frames to run outside zone to improve performance __Zone_disable_requestAnimationFrame = true; /*************************************************************************************************** * Zone JS is required by Angular itself. */ import 'zone.js/dist/zone'; // Included with Angular CLI.

@Friebel I read your post, but I don't know what you're doing. Check out this example repo. It will generate a visual comparison of the two bundles. https://github.com/OSUblake/gsap-treeshaking npm install npm run build Using "gsap" Parsed size: 118.73 KB Gzipped size: 38.19 KB Using "gsap/all" Parsed size: 55.46 KB Gzipped size: 16.63 KB It could be even smaller, but the unused eases aren't being dropped. Maybe in the next version. @Gordon Freeman you may want to have a look at that repo too. To install bonus plugins like the MorphSVGPlugin, look at the folder you download from your account. The latest version finally has a package.json file, but it's still not ideal. Copy the files in the bonus-files-for-npm-users folder to the esm folder, and then uncomment this in the all.js file. /* import DrawSVGPlugin from "./DrawSVGPlugin.js"; import MorphSVGPlugin from "./MorphSVGPlugin.js"; import Physics2DPlugin from "./Physics2DPlugin.js"; import PhysicsPropsPlugin from "./PhysicsPropsPlugin.js"; import ScrambleTextPlugin from "./ScrambleTextPlugin.js"; import ThrowPropsPlugin from "./ThrowPropsPlugin.js"; import GSDevTools from "./GSDevTools.js"; import SplitText from "./SplitText.js"; import CustomBounce from "./CustomBounce.js"; import CustomEase from "./CustomEase.js"; import CustomWiggle from "./CustomWiggle.js"; export { DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, PhysicsPropsPlugin, ScrambleTextPlugin, ThrowPropsPlugin, GSDevTools, SplitText, CustomBounce, CustomEase, CustomWiggle } */ Now install that esm folder in your project. DO NOT INSTALL GSAP FROM NPM!!! How to install from a folder or other location https://docs.npmjs.com/cli/install Or you can create a symlink, and keep reusing the same folder for other projects. https://docs.npmjs.com/cli/link Now import from there, and you should be good. import { TweenMax, TimelineMax, AttrPlugin, CSSPlugin, MorphSVGPlugin } from "gsap/all"; // Ensure modules don't get dropped by tree-shaking const activated = [ TweenMax, TimelineMax, AttrPlugin, CSSPlugin, MorphSVGPlugin ];

Hi @scrpt, there a few ways you could handle this. Here is a pen showing one way ... the comments should explain it. Let me know if you have any questions! Happy tweening.

We love answering GSAP-related questions, but in order to get you a fast, accurate answer it is very important that you provide code we can test. Your problem may be related to CSS, HTML, a framework or JavaScript (or a mixture of those). A tiny code snippet (outside of its context), is difficult to diagnose. We need code that we can dig into and play with...quickly. We are big fans of CodePen.io, an online editor that allows you to create (and share) demos that are easy to inspect and edit. They make isolating issues much faster. Watch How it is Done: GSAP 3 Starter Pen: https://codepen.io/GreenSock/pen/VoZNxw To create a demo with all of GSAP including every bonus plugin: Click the Edit on CodePen button Click the Fork button to create your own copy (lower right corner). Add the minimal amount of HTML, CSS and JavaScript necessary to replicate your issue. Save the pen Paste the URL of your pen (demo) into a new forum topic with a short description of the problem. Include OS, browser and device information where applicable. CodePen is completely free to use and you don't even have to sign up or log in. We do recommend creating a free account as it will allow you to save and organize your pens and much more. Using a framework/library like React, Vue, Next, etc.? CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package: React (please read this article!) Next Svelte Sveltekit Vue Nuxt Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. Helpful tips: Isolate the problem Create a demo from scratch. Don't copy your whole project Make demos focused and concise Use stand-ins for content like simple colored <div> elements The special "trial versions" of the bonus plugins also work on the following domains: codesandbox.io, stackblitz.com, jsfiddle.net Use the pen below to easily copy and paste the urls to the bonus plugins: Each time you reply to a thread in the forums, please make sure to use the "Fork" button in the bottom right of the CodePen window so that you don't keep overwriting the original CodePen with new changes. This will help context not to be lost in our forums when other people view the thread later. It allows us to better keep track of how your demo is being changed. Thanks for your cooperation. We look forward to helping you.

I'm not 100% sure, but I think you're asking about the parallax effect on scroll? If that's the case, we've had several discussions about it. Check out these threads for more info and ideas. Those are just a few of the discussions. Please use the search feature and look for parallax and you'll find several more threads. Hopefully that helps. Happy tweening.

Hi @j.burleigh1 Welcome to the forum. I was gonna suggest the same thing about one timeline and linking the progress() to scroll. Here's a quick fork of your demo with one timeline. Hopefully that helps a bit. Happy tweening and thank you for being a Club GreenSock member.

There isn't a built-in way to do that sort of thing, no. But you can check the TweenLite.ticker.frame and TweenLite.ticker.time to figure out the FPS, but be careful about doing that too early because every site has a huge influx of CPU activity initially (when loading/rendering the page). Like TweenLite.ticker.frame / TweenLite.ticker.time. Just beware that the FPS is also dependent on the screen refresh rate on the actual device. So, for example, if someone's screen is running at 30hz, you're not gonna get 60FPS no matter what - it'll be closer to 30fps even if the CPU is under almost zero load. So don't just assume that 30fps is "bad" or laggy or something. Does that help?

I'm a little fuzzy on exactly what you expect here (what does "fix" mean?). By default, smoothOrigin on SVG elements is true, so to accommodate for the shifting that's necessary, GSAP tracks it in an "xOffset" and "yOffset" value in the _gsTransform (purposely undocumented). This is a very unusual edge case where it seems like you're wanting smoothOrigin sometimes, and then you want to omit that other times. Hm. Here's one way you could just offset the x and y values based on the xOffset and yOffset: Is that what you wanted?

@OSUblake Just see your response is targeting me, sorry for reacting this late. And with my just renewed knowledge I now what you mean now I wasn't aware that for treeshaking to work we need to set { modules: false } on the babel settings, just to only transpile all innercode to es5 and leave the module-structure/definitions the es6-way. Never knew this before. I'm now having this for presets in .babelrc, keeping the es6 modulestructure intact, and transpiling all code inside to es5, so Webpack can still play with shaking the trees, while babel transpiled the inner goodies: "presets": [ ["env", { "modules": false }], ], @einomi If you use webpack and want to keep es5 output like me, maybe you could stick to using babel in your setup to transpile. Then those es6 const's and stuff don't matter anymore and both IE and uglifyJs are happy. Here it runs fine now, except for a strange treeshaking thing I'm facing now causing filesize to become a lot bigger using from 'gsap/all' instead of from 'gsap'. But that's something else, although as it seems very much babel-related. see other thread here:

mmm... it's starting to look like there is something not right on my babel-loader config. Just letting you know in the meantime I'm googling and just stumbled upon this thread: https://stackoverflow.com/questions/47663486/webpack-3-babel-and-tree-shaking-not-working explaining what might be the solution to the problem I'm facing: babel is transpiling everything to ES5, but Webpack only does treeshaking on ES6 modules, so it looks like I need to set { modules: false } on babel-loader in order to output ES6 modules with ES5 content, so Webpack still sees ES6-modules and can use that to shake the trees. If that's the case, so treeshaking isn't working now, probably a lot of my other projects will become a lot smaller too... that would be a nice plus side effect... But let's first find out if this is really the case... ** to be continued **

You'd want to use the position parameter to start the second stagger earlier. As you have it now all the elements will stagger in their opacity and then all will stagger out. Using the position parameter, you can make it work correctly. Here's a basic example. Here's some more info about the position parameter. https://greensock.com/position-parameter Happy tweening.

OK, great! I have updated the embedded pen (I somehow forked multiple times and it got messed up ... should have had coffee before I started ) But, I'm glad you got it figured out!

Hi @sirhc, it's because your restarting the same timelines with values that were calculated at the start. To introduce new values, you can use a function based value for `x` or you can just make these Tweens within the `onclick` handler rather than Timelines. Edit: CodePen fixed

@OSUblake Thanks! the thread is indeed very useful

Hi @GordonFreeman I tried to get your attention in another thread, but maybe you didn't get the notification. Script tags do that for a reason, but why are you even messing with a script tag and eval? That's a huge red flag. You should be using the output of webpack just like a normal JavaScript file. <script src="dist/bundle.js"></script>

Makes lots of sense. Everything works like a charm. Thanks again!

Oh, you'd want to use the repeat property if you want to see the timeline multiple times. You just have to be mindful of how many times you wanted to see it. Say you wanted 5 total views counting the onComplete that tweens to the 'stop' label. In that case, you'd set the repeats to 3. You'd have the original iteration, 3 repeats and the onComplete tweenFromTo() as the 5th play. (The tweenFromTo() isn't technically a repeat, but we're calling it one in this scenario) Does that make sense?

I'm not sure I follow the question. You want the entire timeline to play once and then play from the start to the end label, right? Then you wouldn't even need to add a repeat count. It'll just call the onComplete when it's done and the tweenFromTo() will be the second play in this case. You have to remember that repeats are after the first iteration. So, if you tell a timeline to repeat 5 times, you'll actually see 6 iterations. The original play() and the 5 repeats. Does that make sense?

Hey Shaun, The code worked perfectly in my example, thank you for your help!

@Friebel what problems were you having? Can you make a simple repo of what you are doing? There really should be no reason to do that. Letting Babel handle the module transformation can cause problems. I would set Babel's es2015 modules to false and let webpack handle it. https://stackoverflow.com/a/41790154/2760155

@Friebel you're obviously not doing tree shaking. gsap/all exports everything, so it will be bigger during development. // This will be the same size as all previous versions of gsap import { TweenMax } from "gsap/TweenMax"; // Same thing here. No difference from previous versions of gsap import "gsap"; // TweenMax has no dependencies here besides TweenLite, so a huge difference import { TweenMax } from "gsap/all";

@GreenSock I upgraded to gsap 2.0.1 and changed the webpack and babel-configuration to transpile gsap. I thought it was a no go to transpile modules inside the node_modules folder, but maybe I was wrong or this is changing and the more es6, the better! Now everything works fine! I didn't test any previous versions anymore, but 2.0.1 is working fine when using babel transpiling. For other people having this problem, this is what I changed in my webpack config file: Instead of excluding the node_modules folder in the babel-loader, I now replace the exclude rule by an include-rule including both my source-folder as well as the gsap folder in node_modules, like this (change your sourcepath in case you're not working with src or have your webpack configfiles in a subfolder): const srcPath = path.resolve(__dirname, 'src'); // ... module: { rules: [ { test: /\.(js|jsx)$/, include: [ srcPath, path.resolve(__dirname, 'node_modules/gsap'), ], loader: 'babel-loader', query: { presets: ['env'] }, }, // ... Next to this I also needed to get rid of an exclude rule inside the .babelrc file that was blocking the node_modules folder from being transpiled, so don't forget to check that file too! Otherwise above change won't work.

Maybe this demo can help. It's an answer to another forum question, but it shows a simple master timeline. It also shows how to use the position parameter when you add the nested timelines to the master. Happy tweening.

Hi @Susenbeth Welcome to the GreenSock forum. I'm not sure I understand what you're asking. Do you want all the timelines to repeat or just one? I didn't see any repeats set in the vars for any of the timelines. You'd do that like this: var t1 = new TimelineMax({repeat:10}); // use -1 if you want it repeat forever I'm not sure what you need to happen as I see a lot of delays on the timelines. You could probably make one timeline or maybe create them in functions and return them to a master timeline. This article by @Carl should be helpful. https://css-tricks.com/writing-smarter-animation-code/ I also couldn't see any of your .pngs in your demo as you're linking to local files. If you need more help, additional details about what you want to happen would be great. Hopefully that info helps a bit. Happy tweening.

Well, I wouldn't say there's any "magic" involved, no, but CSSPlugin doesn't use _addTween() like you do in your plugin. It does set the value regardless of if there's a change.

Hi @ckka Welcome to the GreenSock forum. Are you asking how to create the logic for that sort? That would fall beyond the scope of the GreenSock forum as we try to keep the support on GSAP. If you have questions about the actual animations, we'd be happy to assist, but I think your question might be better directed at the Joomla forum. https://forum.joomla.org/ I have no experience with Joomla, but to provide a basic answer to your question, I'd say you should be able to sort by tag or category. It's just a matter of grabbing the right data to filter. If you have GSAP related questions or get stuck while coding the animations, we'll be happy to help. Good luck with your project. Happy tweening.