rgfx

Probably don't understand something. But I don't want to target every timeline, as I have many timelines starting and stopping as you scroll down the page. Also discovered that exportRoot() with my code timelines[0].progress(0.3); seems to prevent my "tlTest" timeline from firing until the "timelines" is complete. Any clue?

Hi, I get a "timelines.pause is not a function" when I try to target an array of timelines all at once. I know I can target them like so. timelines[0].pause(); timelines[1].pause(); but I would like to do something like this. timelines.pause(); like always, not a GSAP issue rather my lack of js knowledge So grateful to you guys.

@OSUblake I actually bookmarked that canvas thread some time ago. There is some great information there, thank you for that. Looking -> forward to <-reverse engineering all of it

@OSUblake Haha, That came our wrong, felt like I just got CNN'ed In my following sentence, I tried to say. Its good to know how the frameworks work, so when something breaks... or you need to do something new you can. At any rate, I'm the last one that can make any opinions on anything programming related, so shame on me Read that people are beginning to play around with Assembly, as it faster, pretty hardcore. Will WebAssembly overtake JavaScript in Web Development? I started learning VUE decided to go back to fundamentals first. I never thought about learning how to make games. Great idea. Started messing around with UE4 just for arch-viz, industrial design and VR. Made some simple buttons for changing materials. It's all written in C++. I kinda like it. I'm really into interactivity, but I want to stick to web. Perhaps I should start learning some Canvas?

@Dipscom I don't think you would have much to gain working on Todo app. But if you're serious... https://watchandcode.com/ Maybe you can skip the last chapters and pick something up. I like that he kinda knocks people that depend on frameworks. Teaches you the fundamentals so you can learn how frameworks work rather than become dependant on them. Slowing making my way through, 50% done. Rather experiment with GSAP as am easily amused by objects moving across the screen.

LOL, @PointC @Dipscom Thanks so much, you wouldn't believe how many things I tried and how many forum posts I read before I asked for help. I probably can never find anything because my problems are so obvious to someone that knows what they are doing. Thanks to you guys am slowing inching my way forward I could probably could learn a lot making a Todo list like everyone else, but where is the fun that

Doing some weekend GSAP exercises. Shouldn't clearProps reset rotation information allowing my rotation be random on each repeat? Curious to what am doing wrong.

Ok, figured it out. It was indeed changing the variable, but only on resize. Not on browser load. The fix was adding another matchMedia to run on browser load. if (window.matchMedia("(min-width: 900px)").matches) { scaleNavBg = 17; } else { scaleNavBg = 25; } Sorry about that. Thanks.

@OSUblake Yup, I remember your help with this as well, it was were I learned how case works. I was just using one breakpoint, so was keeping it really simple. Any unforeseen issues with my method? it's for navigation system but am using "scale" to animate the background of the nav. The element changes size depending on breakpoint. Hence scale has to change as well. Here is just a snippet of menu system. Maybe this will give you better idea. My attempts to simplify via codepen have been failing lately. function menuClose() { menuBounceOut(); menuStaggerClose(); burgerAnimation.reverse(); } var scaleNavBg = 25, navBg = document.querySelector(".nav-bg"); TweenMax.set(navBg, { xPercent: -100 }); function menuBounceIn() { TweenMax.to(navBg, 0.5, { scale: scaleNavBg, ease: Back.easeInOut }); } function menuBounceOut() { TweenMax.to(navBg, 0.5, { delay: 0.3, scale: 1, ease: Back.easeInOut }); } window.matchMedia("(min-width: 900px)").addListener(function(mm) { if (mm.matches || navToggle.hasClass("open")) { menuClose(); } if (!mm.matches) { scaleNavBg = 25; } });

Playing with match media I can't seem to change a global variable. I read that you need to make a function with variable inside the function then call the function globally. If I do that from the match media I get "function undefined". Yes, I know I can just create different tweens and just add it to match media function. But I would like to know how to pass variables around. This is just a simplified example. Another simple one I know, but I read like 7 sites with no avail. Must be wording it wrong. Thanks

@OSUblake Using Webpackbin is a great way to get started, thanks for that. I read an article the other day about using straight NPM makes sense. However, that's too much for me at the moment. @Dipscom Haha, that's why I liked the look of code so much, all that syntactic suger! I didn't even realize you were using es6, Blake was too late Syntactic Diabetes set in and now I have to use Babel for the rest of my life

