Leaderboard

Variables aren't scoped in a for loop. https://stackoverflow.com/questions/790558/variable-scope-in-javascript-for-loop That's what the new let and const statements can be used for. So you can either use those (just be sure to use a transpiler like Babel to support older browsers). for(let i = 0; i < 6; i++ ){ ... function getOffsetValues(){ console.log(i); } } Or do everything inside a function. That's what your jQuery each loop is doing. for(var i = 0; i < 6; i++ ){ setChars(i); } function setChars(i) { ... function getOffsetValues() { console.log(i); } }

When I need to create and tween hundreds of new objects every second, I usually use an object pool so I can reuse them. When respawning, I call invalidate to adjust the start and end values for any tweens that need to be updated. Yes, you sacrifice memory, but performance will usually be better as garbage collection will happen less often.

Hi @fencepencil, Welcome to the GreenSock Forum. You can cut a lot, for example: var dots = [].reverse.call($('.dot')) // order of the dots - this code requires jquery or you the order in your svg waveDots.staggerFromTo(dots,0.8,{y:-7},{y:7, ease: Sine.easeOut,repeat:10, yoyo:true},0.4); When the letter morphing starts, you can use e.g. an 'onStart' (more here) to stop the waveDots animation and set it to progress(0): .to("#dot1", 0.25, {morphSVG:"#f", onStart: stop }) function stop(){ waveDots.stop().progress(0); } I hope this is helpful. Mikel

Well, it certainly sounds like graphics rendering is the issue, and that's not really related to GSAP. SVG is notoriously hard on the CPU (well, perhaps the GPU eventually) because every pixel must be re-fabricated on the fly. With raster graphics, they can be shoved over to the GPU and then just manipulated with matrices for the most part (much cheaper), but of course the tradeoff is that things aren't razor sharp with raster graphics. GSAP already powers down whenever possible, like when you switch tabs or when there aren't any animations happening for a while. My guess is that you're just pushing a lot of pixels around on the screen and that's expensive. I wish I had a silver bullet to offer you. The fewer pixels that change on each tick, the cheaper it's gonna be on your battery. Happy tweening!

Hi and welcome to the GreenSock forums, Looks like you posted in our archived Flash forums (moving this post to HTML5). No biggie. Thanks for the demo. Very nice. You have some options here. Every animation has a progress() method that you can actually tween. The progress (value between 0 - 1) represents how much of the animation that is complete where 0 = none, 0.5 = half, 1 = fully complete. To tween the progress of a timeline named tl you can do TweenLite.to(tl, 1, {progress:0.5})// animate to a progress of 0.5 Read more about the technique of "tweening a tween" (or timeline) read: https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca --- You can also call tweenTo() on a TimelineMax timeline like tl.tweenTo(5) // tweens to 5 seconds. https://greensock.com/docs/TimelineMax/tweenTo I modified your demo to show both techniques. Press the "reset" button after each animation

as far as shortening your code, you can do a lot with loops if you set up your SVG the right way. Here are the elements as they appear in illustrator https://greensock.d.pr/vyLaop Without giving any dots or letters their own unique classes or IDs you can just find the first dot and tell it to morph to the first letter like: var allLetters = $("#letters path") var tl = new TimelineMax({repeat:8, repeatDelay:0.3, yoyo:true}); //animate the first dot to the first letter //animate the second dot to the second letter //animate the third dot to the third letter $("#dots").children().each(function(index, element){ tl.to(element, 1, {morphSVG:allLetters[index]}) }) A setup like that could work for 100 dots and 100 letters with the same 3 lines of code.

Hi and welcome to the GreenSock forums, Thanks for the demo. Very cool animation. Just a few little mistakes as to why the last fill:white wasn't working. Change .to("#letters", 0.5, {fill:"#FFF"}); //TO .to(".dot", 0.5, {attr:{fill:"white"}}); #letters is the group holding all the paths you are morphing to. You don't actually see the #letters group on screen, you see the #dots. You can't change the fill of the #dots group because each .dot has its own fill set inline So you need to target every element with a class of dot (".dot") Lastly, fill is as attribute not a CSS property so you actually have to pass that value into the AttrPlugin (included in TweenMax) .to(".dot", 0.5, {attr:{fill:"white"}}); Keep up the great work.

A reduced example would go a long way to help solving this mystery. A cursory look of the example code does not yield any obvious issues. I'm working on the assumption you do not have both of those loops in the same block of code. Also, I would move the getOffsetValues outside the looping blocks, there isn't a need for them to be there. You can just pass arguments to it. I don't have the spare time at the moment to set a test up for you but I will be more than happy to come back and have a look at any reduced case you might have.

