Leaderboard

Hi @Saul Rosenbaum and welcome to the GreenSock Fourm! Don't be too hard on yourself. That dreaded /latest/ in the TweenMax JS script has taken a shark bite out of many. At least you were able to figure it out and get it all sorted! Happy Tweening!

I thinks it's good you posted your experience because this has been the issue in several threads. I just answered one a few days ago about an infinite tween in a timeline which works perfectly in 1.20.0 or later, but the OP was using the /latest/ so it wasn't working correctly. Sorry about your lousy morning, but thanks for pointing others to a solution. Happy tweening.

Hello Fellow GreenSockers, GreenSock has a new video: QuickTip: Try Club GreenSock bonus plugins for free See how you can try any Club GreenSock bonus plugin (MorphSVG, DrawSVG, ThrowProps, etc) for free in CodePen . This video tut was made by the Mighty @Carl, please take it away again Carl: If you haven't already done so, please check out and subscribe to the GreenSock Learning YouTube channel for more video tutorials. This way you don't miss out on new features and great learning videos from GreenSock. Happy Tweening!

For me the real takeaway from this is don't try to throw it together just before a meeting with a client. I run into dev problems too that sometimes stymie me for a ridiculous amount of time, only to turn out to be something obvious I missed right from the start. Though I guess in this case it was the cdn at fault not your work, things like this can still happen anytime, so it's a lot better to make sure it's ready to show first before setting a meeting.

HI and welcome to the GreenSock forums, Ugh, sounds like the wrong way to do start the day. We've all been there. Yeah, it looks like the problem is that cdnjs returns version 1.18.0 of TweenMax when you use /latest We reported the problem to them a while ago but they decided not to fix it. It is very frustrating. We stopped using /latest a while ago but we probably still have some demos that pull it in. Since function-based values weren't added until version 19 that's why things weren't working. Sorry to hear of the rough start, hope you got to at least enjoy some donuts and things go smoother from here.

Yes i was thinking the same thing.. ( but kept my big mouth to myself ), Why not just use TweenLite or TweenMax, instead of the jquery.gsap plugin as @GreenSock Jack suggested. It will allow you to have more control and less jquery conflict city

Hi @ceindeg Edge is being a bit fussy lately with masks. If you add a tiny rotation to the tween, it'll force Edge to redraw the mask. Something like this. tl.from(".mask-anim", 2, {ease: Power4.easeOut, rotation:-90.01, drawSVG:"0%"}, 0.3); This is actually the same odd issue we were discussing in this thread. Hopefully that helps. Happy tweening.

Ya you can use GSAP to do whatever animation you like that you would normally do with any elements once you add text. Following is a simple example with SplitText but you can do all kind of different effects.

I imagine this is what you're looking for: Right? There are actually a lot of ways you could handle this - I just provided one. I attached all your animations to an "animations" object with properties named according to your functions. That makes it relatively easy to access them and call them dynamically, like animations[currScene + "out"](). I also needed to fix the way the click() events were assigned, and the logic in that function. Hopefully this gets you going in the right direction, but let us know if you need anything else. Happy tweening!

Hi @Tissi_2 Welcome to the forum. I'm not 100% sure what the overall question is here, but it sounds like you're just trying to make your site faster on mobile? Do you mean it's loading slowly or animation performance is not good on mobile? I'm not seeing much animation beyond some opacity changes on your site. GSAP is certainly a great choice for animation, but your assets could be a bottleneck. You have to remember that GSAP is animating the values, but doesn't do any of the rendering. That's all done by the browser. You could certainly use PIXI if you like. In answer to your question - yes, you will need Pixi.js to use the GSAP Pixi plugin. There are some nice examples on the plugins doc page here: https://greensock.com/?product-plugin=js-pixiplugin You can also search the forum for Pixi and you'll find several threads with good examples. My two cents worth though, Pixi might be overkill for what you need and you'd also be loading another library so that may not help your mobile performance either. From what I'm seeing, you're trying to shift some of the images from green --> red --> blue. I think I'd recommend a simple CSS hue-rotate() filter. That would probably work fine. More info: https://developer.mozilla.org/en-US/docs/Web/CSS/filter You could also keep the animation as you have it now and use GSAP instead of CSS transitions for the opacity changes in the images too. It sure won't hurt to try it for comparison. Regarding the documentation, if you have a specific idea about ways to improve them, you're welcome to submit it. To help you get going with GSAP, there is an excellent learning section here: https://greensock.com/learning Hopefully that gets you started. Happy tweening.

Bendy Box isn't an official GreenSock tool yet. I'm not sure if @GreenSock will release it or not as there are other higher priorities right now. You can accomplish some of the same things with the MorphSVG plugin though. Happy tweening.

It has its own home in the learning section now: https://greensock.com/try-plugins Its probably best to just bookmark the pen or chuck the popular bonus plugins in a CodePen template.

