soupking

Thanks guys, I'll come back to this for reference. I ended up doing a sliding div hack to make something mask from center. If you do this use px values only. % tend to make things jittery. That and I found a great bubbles demo from Jack I think. They were green so it was probably his. Can't find the link though. Thanks again!

Hi Greensock, I have a situation where I need to unmask an object. I don't know what's passing modern browser specs for this sort of thing. Does anybody have a basic codepen link on-hand for reference that shows a basic CSS mask DIV animate to reveal another DIV? I will later need to figure out how to make a round mask using SVG data, but for now I'd like to know what I can use just to reveal an image from center using a straight scaleX using GSAP or something like it. Thanks for any help.

Hi GSAPeople, I'm looking into building a random mosaic-like tile reveal of an image. I imagine one would put an animated array together and then put GSAP's random stagger for adjustment but was wondering if anybody had any examples they knew of for reference. If anybody knows of a sample to examine for this sort of thing I'd be stoked to check it out. Thanks for reading. :)

Hi OSUblake, This is...awesome. I keep looking at the "attr" attribute (redundant award) with awe. Like I read about it like a great control mechanism for objects but don't quite understand how to imply it. Is it kind of like I'm referencing a DIV, this DIV type has it's own attributes. As long as they fall under an API umbrella I can pretty much just "quote" it in to control it. Is that right? Like, for a general IMG, I could stretch the image by width: .to("#imageInQuestion", 4, { attr: { width: 100 } Is that kind of the idea? If so, I might've not found what I was looking for because #turbwave had no scale. Again, freakin' luddite with SVG. Thanks a bunch OSUblake, I'm off to the races, big help.

There's really nothing on this. Wow, I can't find any info on making displacement maps go from 0 (zero) displacement to 100 or vice versa. Is there currently no way to do this now? I'm looking for attributes to alter but there's nothing to sample. I'm seeing displacement cycling, but nothing that ramps it's wavy distortion from one value to another. Is there an attribute I should alter for this? I can't seem to find study on this anywhere.

Hey Blake, I saw that one, man. Way cool, but is there way to get that displacement to stop flush or ease into being without distortion or being displaced? Sorry if that's kind of a lazy question. I really just don't have a very good grasp of SVG or canvas anything. Not sure what property that would possibly involve. Is achieving something like this effect to a flat no-distortion stand-still possible? Thanks for the response!

Hi GS folks, I have a banner animation where I want the BG to reveal like a flag or water...even displacement reveal that goes still in 5 seconds. I don't really know that much about SVG. Can anybody tell me where the heck I should start, or have an example that I could examine? Much obliged to any helpers out there.

Cool, good to know. Most of what I work with in libraries is pre-compiled so it's hard to tell at what point objects are affected (even if I were that smart to diagnose it). I'll try to make that delineation when structuring code. Thanks, Jack!

Well, I'm exploring jQuery and what it provides. ':animated' is a selector extension (to see if animating) of their API and was wondering if that would effect GSAP animations from a DOM manipulation approach. You make a good point though, why not just suspend an animation within it's own library vocab. I don't have a specific scenario. Considering that jQuery and GSAP are both CSS selectors for the most part (right?) it's probably akin to me asking whether I should go left or right to get to the same result. Mostly curious is all I suppose. Thanks for responding.

Hi Greensock, I'm diving into jQuery and was curious if it's selector :animated and such will scope GSAP tweening. Is that true/possible?

Yeah, I've been looking at it from a number of angles the past few days and I'm...Heh, it's about a ghostly as referencing Xpath data in a Flash site. I don't have the ability to contact the engineer who put the framework together so I've got to find a way to make this one stick without saying, "please scroll up to view". Given the nature of it's DIV complexity and dynamic nature of using JQuery or whatever to generate the main ut_container DIV on the fly which is wrapped up in JS file that amounts to sawdust. I'm going to have to resort to a band-aid or potentially a video demo. It works on everything else thought so it'd be a pity to not just show the unit as-is. However, it's a pretty complex little unit. The main files are: http://axiom-media.com/__portfolio/_rwd/02/mobile.html and: http://axiom-media.com/__portfolio/_rwd/02/creative/index.html They pretty much behave as the iFrame container file and the index for the ad build/animation etc. I really think it's too complex to solve without the source creator, but if there's a script that can tell the scrollbar to "hey, keep sliding up!", that'd be my easiest fix. Thanks for reading, Jack.

Hi Fellow Greensocks, I have a situation where I have a responsive rich media unit that inadvertently pushes the page down with the unit staying at the top (above and out of sight), so you have to scroll back up to see it. It didn't always do that and it only happens in Chrome (Desktop). It's older and I think Chrome updated their DOM model somehow. Now my sample is funky (Must view in Chrome-Desktop for issue): http://axiom-media.com/__portfolio/_rwd/02/mobile.html Again, sorry for no CodePen. This issue is housed in a rather complex Page/Div framework that generates a DIV dynamically. In addition to that it's controlled (I think) by a very lengthy minimized JS. Even when unminified it looks like Harvard Calculus. There just isn't a way for me to replicate this challenge in a vacuum. So, that being the case, I'm getting out cigarettes and duct tape thinking...Create a document condition (if browser == Chrome, then..) Make the scroller move persistently back up inversely against the pushdown motion until complete. As it doesn't happen in subsequent user initiations, only onLoad. So I guess, bottom line, my question is there any way to scroll a page dynamically with GSAP code, without physical scrolling, so I can counteract what the page is doing on load? I can't find a way to kill the scrolling motion with overflow:hidden as the DOM structure is pretty thick and generated dynamically. So if I can't stop it, I figure I might be able to force it back with scrolling properties of some kind. If anybody can suggest anything or has any questions, I'm all ears. As always, thanks for reading.

