Leaderboard

It's funny you should mention this as I still have worries about code from time to time. When I make a demo, I think "If Blake sees this, he's gonna think I'm a total goof. " I think I'm getting to a place now where I'm satisfied with my results. I can't imagine I'll ever be at the skill level of @GreenSock or @OSUblake and I'm fine with that. If everything in my code works as I'd like and I'm not repeating myself too much, I call it a good day. @Robert Wildling I work alone too and that can be challenging. But that's one of the awesome things about being a member of the GreenSock forum. We have access to a community of talented people from across the world who are here to help when we need it. Happy tweening.

To normalize the time, you would have to base the size on the center of the circle to the furthest corner. You could probably change the timeScale, but if you're going that far into calculations, you might as well just set the correct size. All the circles here will finish at the same time. There's lot of uses in trigonometry. The relationship is like this. To get the diagonal of a 200 x 200 square. 200 * Math.SQRT2 = ~283 To get half the diagonal of a 200 x 200 square. 200 * Math.SQRT1_2 = ~141.5 If you know the diagonal is ~283, then the length of each side is 283 * Math.SQRT1_2 = ~200 Math.SQRT1_2 is the same as sin 45 Math.SQRT1_2 === Math.sin(45 * Math.PI / 180) If you've ever heard of the golden ratio, √2 is used for the silver ratio. https://en.wikipedia.org/wiki/Silver_ratio

I don't. I worry about getting it working first. When I first started coding, I was constantly questioning everything I did because I was worried about writing code that did not fall under some set of "best practices", like I was going to be graded on it. It took some time, but one day I realized that I was spending most of my time trying to adhere to someone's opinion and I didn't know why. I was a cargo cult programmer. (hat tip to @Dipscom for showing me that term) https://en.wikipedia.org/wiki/Cargo_cult_programming DRY All this means is don't write the same code repeatedly. If you're typing a similar block of code more than 3 times, there's a good chance you can refactor it into a single function/method or other mechanism like a loop. If it's too hard to refactor, makes your code harder to read, or adds unnecessary complexity, then it might not be worth the refactor. SPEED Google some of the problems with premature optimization. GSAP is already highly optimized, so there's not much you can do to make it run faster. If performance is a problem, then you should look at the properties you're animating. Anything that triggers a layout or paint is a potential bottleneck. https://csstriggers.com/ https://gist.github.com/paulirish/5d52fb081b3570c81e3a SETTINGS Your settings object is way too granular. It looks like you're defining your entire app inside of it, and it's very hard to follow because it's nested way too deep. The advice @Sahil gave about breaking it down into specific settings is a good idea. You may also want to look at using Object.assign() for default or extending settings. Why does that irritate you? Sure, querying the DOM can be slow, but I think what @PointC did in his Star Wars demo is fine because it's all done upfront, and he has no need to reference any of those elements again. Once an animation is created, it's not going query the DOM again, but you can always pass a real element into a function. And note that keeping references to objects can lead to memory leaks if you're not careful. The elements that you're storing in your settings object are going to remain there until you remove them.

Emitters usually have a way to start and stop them, and you can usually position them. Here's a quicky modification of your first demo. Probably not the best way to do it, but it demonstrates those concepts. The emitter will follow your mouse, and you can toggle it on and off. Timelines can call functions, so you could start your emitter that way.

Hi and welcome to the GreenSock forums. Thanks for the demo. It looks like your JavaScript is running BEFORE your custom font is ready. If the font is loaded, SplitText will take its measurements with the default browser font. Check out @Jonathan's advice here

To @OSUblake, @Sahil, @PointC: Thanks SOOO MUCH for your valuable feedback! It is very encouraging - and yes: this is an awesome forum with awesome people! Happy tweening an till soon! ?

