soupking

Thanks. That's gorgeous, but I think I totally just posted a misleading topic. I need something that shuffles through letters then stops at a given word. I actually don't need all the green streaming effects. Not sure what the search would be for that either, though. ?

Hey GS, Does anybody know where to find a similar sort of demo online? I do a search and matrix for CSS keeps coming up. I can't get a good search with the term 'matrix'. I guess it's too outdated.

Awesome!! I found a bug!! You're welcome, thanks for the assist you guys! :D

Yes!!!....But it doesn't work. None of the buttons click. ?? It's stuck on Power2 and nothing budges.

Hi GS, I'm looking everywhere for the visualizer or something that allows me to adjust, copy/paste a bezier tween of some kind. Is that available at all? I can't find anything anywhere.

Hi GS, (and Happy New Year!) Do I have this all wrong or is the proper way to unmask an expanding panel is to shift the container div 100px left while shifting the underlaying contents -100px the other direction? Is that how people animate an expansion? I haven't done this since the Flash days and I can't post a CodePen as the code I have is really involved and wouldn't translate. I feel like I'm doing a whole lot of plus/minus work with a number of elements and before I keep getting this straight would like to know if this is a good use of time and/or if somebody might have an example of what they'e done. Thanks so much for your time.

Awesome, thanks for the full demo. That'll definitely help me approach Google's docs and build process for sure.

Hi GS, I need to build a video banner, both polite and expanding. I've done this a bazillion times in the Flash days (Pointroll, Sizmek, etc.) and I have a really solid understanding of H5/CSS/JS (both fixed and responsive) but I still don't have a really concrete grasp of how this should be structured for traffic and vendor implementation. I know I can use Google Web Designer, but I'm really a big fan of vanilla JS and doing things from scratch. Can anybody help direct me to some basic examples of polite loads and/or expanding banners. Also, anything that contains video would be awesome. If anybody has some samples of code to share in this arena I'd be grateful. Thanks for reading.

No worries, just wanted to let you know. Thx!

Ah, seen now. I was linking to the CDN in the paragraph of GSAP 3 Overview, it's still old: https://cdnjs.com/libraries/gsap Thanks Zach!

Cool, looks like I was trying to download the beta. I still can' find the CDN link in Docs though. Didn't there used to be like a menu drop-down or something?

Link still broken. I'm trying his link above as I couldn't find a CDN anywhere for the GSAP 3 update (or earlier versions either for that matter). Wasn't sure if GSAP 3 was members only or not. Thanks!

This is perfect. My content rarely exceed 200kb or so. I don't need (and don't know why people use) some sophisticated preloader. I just want the security that my clients won't see their content plop on raggedly. So THAT'S what autoAlpha is for. Cool, cool, cool. I have been dealing with that pesky "from Zero" issue with alpha for as long as I can remember. Just never had time to get around to asking about it. Just wrote a bunch of 5-minute hacks in CSS. This is one of those HowTo's that is a cornerstone to getting stuff done. There's myriad ways to getting this done but sometimes doing it in a direct fashion rather than a longstanding workaround is really nice. This is one of those instances. Thanks OSUBlake!!!

Hi Greensock (and happy turkey day!), This is kind of a base question (and something I might already know the answer to) but I want to make sure that I have things sorted out to the best of my ability. What is the best (and lightest) way to hide/preload elements? I work in banners and rich media so stuff like jQuery is out of the question. I typically set all elements to .hide and then just alpha them back into sight as animated, but is there a better or more common practice that's used? My method works but it's kind of stubborn with some from/to tweening in trying to do things that way. So if there's a small loader function/library that frames() things in a loading fashion that would be great. Thanks in advance for any feedback!

I had no idea, that totally revamps my opinion of GWD. I'll have to check that out. Those dynamic features sound pretty useful as well, especially since they rely on versioning/testing and are many are probably pretty small. Thanks!

Awesome, good to know. Thanks somnamblst!