Hi @Awmat, step by step - looks good. 1. Use 'visibility:hidden' in CSS. 2. Watch 'Animate along on SVG path' (here). 3. In the DOCS you find: So you could even animate a dash from one end of the path to the other, never changing size, like TweenLite.fromTo("#path", 1, {drawSVG:"0 5%"}, {drawSVG:"95% 100%"}) Here some modifications: Happy tweening ... Mikel

I'm curious why you'd want to disable that. It's implemented currently so that it maximizes performance. I believe you could tweak it by adjusting the TweenLite.autoSleep value lower. Does that help?

Hi @jorma Are you using the Angular CLI? If so, you can just add your scripts to the .angular-cli.json file, and it will import them for you. "scripts": [ "assets/gsap/TweenMax.js", "assets/gsap/plugins/DrawSVGPlugin.js" ] https://github.com/angular/angular-cli/wiki/stories-global-scripts

Hi @Awmat, 1. Look at this part of the docs: autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. //fade out and set visibility:hidden TweenLite.to(element, 2, {autoAlpha:0}); //in 2 seconds, fade back in with visibility:visible TweenLite.to(element, 2, {autoAlpha:1, delay:2}); 2. Please take a look at these explanations: https://greensock.com/position-parameter And: try the GSdevtools (more here) - its a great help. Just a few modifications here: Happy tweening ... Mikel

Yeah, sorry about that but sometimes we add some features that we intentionally leave undocumented because we're not sure how useful they'll be in real-world situations, so we kinda leave the door open and see how many times it comes in handy for real-world situations. autoSleep is one of those that almost nobody seems to need or care about

Hi @fencepencil, That's pretty good. Line 35 is 'double'. The callback 'onStart: stop' is well placed in line 19. Then the wave stops at the first morph and the jump is eliminated. Keep it up ... Mikel

This is the first time I've ever heard about autoSleep. I don't know why it's not documented, but I had to go look in the source code to see what it does.

Thanks Blake! I get the problem now. I always assumed events inside a for loop isolated scope on each iteration just like a function does. This bit of knowledge will definitely help me moving forward. Apologies for not making a pen to demostrate this. It was an excerpt of a larger code block that would have been time consuming to setup in codepen, and I figured it was probably just a common scoping issue or an issue with applying onComplete that one of the gurus could spot pretty quickly. Which you did.

Thank you Mikel and Carl, it's definitely getting better with your suggestions. I'm still rather new to js as a whole so I don't know exactly what order to put things. I've implemented Mikel's suggestion, as well as the svg color change attribute and would like to add the loop Carl suggested, just not sure where to inject it and what to replace... but as you can see, the code is already much shorter thanks to the both of you. I really appreciate the assistance, guys There is a small jump at the end of the animation, but I'm sure I can figure out how to smooth that out. var tl = new TimelineMax(), dots = [].reverse.call($('.dot')), waveDots = new TimelineMax(); tl .from("#post-left", 0.8, {y: -200, opacity:0, ease: Bounce.easeOut}) .from("#post-mid", 0.8, {y: -200, opacity:0, ease: Bounce.easeOut}) .from("#post-right", 0.8, {y: -200, opacity:0, ease: Bounce.easeOut}) .from("#mid-left", 0.2, {scale: 0.2, opacity:0}) .from("#mid-mid", 0.2, {scale: 0.2, opacity:0}) .from("#mid-right", 0.2, {scale: 0.2, opacity:0}) .from("#tip-left", 0.2, {scale: 0.2, opacity:0}) .from("#tip-mid", 0.2, {scale: 0.2, opacity:0}) .from("#tip-right", 0.2, {scale: 0.2, opacity:0}) .set("#side-post", {transformOrigin:'center'}) .from("#side-post", 2, {rotation: 720, x: -300, y: -500, opacity:0}, "test") .from("#shadow-top, #shadow-bottom", 0.6, {opacity:0}) .to("#dot1", 0.25, {morphSVG:"#f"}) .to("#dot2", 0.25, {morphSVG:"#e1"}) .to("#dot3", 0.25, {morphSVG:"#n1"}) .to("#dot4", 0.25, {morphSVG:"#c1"}) .to("#dot5", 0.25, {morphSVG:"#e2"}) .to("#dot6", 0.25, {morphSVG:"#p"}) .to("#dot7", 0.25, {morphSVG:"#e3"}) .to("#dot8", 0.25, {morphSVG:"#n2"}) .to("#dot9", 0.25, {morphSVG:"#c2"}) .to("#dot10", 0.25, {morphSVG:"#i"}) .to("#dot11", 0.25, {morphSVG:"#l"}) .to(".dot", 1.5, {attr:{fill:"white"}}); waveDots .staggerFromTo(dots,0.8,{y:-7},{y:7, ease: Sine.easeOut,repeat:10, yoyo:true},0.2) .to("#dot1", 0.25, {morphSVG:"#f", onStart: stop }); function stop(){ waveDots.stop().progress(0); } //tl.seek("test");