Howdy @cgorton. I didn't have time to digest all 300+ lines of code but I had a few questions... Why do you want an emitter animation like that in a timeline? Typically timelines are for animations that you need to have random access to (like tl.seek(20)) or scrub or reverse or something. Emitters by their very nature would endlessly generate animations, so there's not really any "end" time and scrubbing is typically an odd concept for this type of thing. So what's your goal here in terms of getting it into a master timeline? Is there any way you could simplify your question (or demo)? Oh, and just a suggestion - I always get scared when I start building functions that accept more than 3-ish parameters because it can get really confusing to read and maintain. You end up with function calls like: all('.box', 0.5, 1, 1.1, Power4.easeOut, 0, 0, 0, 'center center', true, true, 5) And then it's like "wait, what's the 8th parameter again? Where do I define the 'x'?" And it's more difficult to just leverage defaults too, like if you want to use all the default values except the 9th parameter...you're stuck defining 1-8 as well. I find it more comfortable/efficient to use config objects in cases like this: all({ item: '.box', time: 0.5, opacity: 1, scale: 1.1, ease: Power4.easeOut }); Just food for thought.

Update: in GSAP 2.0.2, a new onPressInit callback was added to Draggable which fires BEFORE any starting values are recorded internally, so it's a great place to do any repositioning before dragging commences. Here's a forked version of the codepen: Enjoy!

Make sure you put the file from the bonus-files-for-npm-users folder. It shouldn't be looking for a relative module like ../TweenLite.js The correct file will look for gsap/TweenLite.js

Random drifting can often lead to really cool discoveries and designs. Neat demo @Sahil. ?

Not sure what you mean, the effect is based on width of the spriteslider so you can't really change the distance after which frame will change. You can easily add longer animation with far more frames and it will perform same. You can even use video with same logic. The speed of your 'tween' can be 10 seconds or 1 second, it won't affect the mouse interaction. You just need to pause your tween when draggable interaction starts.

I get to hear that often but only as 'Golden Ratio logo', 'Golden Circles' etc. So I decided to get to bottom of it before I learn about silver ratio, then one thing led to another and this is what I ended up with. This has no relation with golden ratio, just me drifting somewhere randomly.

Ah, okay. I see it now in Safari - it's definitely a rendering bug in Safari (unrelated to GSAP or SplitText). When opacity is less than 1, it's chopping off that part of the "f" that's outside the bounding box of the <div>. Setting overflow:visible doesn't help either. It looks like a problem with Safari's compositor or something. I think a workaround could be to just set padding-right and an opposite margin-right, like this: I slowed down the animation so you can see things better. Notice I just set the charsClass to "split-fix" and created a CSS class accordingly with padding-right: 8px and margin-right:-8px. Does that work for you?

It also looks like the browser is applying custom kerning which gets stripped out when things are wrapped in <div> or <span> (that's unrelated to SplitText - you'd have the same issue if you wrapped things manually). The solution is to use CSS to get rid of that kerning. Try adding this: font-kerning: none; -webkit-text-rendering: optimizeSpeed; text-rendering: optimizeSpeed;

After a week of trying to get this to work with TypeScript + Babel on old browsers, 2.0.2 fixes everything. Thank you

As of GSAP 2.0.2, an onPressInit was added to Draggable which makes this even easier: onPressInit fires BEFORE the starting positions are recorded by Draggable, making it a great time to do any repositioning before dragging begins. Enjoy!

Ya it would be steep but if you spend some time around forum looking at questions even though they are not related to you, you will learn a lot. I gave it another try and I think this is what you are trying to do. Some of the things I would like to point out, 1. You are using files with 'latest' links but those files are 3-4 year old, latest version is 2.0.2. 2. The way you had written your code works but it is incorrect because spriteslider is your proxy element. So you shouldn't assign your actual elements as properties to it. 3. GSAP 2.0.2 was released yesterday with a new callback called onPressInit which lets you adjust your element before Draggable records your values, so I am using it to reposition the proxy element. But in above demo you will notice jumps when you mouse over at random position. You can animate to that position by using manual easing, it is little bit advanced but just basic Maths. Here instead of directly applying calculated progress, I am using another variable called spriteProgress. Then on every frame I am using that value to ease the tween for smoother effect.