Hi GS, This is kind of a roundabout question. It has nothing to do with animation but affects my ability to build animate ads, so I thought I'd ask you guys... Google has all these bundled ad types and one of their advantages is using dynamic data for ads. I personally do not like animate using GWD. I find it primitive, clunky and restraining. I'd much rather use Adobe or GSAP to animate content. So I have this carousel ad that a client wants and the marketing team is handing me this panorama ad. My perspective is I can build a better ad using Swiper and GSAP, but they want dynamic data. Is there a relative open-source alternative that I can utilize or introduce as a dynamic data option so I don't have to lean on Google as a creative resource? Thanks for reading.

Yes!! More than I was hoping for. I never would have found that syntax error. I'm a real dunce with SVG and try to find alternatives any way I can, but with displacement...there's just no way around it. I also had no idea I was using a borderline deprecated version of GSAP, I'll switch that out asap. Thanks so much Jack!!

Hi everybody, Full disclaimer, this is my first code pen so that might be the problem. I also don't know how to inspect in Safari. I typically do all that in Chrome, but it's not throwing any errors. I haven't the foggiest why it's not working. Is there something obvious I'm missing?

Hey guys, thanks for the response. Y'all are great as always. You know, I figured out something where I made a duplicate of the button I wanted to sustain after the first loop. That seemed to do the trick. I'm not quite sure how one would use a conditional override in Timeline other than overwrite:true, but thought I'd ask. Thanks anyway!

Hi Everybody, Is there a command of some kind that I can assign a tween to an element and it just trumps all other tweens? Like my scenario is I have a media unit where it loops with a button. The first time around the button doesn't show up until the end of the sequence. But every other loop it stays there the whole time no matter what it's told to do down the timeline. Is there a command of attribute in the API that does that?

I think a large part of my misunderstanding is just naive ignorance. I just figured there has to be some significant reason why people are putting themselves through this operational syntax of animating. I'm not getting it so I figured I'd just ask as with banners keeping things simple and stupid is kind of it's own form of methodology and survival. I fixed something with the same banner set later that night and I'm not sure what was wrong or what I did to fix it. But I'm glad it just worked and could pass QA. I think running into those late night scenarios keeps people like me primitive and liking it that way. Kind of the same way the dishwasher repairmen like the older models of dishwashers because there's less to mess with. That doesn't necessarily mean we should dodge electronics. I have to work the remainder of the night but I will MOS DEF check out that article tomorrow sometime as it sounds like I need to upgrade my skills but still do it in a not an on-the-clock by-the-seat-of-my-pants fashion (which isn't always fun . Thanks Jack!

Now THAT makes a ton of sense. I see your point. I'm glad I asked as I wasn't familiar with Timeline and that it was capable of eliminating arbitrary 'magic' values. That definitely makes me want to use Timeline if I'm templating. I'd then take things a step further if possible and then make var quick = "-=.25"; if possible somehow then make a few for slower times for header declare options. My conflict with Timeline remaining still is understanding other people's nested timelines. That always makes me stumble but I'm guessing reading that sort of thing becomes more legible with time. Thanks for clarifying the reasoning. I didn't know that's what I was looking for but that's one aspect that sure explains the methodology as to why one would 'structure up' for standard banners and not just keep coding raw.