Hello @multivac Is this what you were after? .. i used a staggerFromTo() without using an onUpdate I think the issue was that the browser did not know what the starting filter value was, since by default CSS filter is none. That is why you saw a an abrupt step with no transition from blur to no blur. It was acting like an on / off switch with no interpolation of values. I also added a slight rotation 0.01 and used autoAlpha instead of opacity to make it animate smoother. As well as adding some needed CSS properties to help with cross browser rendering bugs. So now you should see it animate from blur to no blur: JS: var h1 = document.querySelector( "h1" ); var split = new SplitText( h1, { type: "chars" } ); var timeline = new TimelineMax(); // change visibility for initial load TweenMax.set("h1", { visibility:"visible" }); // use satggerFromTo() timeline.staggerFromTo( split.chars, 0.7, { autoAlpha: 0, webKitFilter: "blur(5px)", filter: "blur(5px)", x: 80, rotation: 0.01 },{ autoAlpha: 1, webKitFilter: "blur(0px)", filter: "blur(0px)", x: 0, rotation: 0.01 }, 0.1 ); CSS: h1 { visibility:hidden; } h1 > div { -webkit-backface-visibility:hidden; backface-visibility:hidden; visibility:hidden; } Happy Tweening!

Thank again @OSUblake! For those that come across this post: you need to restart ng serve for this to work. And I don't seem to need the TweenMax line. In fact I get an error when I include that file (the minimised version to be precise).

Hello @multivac and welcome to the GreenSock forum! To get a full cross browser blur effect you should animate using an SVG filter instead of a CSS filter. This is due to the limit of browser support for CSS filters. But it is getting better for CSS Filters support in each passing year. So i have 2 examples.. animates SVG Filter Blur animates CSS Filter Blur The below example uses the GSAP AttrPlugin to animate the stdDeviation attribute of the SVG <feGaussianBlur> element. And here is an example of animating CSS Filter blur() Happy Tweening!

Passing params is simple, from the docs (https://greensock.com/docs/TweenMax) (in the gray box): So, in your code you would do something like: tl.from(countUp, 0.6, { opacity:0, ease:Expo.easeOut, onStart: countItUp, onStartParams: [100] }); I make no recomendations. I do not criticize jQuery. It has its place and applications. It is just that when I started back into web development, I was working in banner development and we cannot afford libraries that are not 100% required. GSAP is, otherwise no animation. jQuery not because as @OSUblake says: 'http://youmightnotneedjquery.com/' So, nowadays I'm just more comfortable without it than with it.

How deep do you want to go down in this rabit hole? The least complicated is to have a global object that would be your manager. Have it emit events whenever something is done and use listeners to catch those events. If you want to go full on hipster-dev get your head around React or Vue, they have state management plugins that would help. Disclaimer: I'm totally biased towards Vue.

Hi @rag GSAP animations are frame independent. If it's recording at 30fps, you can slow your animation by half to get double the frames. But that's not exact. If you want 60fps, you will need to record your animation 1 frame at a time, like here. http://plnkr.co/edit/oZjPbgo9hvqwUYEV7RLi?p=preview

Hi @7linternational, Welcome to the GreenSock Forum. Yes, a CodePen will be very good and helpful ... Kind regards Mikel

Hi @smallio! The best questions are the newbie questions! How else would beginners benefit otherwise I think I get your question. To pass a callback inside a callback, you need to have a reference to the said callback to be nested. Looking at your code, I struggle a bit because it seems to me you're using jQuery, not a criticism... I don't use it and get very, very, very confused with it as it has a lot of functionality that I am unaware of. So, help me out if I write something here that's wrong or you're already aware of. Side comment, what are all those libraries you are loading in your pen? Do you need them all? Again, sorry if I am missing something, I'm just trying to predict behaviour based on the libraries. Anyhow, back to the theory. It should be something as simple as: Mind you, there are several other ways of doing this. They will vary depending how you want to structure your code, handle scope and whatever library you are using. ps: Nice transition.

This is kind of old but since I just started with a similar project, thought I'd chip in... In React, just put this below your imports & above your react component declaration: const T = TweenLite; // eslint-disable-line , and then in your component use it as T.to() ... etc. = only 1 eslint-disable line.

Oh, and the SplitText page and docs have been updated to mention that it isn't intended for use with SVG <text>.

Ha, we'll let you hang around a little longer Thanks for the update, I was just about to run some tests. This stuff happens all the time, even to me (but please don't tell anyone)