Hm, I don't really understand why certain browsers would load things more slowly but perhaps it's the parsing/rendering that takes them longer. It won't matter how you load the SVG (inline or as an img), I think you'll have exactly the same problem either way. Have you tried running your SVG through an optimizer? I'd definitely recommend loading SVG inline if at all possible because not only will it give you the most control and flexibility (GSAP can access all the nodes), but it's one less request from the server (improving latency). If you're still having trouble, I'd love to see a demo of your project. If there's any way you can provide a codepen or jsfiddle, it'd be super helpful for troubleshooting. I wonder if there's something else at play with IE/Edge that's unrelated to inline SVG.

That is indeed a phat chunk of code... It does seem to me a bit too much still. However, it does help a ton to understand where you are trying to get to. Thanks for that. 1. The reverse isn't working because you are calling the function that creates the timeline rather than telling the timeline originally created to play in reverse. 2. You send the done() down as a callback. Have a lookie at this fork. It accomplishes what you are describing as your intention. See if it helps you.

For that you will want to use the Window.matchMedia() method. if (window.matchMedia("(min-width: 400px)").matches) { /* the viewport is at least 400 pixels wide */ TweenMax.to(el, 2, { x: '-100%', ease:Power1.easeInOut, onComplete: done }); } else { /* the viewport is less than 400 pixels wide */ TweenMax.to(el, 2, { x: '-400px', ease:Power1.easeInOut, onComplete: done }); }

Re-creating the timelines is a great solution, though I also wanted to point out that if your goal is to clear out any recorded starting values, you can simply invalidate() the timeline which will force it to re-record any starting values on the next render.

You need to animate scaleX to zero and set transform origin to 'right center'. (same as '100% 50%')

Here is how you can do it so you won't have to pass parameters or even need callback.

If you're experiencing choppiness in your animation it's highly unlikely to be GSAP related. GSAP is a tweening engine that animates values over time. All the rendering is done by the browser. Odds are good that you're either animating something quite large or a bunch of elements at the same time. Browsers have limits and when SVGs starting bogging down, it may be time to look towards a canvas solution. There are many threads around the forum related to canvas if that's a route you want to consider. Happy tweening.

I was actually able to see the problem in both Edge and FF. (Chrome was fine) Jack's fix seems to work properly in all browsers for me.

I'd definitely echo @Carl's advice about that. Bringing font-awesome icons into the project seems likely to over complicate things. Most of those icons are fairly simple. Just a few lines, polylines and circles will take care of most of them. You may want to take a look at this: https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368 Happy tweening.

Sorry, we have to keep our supported focused on the GSAP API. We just don't have the resources to provide effective assistance with general web development issues. Being that your menu is an SVG it might not be totally straightforward to embed custom fonts and icons. Since the menu is already made of SVG, it might be better to find a solution that uses SVG artwork as opposed to font.

Dipscom, thanks a lot

if you want to upload zip of just the bare-essentials to replicate the issue that is fine. We don't need something with bootstrap or dozens of dependencies. Try to make it as simple as possible. One more thing I noticed from your screenshot is that it is not clear that you are loading script.js from the proper location, but I would think that the browser would have shown an error in the console. the screenshot below shows the script I am talking about and the path it looks like it should be coming from

Hi ad welcome to the GreenSock forums. We did't write that tutorial so its kind of tough to troubleshoot it. Might be good to reach out to the author for the best support. Also its very difficult to troubleshoot a complex javascript demo by looking at a screenshot of your dev environment. However, one thing that should be fixed is that you are loading 2 different versions of TweenMax: 2.0.2 and 1.20.3, you probably just want 2.0.2 Since the CodePen is working, something you can do is export a zip and inspect it locally. Try to match your dev version with what you have in the CodePen. In CodePen there is an "export" button in the lower right.

