[Cascading Green Matrix-style Text Demo]

57 minutes ago, Shaun Gorneau said:

Found this using the search term "matrix code effect javascript"

 

 

 

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. 😕

 

[Cascading Green Matrix-style Text Demo]

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.

[Custom Bounce Ease?]

6 minutes ago, ZachSaucier said:

Oops, sorry about that. I made one change with one of the files to fix a bug on a different page and it affected the ease visualizer. Should be fixed now. Thanks for pointing that out!

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

[Custom Bounce Ease?]

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

[Custom Bounce Ease?]

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.

[Panel Masking]

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. 

 

See the Pen by (@) on CodePen

[Polite & Expanding Load Examples]

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

[Polite & Expanding Load Examples]

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.

 

 

[CDN links broken]

Just now, ZachSaucier said:

Ya, unfortunately Cloudfare is having some issues and has not been able to update their website in over a week now... Sorry about that, nothing we can do in terms of their website. Hopefully they'll get it fixed soon. 

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

[CDN links broken]

12 minutes ago, ZachSaucier said:

You can find them in the GSAP overview on the docs homepage: https://greensock.com/docs/

 

Or a checkbox section on the Installation page: https://greensock.com/docs/v3/Installation#cdn

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!

 

 

[CDN links broken]

19 minutes ago, Sahil said:

It isn't members only. I just copied link from docs, it works.

 

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.1/gsap.min.js

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?

[CDN links broken]

On 11/27/2019 at 10:50 PM, GreenSock said:

Thanks for pointing that out! It's fixed now (you may need to clear your cache).

 

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!

 

 

[Best way to hide/preload images and elements?]

17 hours ago, OSUblake said:

 But maybe this is good enough for your needs. Ignore my comment at the end the thread. That has to deal with frameworks.

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!!!

[Best way to hide/preload images and elements?]

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!

 

 

[Dynamic Ads using GSAP?]

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!

[Dynamic Ads using GSAP?]

Awesome, good to know. Thanks somnamblst!

[Dynamic Ads using GSAP?]

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.

 

 

 

[GSAP Displacement doesn't work in Safari]

On 3/9/2019 at 8:58 PM, GreenSock said:

 

Does that resolve things for you? 

 

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!!

[GSAP Displacement doesn't work in Safari]

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?

See the Pen WmOayW by soupking (@soupking) on CodePen

[Tween Override?]

47 minutes ago, Shaun Gorneau said:

If by trumping you mean "undoing all property changes done by other tweens", you're looking for `clearProps: "all"`.

 

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!

 

 

 

[Tween Override?]

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?

 

 

[TweenMax vs. TimelineMax in Ads - which is better?]

3 hours ago, GreenSock said:

Good question, @soupking. I'm actually quite shocked to hear about your experience. Timelines should absolutely make banner workflow WAY easier. I wonder if maybe you're just not quite understanding how they work or something. Like @Dipscom said, timelines are simply containers for your tweens. 

 

I chatted years back with a guy who was making CRAZY amounts of banners for an equally insane amount of money. And he didn't even know there was such a thing as TimelineLite or TimelineMax. He was doing everything with straight-up tweens which is okay, but once you grasp how timelines work it becomes quite clear that they'll solve quite a few challenges and smooth out workflow. Once I introduced him, he was hooked. He just never realized what they could do or how they could benefit his workflow. Perhaps you're in a similar boat. 

 

Have you read this article? https://css-tricks.com/writing-smarter-animation-code/

 

That one article could change your whole outlook. Seriously. Give it a very focused read and hopefully it'll all make sense. Let us know if that resolves things or if you still have some challenges where you think plain tweens are better. I literally can't imagine a scenario that'd be better with plain tweens if there is any amount of sequencing that you're trying to do. Zero. The article explains it all. I'm curious to hear back from you.

 

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!

 

 

 

 

[TweenMax vs. TimelineMax in Ads - which is better?]

4 hours ago, Shaun Gorneau said:

 

This sounds good on the surface, but with Tweens all of those delays are absolute (relative to zero). Depending on the number of tweens, that could spell trouble if an early Tween's timing or positioning (i.e. delay) needs to change. For example, let's say every Tween in this series needs to begin .25s before the previous Tween ends.

 

TweenMax.to( '#something-1' , 1 , {x: 100} , 0);
TweenMax.to( '#something-2' , 1 , {x: 100} , .75);   // prev delay + prev duration -.25
TweenMax.to( '#something-3' , 1 , {x: 100} , 1.5);   // prev delay + prev duration -.25
TweenMax.to( '#something-4' , 2 , {x: 100} , 2.25);  // prev delay + prev duration -.25
TweenMax.to( '#something-5' , 3 , {x: 100} , 4);     // prev delay + prev duration -.25

 

Now change the timing of the second Tween to 2.3 seconds (ugh ... yes simple math, but not fun)

 

Instead take

 

var tl = new TimelineMax();

tl.to( '#something-1' , 1 , {x: 100} , 0)
  .to( '#something-2' , 1 , {x: 100} , "-=.25")
  .to( '#something-3' , 1 , {x: 100} , "-=.25"
  .to( '#something-4' , 2 , {x: 100} , "-=.25")
  .to( '#something-5' , 3 , {x: 100} , "-=.25");

 

Now change the timing of the second Tween to 2.3 seconds

 

var tl = new TimelineMax();

tl.to( '#something-1' , 1 , {x: 100} , 0)
  .to( '#something-2' , 2.3 , {x: 100} , "-=.25")
  .to( '#something-3' , 1 , {x: 100} , "-=.25"
  .to( '#something-4' , 2 , {x: 100} , "-=.25")
  .to( '#something-5' , 3 , {x: 100} , "-=.25");

 

That's it, nothing else changes.

 

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. 

 

 

 

 

 

[TweenMax vs. TimelineMax in Ads - which is better?]

35 minutes ago, Dipscom said:

I also can't see why you would have to change all the relative positioning ("-=") of the elements in a timeline because the client asked you to "loop it". If anything, using TimelineMax would be simply adding "repeat:2" to the Timeline's constructor (Or however many times the animation was to repeat).

 

You got me curious to figure out how you would set your ads. Can you build a simple example? Then, I'd make recreate it myself and we could discuss the merits of each approach. Not in the sense of "let's see who does it better" but in a sense of "here's how I do it, let's get the best of both approaches".

 

Ps: To me, the timeline is a way to group and sequence related tweens.

 

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. 

 

 

 

 

[TweenMax vs. TimelineMax in Ads - which is better?]

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