Leaderboard

Notice that I'm doing that in CodePen's debug view so I don't have to deal with selecting the element from an iframe.

There's a bunch of ways. You can set a break point in the Sources debugger and check the value of anything in memory at that time. Or you can just select your element in the console, and print out its checked status.

okay, the team finished their sweep but didn't find any bugs. They tell me that GreenSock probably has a spy satellite to monitor all the Moderators. They recommended I build an underground bunker for enhanced security. I thought the bubble slider might look neat if it stretched over to the new target rather than just floating over to it. Here's what I added. Please don't melt my brain with your addition(s). I can only handle so much GreenShock on the weekend.

You were using split text on same elements multiple times, which was creating nodes as many levels deep. In the loop, on first tween you are setting opacity and in next two tweens you are setting color but not opacity. So lets say your animation completed till 3rd line, now all character nodes in first 3 lines have opacity 1 but rest of the lines have opacity 0. Now when you click again, split text is creating new character nodes 1 level deep. First 3 lines will work fine because their parent has opacity of 1 but rest won't show up because their parent have opacity 0. If you were using opacity everywhere it would have worked, but wouldn't have been efficient. I will suggest reading this article to better plan your animations, https://css-tricks.com/writing-smarter-animation-code/

What would we do without your sense of humor around here, Craig? By the way, we already anticipated your replies via our Neuropathway Predictive Algorithm (coming in the next major version of GSAP), so I have been enjoying those enhancements you made to the bubble slider a few hours before you actually made them. Nice work! And that other project you'll be releasing in a few months turns out really well, so congrats ahead of time! Your animation skills continue to grow at breakneck speed.

Hey @b0dg4n, actually the docs currently have a specific part for NPM usage that also covers how to include bonus GreenSock club's plugins: https://greensock.com/docs/NPMUsage Around the middle of the page is mentioned how to include the bonus plugins and tools. Happy Tweening!!!

The Neuropathway Predictive Algorithm already factored that in. Oh, it WILL be be completed. There ain't no way @PointC is gonna do nothing for a few months. He'd go crazy.

Hi guys, Why not use GSAP for the presentation itself. Here's a little suggestion for an opener. By beamer in 4K whatever on a giant screen!?! OK, Charly is a bit older, sluggish and mumbling. @Dipscom: You may have your own avatar that suits your character. Best regards Mikel

Your animation was really smooth for me, and I didn't see anything unusual from Chrome's Rendering dev tools.

