GreenSock

Howdy @GNB - I'm not quite sure what you were expecting, but @OSUblake is a very busy guy who does a TON to help people in these forums out of the kindness of his heart. I'm sure he'll get back to you when he can, but the snarky comments may be counterproductive if your goal is to get a prompt and generous answer from him. To be clear, we really try to keep these forums focused on GSAP-specific questions. I wish we had the resources to offer free general consulting for web development and animation challenges. We moderators/admins have spent thousands upon thousands of hours setting aside time in our days to help folks with their GSAP-related questions. The Club GreenSock membership stuff is totally optional, and it's *NOT* for getting premium support or anything like that. We do our best to serve even non-paying users (which, quite frankly, is the VAST majority). Hopefully if you poke around, you'll see that the tone in these forums is remarkably friendly and helpful compared to most other forums, and that GSAP is pretty unique in terms of a long-term commitment to ongoing development and support of a project like this. Two things make that possible: Club GreenSock and the generous volunteer efforts of the moderators who burn hours of their day helping complete strangers because that's just the type of people they are (and I like to think it's partially due to their enthusiasm about GSAP). Anyway, welcome to the forums - we're glad you're here. I don't personally have time to build out a solution for you for the connecting lines, but hopefully Blake has something up his sleeve that he can share at some point (he's known for having all sorts of crazy experiments laying around).

I noticed several problems: Your background image URL in the CSS is pointing to simply "stingray.jpg" which is a relative link...there's no image at that URL so it's not loading. You're loading some kind of jQuery plugin but not jQuery, so there are errors about $ not being defined. Your tween is referencing ".animation", a class, but your element is using an ID instead, "#animation" (notice the "#" instead of "."). So basically GSAP can't find what you're trying to animate. Your code is inside a $().load(), but jQuery wasn't loaded so the whole thing was failing. Here's a fixed version that's just using a texture background that I had on hand: Does that help?

@OSUblake is right, and that's generally the approach I'd take. If you really want to just have one timeline that you're adding to multiple other timelines, there's a tricky way you could do it (but again, this generally isn't the ideal approach): You can pause that animation and literally control its playhead using other tweens. For example: var tl = new TimelineMax({paused:true}); tl.to(...); //add all your tweens ... var parent1 = new TimelineMax(); var parent2 = new TimelineMax(); parent1.add( tl.tweenFromTo(0, tl.duration()), 2); //add it at a time of 2 parent2.add( tl.tweenFromTo(0, tl.duration()), 4); //add it to the other parent at a time of 4 All the tweenFromTo() method does is spit back a TweenLite that animates that timeline's "time" accordingly, using a Linear.easeNone ease. So you're creating a tween for each "placement" into another timeline. Make sense? Again, I generally prefer Blake's approach. Just wanted to chime in with another answer to your direct question.

So sorry to hear about the trouble, @monty. 2 days? Yikes. That's frustrating. I feel terrible that you want to use GSAP but can't seem to get your project configured accordingly. Ugh. Please do let us know if/when you figure something out. Again, I really wish I had a great answer for you other than "I know for sure GSAP works with webpack/React." (which I realize is totally unhelpful to you right now). Hope to hear back from you soon.

Got it. Okay, the method signature is like: render( time:Number, suppressEvents:Boolean, force:Boolean ) time: time in seconds suppressEvents: if true, none of the callbacks will be fired (like onComplete, onUpdate, etc.) force: by default if you try to render() an animation at the same time twice, it'll skip the 2nd one. In other words, if the last render was at 2 seconds, and you ask it to render at 2 seconds again it'll be like "dude, I'm already rendered at that spot right now - I ain't gonna do all that work to re-render stuff again." but if something maybe changed the values outside of GSAP, you could force the render anyway by setting this value to true. Does that help?

Sorry about any confusion there, @Sahil, but we purposely didn't document the render() method because: There are VERY few cases where it'd be useful to the average developer. It could cause confusion because unlike progress()/time()/totalTime(), it doesn't alter the tween's startTime which means that on the very next "tick", it'll revert. For example, if a tween is at a time of 1, and then you render(2), it will immediately render as if it's at 2 seconds, but on the very next tick, it'll be at like 1.064 (or whatever, slightly later than 1). Some people may find that unintuitive even though it's the correct behavior. It is primarily intended for internal use. Was there something in particular you're trying to accomplish with render()? I bet we can provide a solution that uses a different method.

Hm, I don't see an obvious problem. You're using the latest version, right? And have you tried either of these import statements?: import {TweenMax} from "gsap/TweenMax.js"; // - OR - import TweenMax from "gsap"; Might be an issue with your config(?) I know that plenty of people are using GSAP in React, so I'm not quite sure what the issue is in your case.

Can you be a little more specific with your question? What exactly isn't the way you want it in that codepen?

Hm, interesting. Okay, I implemented a change that should resolve that - would you mind trying it and verifying that it works well for you? The uncompressed pre-release of TweenMax is at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

Awesome answer, @PointC! Above and beyond as usual. Just for kicks, here's a slightly different version that shows how you can use a single delayedCall() instance and simply restart() it in the makeItMorph() method. And it uses slightly different logic for the incrementing/decrementing...

I think this is more like what you wanted: The wrong syntax was used in the tween, and the SVG markup needed fixing (coordinates mostly), and there was a misspelled "visibility" in the CSS. Better?

Yep, that's because the color parsing is kinda heavy and doesn't need to be in TweenLite by default. But if CSSPlugin or ColorPropsPlugin is loaded, it should automagically add that capability to the core

Ah, okay. Sure, that's great. It'd be cool if you'd at least make a small note in your repo/readme/project that the GSAP tools are subject to their own license, otherwise if your project is listed as MIT and GSAP is just a dependency, they'll likely just assume that everything is MIT. See what I mean? But yeah, it's totally fine if you use GSAP as a dependency in general. Cheers!

Ha - "relatively painless". I guess it's relative indeed. Are you volunteering to convert the docs to Dash's format? I'd be open to sending you uncompiled stuff privately if you're interested.

Great catch, Blake! There was a one-letter typo Should be fixed in the upcoming release. There's the same method on CSSPlugin as well, so here's an updated TweenMax with that: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js The colorStringFilter() isn't generally intended for public use (which is why it's undocumented, but I exposed it on purpose as a static method just in case it came in handy down the road for someone and I could be like "just use this method..."), but it basically lets you pass in a 2-element array with a starting string and an ending string, and it'll search both of them for colors and harmonize their formatting (rgba() unless there's one that's hsl-based, in which case it'll switch to hsla()). That's useful for the core engine because the "animate any string" stuff taps into that. Otherwise, colors inside the strings like "red" or "#F00" or "#FF0000" wouldn't map to numbers that can be tweened. Make sense? If you're asking because you're working on the TypeScript definitions, I'm inclined to leave that colorStringFilter() undocumented. Feel free to push back if you think it's important to have in there.

We actually reached out to the Dash folks (or person) and were told that it's strictly a "the more people request it, the more likely it'll get done" thing over there, and he said GSAP wasn't toward the top of that list so it may never happen (well, unless a bunch of people start telling Dash they need GSAP in there). We're not really interested in open-sourcing all the guts of our docs at this point, no. Sorry. But if we did that, how exactly would that help? Would you be looking to program some kind of scraper to grab the necessary data and shove it into a Dash-specific format? Just curious.

Thanks for offering folks around here a free pro account, @mspanish. Very kind of you. And good luck with the product.

Ah, okay, I see what you're talking about. Yes, minimumMovement was designed for regular x/y drags (total pixel movement), not rotational dragging. However, I think it's a good idea to add that capability, so I'll do so in the upcoming release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js (uncompressed). That'll interpret minimumMovement as degrees when used with type:"rotation". That should make it very simple for you. In the mean time, if you want a solution with the current version, here's an example of using onPress and onDrag to limit dragging until a threshold of 45 degrees is reached: Does that help?

Hm, I didn't quite understand that last response - did you still have a question we could help with? Have you looked into ScrollMagic? I think that's built to handle things like this. We didn't author that tool, but it uses GSAP under the hood for the animations, so it should be relatively easy for you to tap into