@OSUblake That's what I thought, back to the basics. Been using Gulp and Browser-sync for a long time. I was kinda wondering if you use Webpack as I haven't made the switch yet. Would have loved brunch.io back in the day, I spent what seemed like weeks getting all my automation set. Brunch, unfortunately, doesn't have an equivalent to svg-store(svg sprite sheets and optimization) or Notify (notification if you broke something). I love optimization tools. Sometimes I wonder if am actually saving time or just being a nerd

@OSUblake No am not using Babel, thanks for the catch. I would have never been able to bebug that. Should I be using Babel? Should I get my head around vanilla js first or just embrace es5/6. Webpack2 or Gulp :)

Ah yes, makes sense. Thanks for another great explanation Teaching certainly is a great way to learn, and good karma boost as well. I'd like to think all my off the wall questions contribute in a way. I hope to join the ranks someday.

@Dipscom If you ever need my help with something design related I don't mind helping you one bit, even though your joking, am serious. My specialties are branding and UX. The buttons you just helped me with get me one step closer to finishing my portfolio site. I would like to get you opinion on it when am done. You're missing a semicolon on the first global var, meaning you I bet you didn't even press run once, and it almost worked! I find myself hitting run after everything I type I was thinking that each button somehow didn't need to target the same child. That it could be created in the for each loop somehow and be passed to the buttons through the function parameter, totally hung me up. IF that's the way you do it, then so be it. Thanks pal.

@Dipscom Spent many of hours trying to get my head around "foreach" function you made. Having trouble animating elements inside the parent. Think I'll stop punishing myself. My brain is starting to hurt. I like how you kept everything in a separate function, it just seems so right. Also trying to ween myself off the dependence of Jquery. Anyho, trying animate the element with the class "inside". Inside the "outside" element. I got it working by creating a variable inside each button function. But I think its better idea just using the "foreach" to "index?" the element then pass it to buttons somehow. My project file has me animating two elements so I cant use .childern or anything. Need to target a specific class. If you could be so kind to help a designer turned wannabe programmer out. Thanks

@Dipscom Now that you changed up the pen I don't see any change in "smoothness" either. Bummer about your yoyoEase experiment, I still learned a lot from it. Had me look up why/when to use Const, and how you laid out that function loop that uses setAttriute and splice, pretty cool. Thanks for taking the time to explaining things to me Truely appreciated

@Dipscom If you tell me making tween on buttons is cheap that is good news, I figured it would be better to put things in timelines. However... 1. You sped duration on bounce times making the bounce not quite right 2. if you notice the mouseleave is actually not using bounce.easeIn. It should of worked, I might be trippin. Please look at my pen as reference . 3. I could be off base on this as well, but it seems less smooth than my pen even after I change the duration. Curious to what you come up with using YoYo. Still trying to up my VanillaJs game/coding game. Wish I could explain myself better. But if I put a timeline into a "for each loop" and make it as an array am I just multiply the amount of timelines waiting for an event? Is this terribly inefficient? I would be all about using separate tweens for each button event but I want to sure from a performance perspective first. I also like the idea of using less code, even though am still a total newb and probably shouldn't be concerned

My codepen is a stripped down version of what am really trying to achieve. But I think it will serve its purpose. I find myself always wanting to update the ease on a reverse. Sometimes using multiple elements inside a timeline. Note: tween1 and tween2 are actually tweening two separate elements in the real project am working on. In this case: 3 buttons sample 1. MouseEnter - Button Scales Up twice using "ease: Bounce.easeOut" 2. MouseLeave - Button Scale down twice using "ease: Bounce.easeIn" If you notice UpdateTo only works on the first button you touch. Thanks.

@DipscomI was going to mention yoyoEase, your telling me it not just for yoyo? Also tween1 and tween2 only update on the first mouse event since it not "in the array" not sure how to word it, but you know what am mean

Hi, Once again a problem with my lack of javascript understanding rather then GSAP issue am sure. In previous messages, I was shown how to add Tweenmax tweens inside a timeline so I use updateTo and still use a timeline. Thinking I could just do something like tween1[i] = TweenMax.to(item, 1, { scale: 1.5, ease: Bounce.easeOut }); but I get "a Unexpected token [" error. On mouse event how do I updateTo on tween1 and tween2 for each button? Also when trying to target tween1 and tween2 using the variable "updateAni" but getting updateAni.updateTo is not a function What am doing wrong? Thanks for your help as always.

Without GSAP

Ok, I get it. Thanks.

@Carl Still struggling pal, as mentioned before my staggers are in long timelines. Can I do this without creating separate timelines? Like so?

Sweet! thanks man,