Hey MSCAU, Indeed, I am afraid you have missed the crutial point. It doesn't matter that you update your fixed_offset_top variable. GSAP only reaches out to read it when the timeline is initialized, not when it is played. Like you said yourself earlier on, it keeps those values 'in memory', it does not keep a reference to your variable. So, updating it has no effect whatsoever. Again, all you need to do is create a new timeline whenever you want to change its parameters. See a fork of your latest pen bellow with an example.

Hi MSCAU! Looking at your example Pen (which is very helpful, thanks), I don't see where you are listening to the window resize event. In order for you to achieve what you are describing, you need to recreate your timelines every time the window changes size. You are correct in saying that GSAP is remembering the tween's positions - that's exactly what is meant to do. So, you have to add an event listener for the window resize and trigger override the timelines you have with fresh ones.

I would say you are mixing settings and behaviour where you should not. The idea of a settings object is to hold references to a bunch of, well, settings... Those references can be of methods, I don't see an issue there. But, you shouldn't try to perform actions from the setting object. By adding calls to DOM methods on your settings object, it makes it completely dependant on the DOM being available at the time of your settings object being initialised. That's not something you want. You want the setting to be on its own and only when the DOM is ready, you store the references to the DOM elements on your settings. E.g. let SETTINGS = { ui: { el: undefined, ref: '.my-button', dur: 1, vars: { x: 100, autoAlpha: 0 } } }; // Then at your initialization code: SETTINGS.ui.el = document.querySelector( SETTINGS.ul.ref );

You can trigger the draggable using startDrag method, you need to pass event data as parameter. It won't matter if the mouse is down or not. https://greensock.com/docs/Utilities/Draggable/startDrag()

I work alone too so I don't really have some special setup other than using functions to create timelines, what @GreenSock shared.

This should be resolved in 2.0.2 (just released).

onReverseStart() is pretty thoroughly discussed in these threads. Happy tweening.

1. On line 125 you were passing function to the timeline instead of executing it. Once you execute the function, it will return the timeline instead of function itself. In your case child timeline was never getting added to parent timeline. 2. When you reverse the animation, it just reverses nothing more. If GSAP tries to do anything else, it will just create same problems when you will try to create two separate timelines for play and reverse. 3. Safest way to approach this is, create two timelines. If user interrupts, then just reverse ongoing animation. If there is no active animation then use alternate reverse animation. Little punishment to user for interrupting. 4. @GreenSock can comment on that. Usually we avoid pens with hundreds of lines of code, I just gave it a try because you seemed frustrated in other thread. Hope this helps you.

This is awesome Blake, that's exactly what I was looking to do. THANK YOU SO MUCH!

Nice demo, Blake. Super clean and clear!

Hi - not sure what I'm doing wrong, but I've got an AS2 script here, and I'm building a sequence of tweens. All is well until I get to staggerTo - I am positive I'm giving it an array as its first property, but it keeps throwing a type mismatch. Here are the important bits: var introTl:TimelineLite; var btnsArr:Array; function init():Void { // activate TweenLight plugins TweenPlugin.activate([AutoAlphaPlugin, ScalePlugin, TintPlugin, RemoveTintPlugin]); // store the buttons in an array btnsArr = new Array(btn0, btn1, btn2); // play intro anim introAnim(); } function introAnim():Void { introTl = new TimelineLite({onComplete:onBoardAnim}); introTl.staggerTo(btnsArr, .5, {autoAlpha:0, scale:150, ease:Back.easeOut}, "-=.3"); //icons } function onBoardAnim():Void { trace ("onboard"); } I've even stripped this out and put it into a new file - same result. I'm sure it's something simple. Any ideas?

Ah. I just realized I was missing the stagger parameter (I meant for the "-=.3" to be the position parameter). It's all good now...