Sounds about right from what I remember. I will take a look. Thanks Carl!

Ah! Found it -- force3D:true I guess it was 3Dish. I don't think I was using 3D transforms at the time, but it helped steady the animation. I found it in a LinkedIn messaging board. Just remember I shared it with a previous co-worker. Glad I did. It's not in the CSS reference I found online. You've probably used it before but if not, feel free to give it a go. I can't remember what I was working on at the time but it fixed some glitchy wonkiness were were trying to solve at the time. Best,

It might. I haven't seen 'will-change' before though. That's new to me. It was some kind of rendering setting or something similar to like cache bitmap or the setting in flash that made images tween better. It wasn't like a 'quality:great' kind of setting or anything. It had more to do with image processing but I can't for the life of me remember what it was. It helped in a pinch for something I was doing at an agency like 2 years ago. I've been away from work for over a year now and just don't remember. It might have had something to do with 3D transition, but I'm thinking it was more over arching that specifically that. Thanks for the response.

Hi Greensock, This is more likely a CSS question than a GSAP one, but... I once used a CSS attribute method that made certain animations smoother. The thing is I can't remember the darn name. It wasn't so much an alias setting but had to do with something else to make animation less fidgety. Does anybody out there know what I'm talking about? I have some animations with borders and I'd like to firm them up. I've been trying to find it, but can't really remember what terms I would to search. It might have something to do with WebGL. Still looking...found 'image-rendering'. But that wasn't it either. I remember it being very off/on. Thanks for reading and for any possible feedback.

Yes! Perfect! Thank you so much!

Hi everybody, This is a general question with no codepen. What I want to do is this: TweenMax.from(img1, .25, {brightness: 3}); I found this codepen, it's like an object in an object in an array..???...: Plus, it's using JQuery. Do I have to do things this way? And do I have to use JQuery (sans rollover)? Assigning a brightness value to the DIV value I'm assigning the brightness values to is confusing. I don't mind being redundant starting out, but this is hard to grasp all bundled at once. Is there a more dumbed down basic example just to tween brightness out there? Peeling this one apart is kind of tricky. Thanks for reading.

Awesome, will do! Go OSU!

Ah! Glad I asked. Again, rusty. That's why I was having object type declare issues. Will check out the CSS filters, not sure how they perform yet with browsers, but they should eventually come around I would think. Thanks Blake!

I'm just referencing a <div> containing an <img>. That's okay, right? It sounds like the plugin is loading okay then. I must not be defining something properly on the stage is my guess. I'll take another round at it in a vacuum. Maybe that will help clarify the break in the chain. Thanks!

Sorry for not posting a CodePen everybody. It's been literally years since I've been coding and am now trying to get back in the swing of things. I'm trying to run a basic test using PixiPlugin, all JS scripts are getting pulled properly but I keep running into this error: Uncaught TypeError: Cannot read property 'DisplayObject' of undefined at Object.init [as _onInitTween] (PixiPlugin.js:391) at TweenMax.p._initProps (TweenMax.js:7407) at TweenMax.p._init (TweenMax.js:7366) at TweenMax.p.render (TweenMax.js:257) at TimelineLite.p.render (TimelineLite.js:494) at Object.p.render (TweenMax.js:6881) at Object.Animation._updateRoot.TweenLite.render (TweenMax.js:7150) at Object.p.dispatchEvent (TweenMax.js:6291) at _tick (TweenMax.js:6343) What actually needs to be defined? before writing tween scripts with this plugin? It's hard to tell from examples what is part of the demonstration and what the sample requires. Thanks for any heads up with this. Would love to just do a basic photo brightness/contrast fade.

Hi Everybody, I'm trying to find a particle emitter/generator in HTML5 that's relatively easy to use. I found Pixi and Pixi Particles but the Pixi library that requires loading is heavy for advertising. Is there something similar out there available that's relatively easy to use? I know Greensock doesn't really do particle engine builds or anything , but I thought this forum isn't a bad place to ask. Im not looking for anything too fancy just something with count, speed/gravity, life, and image/array loading. Does anybody use something that's easy to modify out there? Thanks for any feedback.

Hey Dipscom, That xPercent/yPercent thing looks really cool. My project's too far in one direction to use it, but I'll definitely think about it for future ones. Very helpful, thanks! I actually found a workaround for my situation, it's not ideal, but it'll get the job done. I'd try and share what I did to fix it but it would require quite a lot of backlog and explaining it would probably confuse more than aide anybody. Awesome though, thanks again.

I think that's the problem. GSAP doesn't have any responsive x/y issues with any of the CSS other than the... -webkit-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); transform: translate(-50%, 0%); ...portion. For a number of slides combining transforms like this against GSAP tweening is like mixing fish with ice cream. Just fails. I've had some more time to look at it and I'm hoping now that my GSAP has thrown the CSS out of whack that I can hopefully re-position it using GSAP and just keep things 'DOM savvy' by keep the elements responsively relative to the DIV they're in. Thanks again for the help.