First of all, welcome to the forums @b0dg4n! And thanks for joining Club GreenSock! Sorry to hear about the trouble. It sounds like you're using the wrong files (UMD rather than ES modules). The simplest solution is probably to "npm install gsap --save-dev" for the main/public stuff, and then for the bonus plugins make sure you're using the files in the "bonus-files-for-npm-users" folder of the zip. Those are ES Modules (well, there's also a /umd/ subfolder if you NEED that format). If your build process involves tree shaking, you may also need to reference ThrowPropsPlugin somewhere in your own code just so that Webpack doesn't dump it inadvertently, like: import ThrowPropsPlugin from "../src/gsap-bonus/ThrowPropsPlugin.js"; const plugin = ThrowPropsPlugin; //just to keep tree shaking from dumping it. That assumes you put the bonus files in a src/gsap-bonus/ directory of course (doesn't really matter what you name it...just put whatever path you want there for your particular setup). See https://greensock.com/docs/NPMUsage Does that help? If you're still having trouble, please provide a reduced test case on stackblitz or codepen or something like that so we can see what's going on. Feel free to private message me with details so that you're not posting the actual bonus plugins somewhere public. I'm sure we can help get things squared away for you.

Hi @flowen You can pre-record the values like this: tl.progress(1).progress(0); That will make the virtual playhead move to the end and then back to the beginning of the timeline. That can sometimes help with a slight stutter on the first play. If that doesn't fix it for you, a demo would be most helpful. Happy tweening.

Well, the Neuropathway Predictive Algorithm certainly explains a lot. Apparently the Rudimentary Phonics Engine from a couple years ago has morphed into something much more intelligent. With this new technology, GSAP will soon become the ultimate power in the universe. Resistance is futile. I thought the other thing this demo needed was more cowbell (Google it if you don't get the reference), but I couldn't figure out how to add that so I added some impact bursts instead. I like the way this turned out. I may tweet it at CodePen tomorrow and see if I can get it picked. Somebody may find it useful and I always enjoy promoting GSAP over there.

I upgraded to latest react build and after adding `dragClickables: true` it all works beautifully. If adding this in by default might affect other codebases, then maybe just mention about this for React users - I would be fine either way. BTW, I've been using GSAP for the past couple of days only and I must say - this has been the most reactive support I've ever encountered! Good job!

@GreenSock that's amazing - all good now! Thanks so much for this! It works just fine right now. The only thing I could suggest is maybe add a reference to the NPM usage on the plugin page, for other ones that might be in my position.

Nice work, @PointC! The only thing that kinda bugged me usability-wise was that if I clicked on another menu item before the animation completes, it basically ignored my click, so it felt unresponsive. As a user, I'd prefer this behavior: Just a minor tweak, but it just "feels" more natural to me Now you can click around as quickly as you want.

I agree with all the answers/suggestions provided but I also just wanted to say that if you're having performance problems, it's very unlikely that it's related to GSAP. Typically less than 5% of the CPU load has anything to do with GSAP - the vast majority is the browser's graphics rendering/painting and reflow calculations. So, for example, if you're animating a bunch of huge objects that require repainting millions of pixels on each frame, you might want to consider reworking things so that you're not putting so much of a load on the browser in terms of graphics rendering. If you still need some help, please provide a reduced test case in codepen so we can see what's going on. Happy tweening!

Hi @flowen, There is no fluid animation when mixing css and js animations. Try to handle the css animations also using GSAP. Put it in a reduced CodePen and we'll see ... Nice Saturday Mikel

Yeah, it is indeed tricky to understand what's happening because there are a lot of illusions. I think this is kinda what you're looking for, right?: Just remember that what LOOKS like it's spinning isn't actually all one piece (with a front and back). It's a clone of the "from" <div> that animates and then immediately gets removed from the DOM after forcing the "to" <div> to be set to visibility:visible. It's a slight-of-hand in a sense. So you can't be fading one in at the same time that the other is fading out because they're not both on the screen at the same time.

Agreed then, I'm in

It looks like you're expecting event callbacks to fire many times on a single event, but that's not how it works. If your goal is to have a function called at a particular time in a timeline when the playhead moves past it in either direction (forward or backward), use a regular call() or addCallback() on the timeline.

The problem is that you've got a tween that has its "onStart" callback in the wrong place. It's in the "from" vars instead of the "to" vars: //BAD: .fromTo($('.num_' + initTabNum), 0.75, {onStart: step_2, y: -100}, {y: 0, ease: Elastic.easeOut, immediateRender:false}); //GOOD: .fromTo($('.num_' + initTabNum), 0.75, {y: -100}, {onStart: step_2, y: 0, ease: Elastic.easeOut, immediateRender:false}); Does that help?

Yep, you got it. element.style.zIndex should take care of that logic for you. I also wanted to point out the isActive() method: https://greensock.com/docs/TimelineMax/isActive That will allow you to prevent additional clicks while a timeline is playing. Maybe it could be helpful for your project. Happy tweening.

Aha! Figured out the issue - apparently the new version of React has an "onclick" handler on the root element, thus Draggable tries to politely stay out of the way by opting out unless you set dragClickables:true on your Draggable. Or you can set your own clickableTest function, but that's more advanced. So this isn't a bug in Draggable - it's how it's supposed to handle elements that are "clickable" (outside of Draggable), and it's easy to override if you need to. In short, just add dragClickables:true and you should be golden. I'm not sure why React is adding that onclick now to the root. Anybody know?

In addition to the position parameter info, I'd note that you can target multiple elements in one tween. Your tween could look like this: .to('.blue_stroke, .orange_stroke', 1, {fillOpacity: 1}) Happy tweening.

Hi @tri.truong, Welcome to the GreenSock Forums. Maybe this execution of @Sahil helps (draggable slider) Happy tweening ... Mikel

Hi @ainsley_clark, I'm not sure what your question is about. A reduced CodePen example would be helpful .... I assume it's about positioning. Here are some help and examples: https://greensock.com/position-parameter Best regards Mikel

“Is there any other way to tackle this using frontend side ie, writing javascript?” Hi Pradeep, the two second options (cookie and local storage) are JavaScript solutions. Do you mean solutions other than those two?

Hi @Pradeep KS, You'll need to set a hook somewhere on the client side to check against. There are a few ways to do that. If you are using server side code for anything, you could set a session variable on the first load, and then use the presence of that session variable to set a hook on the client side, for example ... <? $class = ''; if( $_SESSION['subsequent_visit'] ){ $class = ' subsequent-visit'; } ?> <body class="some-class another-class <? print $class;?>"> Which you can then check for before you create the timeline. Example if( document.querySelector('body.subsequent-visit').length < 1 ){ const tl = new timelineMax(); ... } Or, on the client side alone, you could set a cookie to check against, or a variable in local storage to check against. Hope this helps, Shaun

First, that demo isn't using the latest version of TweenMax or Draggable, which is currently at 2.0.2, so that's part of the problem. Now check out the docs for ThrowPropsPlugin.to(), which is what creates the throw tween. https://greensock.com/docs/Plugins/ThrowPropsPlugin/static.to So setting a duration cancels out the throwResistance.

Sorry, I have no idea what you're asking. Can you please clarify your question? I really want to help, but I don't know exactly what you want or what's getting in your way. Do you have a reduced test case in codepen that demonstrates the issue?

First off thank you for taking the time to write that. I really do appreciate it and would not be this far along with out the help. I poked around with things off and on today and think I came up with a solution for running this with multiple svgs/canvases/contexts. Take a peek and let me know what you think, its a little loopy (pun intended) but should work. Thanks again guys, *Bill sends virtual chest bump*

I thought I felt a bit strange when I woke up this morning

Sure, you can add your own easing. I was just showing it working in one continuous tween.

I'm still confused what you're asking. Like this?

The DirectionalRotationPlugin can use radians. See the useRadians flag. https://greensock.com/docs/Plugins/DirectionalRotationPlugin But I'm not sure what the problem is if you know the values.

GSAP irons out lot browser inconsistencies with SVG, so compatibility really isn't an issue. And it's true that canvas may perform better than SVG, but that also comes at cost. Mainly, you have to manually do everything the browser would automatically do for you, and the learning curve can be steep. With SVG, this is pretty much all you need to morph. tl.to(path, 1, { morphSVG:"#morph-step-1" }) .to(path, 1, { morphSVG:"#morph-step-2" }) .to(path, 1, { morphSVG:"#morph-step-3" }); With canvas, this is the code for 1 animation.

Hm, I'm not sure I understand your goal here - it's very uncommon for someone to want to clearProps on every child tween inside of a timeline. If your goal is to simply revert the properties to where they were when the timeline started and kill it, you can do: yourTimeline.seek(0).kill(); Are you trying to literally remove all the inline styles of every target that was animated? If so, it'd probably be simplest to just use document.querySelectorAll() and loop through the results setting style.cssText = "". Does that help? If you're still struggling, it'd be very helpful if you could provide a little context and the "why" behind your request. A codepen demo would be even better

That demo doesn't use Babel so you're good. A lot of my demos are configured that way just in case I need to use it. If you find something that uses Babel or TypeScript, you can get the compiled code by adding .js to end of the url. If there is a ? in the url, delete that and anything that follows it. So for a url like this. https://codepen.io/osublake/pen/WwgQEV?editors=0010 Delete the ?editors=0010 part, and add .js. https://codepen.io/osublake/pen/WwgQEV.js

Nah, @OSUblake tends to be at least 4 years ahead of the game, so if that code is 2.5 years old, it's still probably 1.5 years until the rest of the web catches up I don't notice anything in there that's particularly "outdated". Seems like a clever approach to me. Let us know if you run into any trouble. Good luck with the project!

The new version is in the official downloads now, so just log into your account and snag it.

I don't know if there are any examples using three.js, but @OSUblake has several posts about displacement maps and Pixi.js. http://www.pixijs.com/ Here are a couple: You can search the forum for canvas, Pixi, and displacement maps to find more of his info and demos. Or check his CodePen profile: https://codepen.io/osublake/ Here's a simple example from a different thread. (using Pixi) Happy tweenig.

Looks like they're using three.js and some displacement maps. https://threejs.org/

Hi everyone, It is always surprising what examples arrive at newbies, who are unfamiliar with the matter. And I speak from my own experience: What impresses me? @OSUblake: Your example comes from the world of normal webs. To animate a header fits into the everyday life of many coders and could encourage them to give it a try. And what attracts me too: little gimmicks. As in the presentation by @chrisgannon, which @Sahil recently quoted. Best regards Mikel

I totally get that. People want to see eye candy, and not a lot of code. I always show this demo to people who don't mess with animations on a frequent basis. It does something that cannot be done with CSS alone, and is pretty simple. I spent less than an hour on it, and to my shock, ended up being the 16th most hearted pen of 2017.

That's probably your best option. The only way to really prevent that is to use a monospace font with the same amount of characters, but that wouldn't work for what your doing because the number of characters would differ, and there's a size difference between English and Korean characters.

Check out what the SteppedEase does. https://greensock.com/docs/Easing/SteppedEase It changes a value in "steps". However, sometimes you need to be careful about that if you're expecting a certain value as there might be a floating point error. For this particular demo, 2 ends up being 1.9999999999999996 for me. There's nothing you can do about that besides rounding, which brings you back to what Jack or PointC did. So SteppedEase might not be the best solution if you need to display the actual value.

This demo uses a slightly modified version of that function. The object returned by that function has cx and cy properties, which are for centerX and centerY. That can help out a lot if you're trying to center stuff. It's also helpful when scale or rotation is involved as the top-left corner might be in a different position.

Welcome to the forums, @redfawx. Hm, it's very difficult to troubleshoot blind but typically when you're running into performance issues it's totally unrelated to GSAP - it's more about the amount of pressure you're putting on the browser's rendering engine. For example, if you're animating hundreds of individual characters, that's really tough. GSAP can do its work on hundreds of elements without breaking a sweat, but then the browser has to actually render those elements in their new positions/rotations/opacity and THAT is where things can slow down. Do you have a codepen demo we can peek at? My guess is that you're just trying to animate too many characters simultaneously.

Here's the challenge: when GSAP is asked to interpolate between two strings, it can walk through that string and pick out all the numeric values and match them up for interpolation, BUT what about more advanced cases where there are special ways those values need to be interpreted? For example, some strings may have colors like "red" or "#F00" or "#FF0000" or "rgb(255,0,0)" or hsl() values. Those are no longer plain strings - the colors must be converted into rgba() values in order to cleanly interpolate them. CSSPlugin adds that filter automatically. Or in this case of morphing, the 2 strings must be converted to cubic beziers and then compared and the number of points matched so that interpolation is clean. THAT is what stringFilter is for. You can define it on a per-tween basis (as I did in my demo above), or you can set TweenLite.defaultStringFilter. A filter is basically a function that accepts an array as the first parameter (sometimes filters can accept more parameters too, but they all at least accept an array). The first element of the array is the "start" value, and the 2nd element is the "end" value. The filter's job is to look at those and, if necessary, CHANGE those values in the array. So feed an array into MorphSVGPlugin.pathFilter() and they'll be changed into cubic beziers that have matching numbers of points. It's not documented because it was intended as more of an internal mechanism. But perhaps soon we should go ahead and make it more public for cases like this

If you're asking about TimelineMax vs. TweenMax, it makes virtually no difference performance-wise. Think of TimelineMax as an organizational tool and/or a way to control a group of tweens as a whole. It can greatly simplify workflow too in certain situations, like when you're trying to build a complex sequence. See https://css-tricks.com/writing-smarter-animation-code/ Here's a fork of your demo that cleans things up a bit and uses a little-known "stringFilter" property that basically controls how two strings are compared and then tweened. In this case, it taps into MorphSVGPlugin's special capabilities to convert the shapes into ones that have a matching number of points so that they can be interpolated cleanly. Is that what you're looking for?