Hi Dipscom, Sorry, I kind of lumped two separate instances in one situation. Didn't intend to do that. The coding I was working on had (from what I gather online) syntax that wasn't the best. You should in essence be able to just add repeat inline at the initiating command, but alas it didn't work. Soooo I had to tinker. As it turns out just out of pure luck I landed on a greensock thread where Jack was explaining that in nesting timelines you shouldn't put function() when nesting a timeline: t1.add( function(){ timeline(); }, "-=0.25"); That you should instead do: t1.add( timeline(), "-=0.25"); I removed the function() part and added return t1 to all the functions. THAT fixed it but now the whole timeline went really slow sequentially and I had to re-stitch the whole thing to sync back up again. Furthermore the nested timelines (for whatever reason) has all these -= pre-zero timeline starting points against other delays in the actual main timeline. So 50-60 refreshes later guessing where the heck everything is starting and stopping I'm finally back to where I needed to be...with a loop. So I'm just like...Seriously, guy? If I used TweenMax I could see all the delays on the right-hand side and have no question of delay. Granted, one can get themselves into more trouble with timeline vs. tweenmax and editing somebody else's work, no matter the syntax etiquette, would suggest that TimelineMax is simply more powerful and thusly one can naturally get into more trouble. Even if it's a bit Kerouac scroll using TweenMax with maybe some dividing comment lines this would have been a lot easier to edit. I don't mean to single this person's coding out. It's just that I run into this sort of thing in varying degree when having to edit 3rd party coders last minute. If it weren't for Jack's response in that blog I'm not sure I could've fixed it. I was lucky, otherwise I would've had to re-animate the whole thing cuz I'm just not that timeline savvy. I don't actually have a way of setting ads yet as I mostly work in Animate these days. The company I'm working for is interested in templating their inventory as they've taken on a lot more ads. So naturally with templating I'm headed to a hand-coded approach. When hand coding I've mostly worked from previous campaign pages and just re-edit them to suit. My first was using SCSS and vector data which was NUTS, but have since then simplified things. Since I'm having to adhere to a 'way' or main approach of coding now because of that company change, I guess that's why I'm asking about advantages vs. shortcomings.

Okay, so I've worked in banners, rich media, and now at some length responsive media since Macromedia Flash was purchased by Adobe. For me, Greensock has been here the whole way through providing animators/developers with what used to be called a one-frame animation, and now hand-coded, option for animating stage elements for online media. I work predominantly in online advertising which involves a plethora of smaller and at times potentially robust content for shorter brief life cycles or lengths of time. I've looked and modified a number of other coders work involving online ads and they vary quite a bit. Some use greensock, some don't Some use spritesheets, some don't Some use precompiled code, most don't these days (as at 200k it's a little overkill) With regards to GSAP I'm finding most developers use TimelineMax. Now...I don't entirely understand it. In fact when I receive another coders work and find they used nested timelines that for whatever reason don't behave well when the client asks if I can "loop it", it becomes a giant headache of having to re-stitch and refresh multi-layered and negative "-=" values (that are rather nebulous to quantify) dozens of times with elements hiding somewhere within or around a 300x250 pixel window. If this coder just used TweenMax and coded this same animation in 20 lines of code...Boom! Easy to read, easy to write. There's typically like 8 elements within any given ad. Why all the nested functions and sophistication guys/gals? Are there major advantages to Timeline that I'm missing? I keep finding myself learning and forgetting the use of this form of development. Granted, I'm more of a software guy and think coding for the sake of coding redundant and just plain unnecessary. The idea of bundling 20 lines of code just seems like more work. Like, I dig organization too, but...in terms of language and page translation, all TimelineMax has really introduced to me from other developers is more ropes to tie-untie. Granted, I understand the use of timeline in a way of more-a-less "arraying" elements (for lack of better wording) into one cohesive timeframe. But when deadlines are riding hot, and this ad that's breathing down my neck is only going to be around for 30 days or so. Why use timeline and not just fire 10-20 lines of plain ol' TweenMax? Is TweenMax just a primitive way of coding all together? Online media doesn't get much smaller or shorter lived than ads. I'm wrestling with my own development and trying to determine if I should really embark on embracing this TimelineMax thing once and for all or if it really is just preference. I did all I could to finally learn AS3 and that was a huge unnecessary use of time. Most of the work I come across could just as easily animated without loading timelines into other timelines. Know what I mean? Maybe I'm just a simpleton (a new design pattern, har har), but I just don't fully understand the emphasis for using TimelineMax and was wondering what other people's experiences were. Thanks for reading! :D