Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by soupking

  1. 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.
  2. 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!
  3. 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!
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. Hi Dipscom, Thanks for the response. I know, my post was a bit hit and run. I wish I could break things down swiftly but can't. Was just curious if somebody's run into this. What I have is more involved. That pen is great, thank you. but imagine the square has to zoom in and scale (width-wise) with the entire stage. Again, sorry I can't post anything, no time. Just wanted to see if this is conflict of approach was something anybody's run into. Thanks again for the response. Best, -soup
  9. Hi GS Community, I'm building a responsive ad. The first I've ever done before. It's been quite the rollercoaster, but I've hit a real surprising problem. I'm trying to animate a DIV tag that has CSS transforms applied to it in the stylesheet: <style> #intro_p1 img{ position: absolute; left: 50%; bottom: 0; -webkit-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); transform: translate(-50%, 0%); max-height:95%; } </style> <script type="text/javascript" src="_js/TweenMax.js"></script> TweenLite.to(intro_p1, 1, {alpha: 1, y:"50"}, 'frame1') It will alpha, but because these transforms are applied to it to make sure it stays stuc to the bottom of the screen regardless of size, when I try to applie GSAP using x/y it just disappears. So now I'm a bit "AHHH!!!" cuz I need this thing done tomorrow and I have a lot of %transforms% to make it work responsively by design and now am scrambling to sort out workarounds becase GSAP isn't working and is really conflicting with what's styled. Has anybody run into this, know why this is happening, and/or what I can/need to do? If you take the above code and use any arbitrary image you should see what I mean. The alpha works but it can't understand GSAP when CSS transforms are applied. Sorry I don't have a github setup, but I'm in a rush. Thanks for any suggestions anybody if you have them, appreciated!
  10. Hi GS folks, I just got done building an awful banner campaign. Actually, I'm still in it, and there's really no fault or any bad breath about the matter. It just...It's one of those that was a rolling rock that wound up in the wind and now we're finally hopefully kicking it out the door. So... This thing had four timers. Now, heh, maybe it was warranted, maybe not. But...One thing I questioned from this experience after the lovely mystery of watching banners for legths of time wondering if the damn timers are working is...would it be possible to track these thing to see if they're actually active? Like see them counting or not? Is that possible in native and if not could it be done? I've seen a lot of inspectors track CSS animation live. And GSAP has great TL capabilities. Is there something that exists to help this QA process or something that can be made? Cuz frankly, anybody who's had to watch and wait for timers realizes how lame, frustrating and (at times, no pun intended) inaccurate such a process can be. If anybody can help me smooth the timer QA troubleshoot going forward or help the community on this issue if I'm not missing something I think that'd help us get back to designing/building instead of watching time...which is kinda lame if you ask me. Thanks for reading,
  11. Ahhh, that makes sense. As far as I can tell it's working okay now. Was just a strange poster image glitch that somehow affected the video's visibility. A case of one of those "i don't know why it wasn't working but seems alright now so..." Thanks a bunch for going above and beyond helping me especially since I'm still heathen to the Codepen. I'll be sure to give it another go if I have any more questions.
  12. Hey Jonathan, I don't have any iframe tags in the page. What's more bizarre is I believe it's working. I'm not sure what to think at this point other than, heh, fine, great, stay. If I have more issues I'll try CodePen again. Thanks for the help!
  13. Update: Just for searchability sake I was wrong. Still trying to figure out why video keeps dropping in Safari when I re-size the window.
  14. Cool, that's good to know. What's funny is that this wasn't the fix. I think I found the problem though. I had a CSS tag referencing a poster BG that was a dead link from a template I used. I then also had a poster file in my HTML video tag markup. These both being active code conflicted with each other and some how the video disappeared and the poster JPG in the HTML markup took over. Not sure why Safari read it that way but that was the problem. I tried doing a codepen but couldn't figure out how to get the thing working on this one. I'll have to try working with something less complex starting out to get used to it I think. Thanks anyway Jonathan! Really appreciate it!
  15. Hey Jonathan, I am using GSAP which I understand uses JQuery-like stuff? Is their library included in GSAP or is there another script I need to pull to test that code? I'm currently importing the following: <script type="text/javascript" src="_scripts/js/greensock/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="_scripts/js/greensock/TweenMax.min.js"></script> <script type="text/javascript" src="js/greensock/easing/EasePack.min.js"></script> Should that do it? I have some additional JQuery scripts in a folder but I've never really used JQuery that much so I'm not sure what 's common? Do I need another script to run this? I am importing CSSPlugins and webkit can be affected by CSS. Wasn't sure if that was related or not. Thanks a bunch for the tip!
  16. Hi everybody, This really isn't a GS question but I couldn't find any currently popular HTML5 forums online. If anybody does, I'm all ears. I've got this situation that when I resize my browser window in Safari, the video disappears. What' odd is that it doesn't happen every time. Has anybody had this happen before? Thanks for reading?
  17. Excellent news. I won't forget that going forward. Thanks a bunch Carl.
  18. Hi everybody, I'm not entirely sure if this is a GSAP question or a html5/css in general but I have this reveal to my website using the GSAP and my content loads, then disappears, then fades back in. I need it to disappear from the gate so images and text aren't showing before the reveal. There's various ways of hiding content. I'm doing one right now and it's obviously not working very well. So I was wondering if there was a relatively standard way people hide content so this sort of thing doesn't happen? Does one technique work better than another? Is it the way my mark-up is laid out? If it helps, here's the link: axiom-media.com/__staging/2014 I'm aware of the crop mark as well, but need to figure this situation out before moving forward. In any case, thanks for reading.
  19. Ahhhh right. Got it. Heh, different from where I was coming from but I just learned what null variables are. Thanks Jack!
  20. Heya Jack, To be honest I didn't know there were null objects in this realm. First I've heard of them was in After Effects. I ended up answering my own question, and I'm pretty sure the answer is 'yes'. Like if I have a Tween command for a clip that's not on the stage (even though I'm not using canvas...I think) putting it's instance name in a TweenLite command will break it all. I'm guessing that's what you call a null?
  21. Hi Jack and friends, Hey, I've been going at troubleshooting the GSAP and I'm finding that when I add code for instances that aren't in the HTML markup that the whole thing seems to stop. Does the GSAP require that all coding have referenced instances to function? It seems that's the case.
  22. I think I figured it out. If not I'll use the Codeden app in the future for sure. Thanks Jack!
  23. Hi everybody, I'm trying to build rollover thumbnails. In doing so I have two lines of TweenLite.set(): TweenLite.set([img1, img2, img3, img4, img5, img6, img7, img8], {opacity:0}); TweenLite.set([img1_hover, img2_hover], {opacity:0}); For some reason the second line won't work unless the first line is commented out. I've tried various things to make both the thumbnail and the hover state invisible but for some reason it doesn't work unless the first line is omitted (even if I put the img1_hover instance in the first line??) Can anybody out there tell me why this happens or direct me to maybe a thumbnail rollover tutorial? I've been doing a lot of searching and haven't come up with much. Thanks for reading.