I hate trying to find that. Copy the links from here.

Ever have one of those mornings? Consider this a cautionary tale I was knocking together what should have been a very quick loader for a kiosk (do we still call them that?) I grabbed a starter file I had sitting around that had the following script tags <script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script> Instead of <script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script> Now because I'm showing you both - the obvious error is... um...obvious, but it wasn't obvious to me and everything was fine and dandy - then the client showed up (with coffee and doughnuts) and the js errors started (screenshot of the console attached for your reference and bemusement) . I placated the client while I tried to figure out what the issue was - took me 5 minutes to create a working pen of just the part that was tossing the errors - but another 2 hours to realize why, luckily my studio cat entertained the client to the point of them losing track of time me, allowing me to fix everything to their satisfaction. really the only change needed was the script tag, for whatever reason it was chocking on lines 7-10 (the rotation function) I realize no one else will likely have this issue, ever - but I wanted to document it anyhow, this is the kind of micro-minutia that gets me - it's almost never the actual work.

Might sound like an odd question, but do you really need the jquery.gsap plugin at all? Why not just remove it? It was intended as more of a band-aid or bridge for people who had a bunch of animations built in jQuery already and weren't quite ready to rewrite in the GSAP syntax but I'd strongly recommend moving away from depending on that plugin if at all possible. The native GSAP syntax is going to deliver a lot of other benefits (more flexibility, even better speed, improved compatibility, etc.)

Sorry - that's my fault. I dropped those yoyos on the tweens and restarted from the 'back' label. I think you wanted to replay from the start label. How's this?

Hi again @srmark, If you look at that stackoverflow article .. They first include the 1st jQuery plugin... then they are caching the original function name inside a new variable and then deleting the original function. Then including the 2nd jQuery plugin script after that new variable and delete. So order matters in this technique. Their not having to go and modify what is inside the jQuery plugin. https://stackoverflow.com/a/11901144/1203457 This other stackoverflow link goes over the same situation with conflicting function names of two separate jquery plugin function names. But in this case it is bootstrap jQuery plugin and the jQuery Ui plugin with the same function name inside of them. They do the same thing as above with no delete, and with no need to edit inside both of the jQuery plugins: https://stackoverflow.com/a/12551707/1203457 Also you could use a closure wrapped around your calling of one of the jQuery plugin so there is no conflict. (function(j){ // use j as alias of the factory symbol $, which is an alias for jQuery })(jQuery); Or you can check out this JQuery learning page on what they recommend for conflicts like this, they go over the closure and no conflict: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/ And this link .. Use An Immediately function expression: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/#use-an-immediately-invoked-function-expression

Any "Parks & Rec" fans out there?

Hello and welcome to the GreenSock forums, In order to push letters away from the mouse you are going to have to determine their distance from the mouse (to see if they are affected by the mouse) and their angle from the mouse (to determine which direction they should move). @Sahil recently answered a similar question but the difference is that the elements were attracted to the mouse. Please see the demo below: He also went to great lengths to document his approach with 2 videos which you can find in this thread (there is also a clever youtube button in the demo) Both the site you referenced and Sahil's demo render to <canvas>. If your title is made of html elements like divs or spans; that's a whole other ball of wax, but you would still have to make similar calculations. Hopefully the info in the demo, thread and videos can give you an idea of how you can approach this and what is involved. Unfortunately it is a fairly advanced effect that requires a considerable amount of code and calculations that are beyond what GSAP actually does, so its not like someone will be able to easily or quickly build that from scratch for you. Again, hopefully the info provided gets you on the right path.

Thanks for the demo. Very helpful. This actually took me awhile to track down. Seems the svg was malformed which was preventing TweenMax from loading. This video explains it better than I can in text: https://greensock.d.pr/7ae9jM

We need a new emoji!

You can draw a circle in 1 line of code using canvas or SVG. With CSS, you have to use multiple elements, like here, or a clip-path, which doesn't have good CSS support. The easiest option seems like SVG, then canvas, followed by CSS in a distant last.

Didn't see that. What about adding some type of quick launch button that will open up a starter pen with all the plugins? That would be even better.

@GreenSock Jack.. I would love to see Bendy Box get some more love, and put on the front griddle. I think it would bring other people into using GSAP, and then they can always move into more advanced custom stuff that you can do with GSAP. Kind of like letting them get their feet wet before they jump into the deep end. But that's just my two bits.

and quick !!! Tnx a bunch, mine was called GSAPtick, and had onTick() Replaced already! If this topic needs closing, its about the right time

Hi @Bembe Welcome to the forum. It sounds to me like you're looking for the TweenMax.ticker. https://greensock.com/docs/TweenMax/static.ticker Hopefully that helps. Happy tweening.

Ha ha!!! Nice!I think I'm on my 5th run through on Netflix! It get's funnier ... every ... single ... time ... I rewatch an episode!

Are you kidding? Of course! My whole family is nuts about that show and recently binge-watched all seasons on Netflix

@Carl Wow... Thanks allot!!! I cant believe you just made a custom tutorial for me. I've been banging my head on this for days.... Thanks!!!

Thank you Jack. Aha, you placed all the functions in an object to make them easier to access. I really need to learn more javascript, i find it so fiddly! Justin

I doubt it, unless you're saying that it went MORE than 180 degrees in one direction. But you'd still see somewhat of a "flip" even if it was going the shortest direction, like animating from -30 degrees to 220 degrees would technically be a 170 degree change (which is indeed shorter than 250 degrees that it'd normally go). See what I mean? If you've got a demo that shows it going more than 180 degrees even with the "_short" on the end, I'd love to see it. That'd indeed be a bug. Glad you got things working with an onUpdate. Happy tweening! (By the way, sorry about the late reply - Gmail started flagging almost all emails from the forums as spam in my account several days ago and I just now discovered it!)

Haha! Perfection. Each time it's used a modal pops up and says: "Boom! You've been GreenShocked!" I think all the emojis should have a cool green tint like that.

@Shaun Gorneau - That's known as GreenShock.

Hi @TRIPLESENSE REPLY I'm not aware of any callback that includes onDrag and onThrowUpdate - so - yes, use both with the same function. Happy tweening.

Why don't you want to kill it? Is it causing a jump when you create a new one? Or are you trying to keep the duration the same? Do you think you can make a simple demo of what you're trying to do? There might be some other approaches if I can see what's going on. You can use the physics plugins on CodePen by using the url from here.

Hello @Anya and welcome to the GreenSock Forum! Keep in mind that you should be able to just use translateZ(0px) instead of translateZ(100px). Using the translateZ() CSS function on the parent just triggers it to be on its own rendering layer. Which changes the stacking context by the mere presence of that CSS property on the element. Which also sometimes negates the use of having to use CSS perspective on the same element with translateZ() values other than 0px, to prevent artifacts. Happy Tweening!

You don't have to delete the post. Ya you can do it with CSS but it is going to be time consuming to get it right and make changes. With custom bounce plugin your bounce effect is in sync with squish effect out of box. You will save a lot of time and be able to make changes by changing couple of numbers. I think this post reminded @GreenSock of something he had been working on so he posted, it certainly doesn't have effect you are after but if this library gets released he probably will add bounce effect to it.

Awesome! Thank you so much <3

Yes, you could do that and have it still work with ScrollMagic. Getting it to work with a mouse scroll probably wouldn't be too hard. My concern would be with touch on mobile. I haven't tried it, but I think getting it to look and behave correctly might be hard.

Nah, after a while it'll make sense. Hang in there - we all went through that season where we felt like we're running in muck trying to get anything done in JS. It'll get better. Hang around these forums and it might help accelerate the process a bit. Lots of smart people around here. Thanks for being a Club GreenSock member. Good luck with your project.

@GreenSock why are things so easy?!?!

Ah, I think I see what you want. Here's a codepen: The concept is borrowed from this one (which is actually more complex because it needed to be implemented onPress so that you could continue dragging from that spot, but your demo doesn't require that)... Does that help?

One suggestion though. Array methods like forEach won't work on a NodeList in older browsers like IE. So I would do it like this. var boxes = Array.prototype.slice.call(document.querySelectorAll(".box")).reverse();

My mind totally read that in the voice of Jeff Foxworthy

Thank you guys, @OSUblake, you saved the day as usual translateZ fixed the clipping of the card in Safari. Btw, the Firefox version that I see the issue is the old Firefox51. In the newer versions this clipping does not happen.

I'm glad to see Blake and Jonathan still love each other and all is right in the world again. Each time you guys mentioned FLIP, all I could think of was this scene from The IT Crowd.

Many thanks Carl, this will solve a lot of my problems, again GSAP saving our lives. I love this Lib

Dealing with coordinates inside an SVG is complicated, especially if the SVG has a viewBox. I wrote this script to help get the transformed bounds of SVG elements. That's commonly known as an axis-aligned bounding box, or AABB.

In that case you could try keeping all of the animations in your timeline with Linear eases and never play() the timeline. Always tweenTo() the next frame and add the ease to the tweenTo(). Doing this you will have to determine what the next label is, but getLabelAfter() will help With the solution above you will notice a problem if you are tweening to label4 (or any label) and you hit the next go tl button while the animation is happening, then you are still going to end up at label4. So you may want to disable clicking while animations happen or work on a more robust approach where you use getLabelsArray() and increment an index each time you click and then tweenTo() the next label based on the new index value. Also, be careful to check that there is a label after. In other words, you can't tweenTo() label6 as it doesn't exist.

Yep, that sorted it! Thanks again.