Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

jlo

Members
  • Posts

    23
  • Joined

  • Last visited

Everything posted by jlo

  1. jlo

    Responsive Animations

    Thanks Chrysto, that's high praise coming from you mate! Okay, will give percentToPixel a try, I've never heard of that handler, so thanks for that. That's a pretty nice and simple example too. Just thinking out loud, but won't I run into the same problem though, where after the browser's been resized it gets 'caught', so to speak, and needs to be refired or refreshed so as to recognise it's new width/height? Like for instance, if I click the button in your example, then drag the browser out to be a little larger, it's still staying at 40% of the original browser size I think, and does so if you continue clicking it.
  2. jlo

    Responsive Animations

    Hi Greensock guys, Know this topic has been covered a little in some other posts, was reading about using media queries and 'resize' functions here and here, but I wanted to double-check something with you in regards to responsive animations. I've just put together a quick landing page for my portfolio, found here (and big thanks to the GS guys for helping me nut out questions I had along the way with it), and I'm using an if/else statement after the $(document).ready to fire differently scaled animations depending on the browser width. I had put in a window resize event handler in my script but I noticed it was screwing with the animations, they would still be stuck on a particular width's animation even though it had resized. Plus, I was essentially just repeating the same code all over again to get it to work, was thinking there must be a better way to call responsive animations than this. So I'm guessing to make these kinds of responsive animations work we'd need to kill the currently running ones first right? And is there a better/cleaner way of doing this than just repeating functions over when a browser resizes, say for instance if I just made the if/else media queries a function of their own, then recalled that function when a resize fired? Apologies if this is actually simpler than I've figured, I just wanted to clarify this in case any other devs needed a simplified answer to this too, am finding myself having to do a lot of these responsive animations lately and I thought it would be wise to get a more definitive approach to it Thanks as always guys.
  3. Argh, don't worry, got it - just needed to set the object's visibility to hidden at the start of the timeline, so when it looped back around it was reset back to being unseen. Just inserted: t1.set("#object1, #object2", {visibility: "hidden"} ) ... into the first line of the timeline, that fixed it
  4. Ah, great, thanks Jamie. Implemented it, but I think I'm still doing something wrong... So my script looks like this now: var t1 = new TimelineMax(); t1.add( TweenMax.from("#object1", 1, { immediateRender: false, visibility: "visible", backgroundPosition: "500px 0px", ease: SteppedEase.config(5), repeat: 2, repeatDelay: -0.5, delay: 5} ) ); t1.add( TweenMax.from("#object2", 1, { immediateRender: false, visibility: "visible", backgroundPosition: "500px 0px", ease: SteppedEase.config(5), repeat: 4, repeatDelay: -0.5, delay: 5} ) ); t1.repeat(-1) ... and the 'immediateRender is definitely working - thanks for the heads-up on that too btw - but what it does now is: not show either object then play object1, after which it disappears then play object 2, after which it disappears then both objects appear on screen statically until the whole thing starts again each object remains onscreen statically until its animation starts again I tried adding something like: t1.to("#object1", 0.1, {visibility: "hidden"} ); t1.to("#object2", 0.1, {visibility: "hidden"} ); ... to the end of the timeline, just before the repeat but that didn't do the trick. Am I missing something really simple here?
  5. Alright Jamie, one last quick question (sorry ). What's the best way to make these Tweens in the timeline appear/disappear? What I mean specifically is, I've set the css of the objects involved with 'visibility:hidden' and then changed it back to visible in the GS timeline, but I've got a delay on them, and the objects are just sitting there statically until the delay time is up, then animating, if that's a clear enough description. So with something like this: var t12 = new TimelineMax(); t1.add( TweenMax.from("#object1", 1, { backgroundPosition: "500px 0px", ease: SteppedEase.config(5), repeat: 5, repeatDelay: -0.5, visibility: "visible", delay: 2} ) ); ... 'object1' just sits on screen, then after 2secs will animate. I'm trying to set it so the object doesn't appear until after 2secs, then disappears again off-screen once it's done. Am I better off putting a stagger in of some kind? Thanks in advance
  6. Got it, thanks Carl. And thanks for the clarification with the css strings Jamie, big help
  7. Ah, got it, that makes much more sense. Thanks Jamie
  8. Quick question: how would we set a repeat for a SteppedEase animation that's sitting inside a timeline? I noticed today that the repeat I had in this sample of code wasn't having any effect: var t1 = new TimelineMax(); t1.from("#object1", 5, { backgroundPosition: "500px 0px", ease:SteppedEase.config(5), repeat: 2, repeatDelay: -0.5 } ) t1.from("#object2", 5, { backgroundPosition: "500px 0px", ease:SteppedEase.config(5), repeat: 3, repeatDelay: -0.5 } ) Is there another way to declare the repeat, or would it be better off creating a set of functions that can set the repeat?
  9. Hey Jonathan, Thanks for the feedback also mate. I wasn't actually trying to mimic the Pen shown per se, just the effect, so stripped back alot of the CSS to just focus on the JS side of it. The sample I've had to work with on my side still has all the spans left in, I've just commented them out. Carl's solution is probably the simplest for this particular scenario, but I figured that since we're animating the border that's what I would initially focus on. Would that not still be a viable tactic? I assumed since we can animate css properties like borderStyle and borderLeft etc with GS, could we not also animate how that border appears? There must be some kind of default motion set to it, since it eases in from the left without any instruction, I just made the leap to thinking we could manipulate it further, perhaps just in an indirect way. I'm probably making it more complicated than necessary, just thinking out loud And hey Carl, with the addition/comment of the background-colour to the span group... /*give each border a background color of black in css so that you don't need to animate it*/ background-color:black; ... there is still a way to animate colours in there though right? Say for instance, if you wanted the line to start with one colour at 0 height and finish with a different colour at 200? I'm guessing adding something like: var tl = new TimelineLite(); tl.fromTo(".l1", 1, {height:0, color:#000}, {height:544, color:#fff}) or... var tl = new TimelineLite(); tl.fromTo(".l1", 1, {height:0, css{color:#000}}, {height:544, css{color:#fff}}) ... wouldn't really work would it? And cheers boys, your help is always well-appreciated.
  10. Bloody brilliant Carl! Great work, so short and simple. Cheers
  11. Hey again Greensock guys , I've got a brainteaser for y'all, hopefully it's an easy one. I did do a search around before asking, but the forum search won't include the word 'border' as a keyword, it's restricted, and Google only answered so much of what I needed to know. Okay, so I'm trying to recreate this pen from CSS to JS (GSAP): http://codepen.io/joelrodelo/pen/uHjvi Assumed it would be simple enough but it's proving trickier than I thought. I've been trying to do it with an image on a page, have a quick sample here for reference (you can thank me for the working image later ) : http://webslinger.com.au/dev/gs_border_animation/index.html Some of my attempts or JS fiddles are still in the scripts.js page, just commented out, but they're there for reference. I've just been starting with the left side of the image to begin with. The problem I run in to is that the border appears from the outside in, and any method I've tried to have the border appear from any other direction - either by 'y:' or 'height:' - has failed, moved the entire image with it, or nothing's happened at all (you can see some of my other attempts in the js file). I figured the most logical thing to do would be to nest it, to create a new Tween variable that adds the className and then animate the variable in a new TweenMax line, but I think I've gone wrong somewhere with that approach (read back through the documentation, can we only nest new Timeline's, not new TweenMax's?). Anyway, maybe someone's already figured out an approach to this and I've missed it, or maybe the solution's just too obvious for me to see, cause' surely it wouldn't come to having to actually draw a border line around the image would it? Appreciate any feedback in advance.
  12. jlo

    setInterval Animations

    Yeah I caught that one thanks Chrysto, cheers (and nice work with the easing on that Pen too Jamie, much smaller and simpler than other examples out there) Also, if it's worth anything, I've re-written the animation in just plain JS (using GSAP) as I've had to work with an absence of jQuery in my environment: var div = document.getElementById("menu_1"); TweenMax.to(div, 0.6, {backgroundPosition: "780px 0", ease:SteppedEase.config(6), repeat: -1, repeatDelay: -1 }); Thanks again guys.
  13. jlo

    setInterval Animations

    Don't worry, figured it out - added the repeatDelay method after the 'repeat: -1', set it to -1 as well and it continued to loop the animation seamlessly
  14. jlo

    setInterval Animations

    Hey Chrysto, using the shorter method you described above, do you know if there's a way to loop the animation seamlessly, without a pause at the end of it's 'frames'? I keep getting through my steps, then it stops to to think for a second, then it restarts the animation. Tried playing around with the repeat and getRatio method but didn't have any luck.
  15. jlo

    setInterval Animations

    Hey guys, thanks so much for the replies, and apologies for the delayed one of my own, had to urgently jump on to some other work. Jamie, thanks for the quick feedback, and you're right, the preloader is definitely a wise move, even with animations this small. Chrysto, you're the man - that's pretty much exactly what I was alredy doing in CSS, just using the steps sub-property and one long image much like a sprite-sheet to move the focus along at set durations. Was a lot easier, much prefer doing it that way, and the browser support is great, I'm just trying to learn to do it the 'proper' way I guess, in JS. And great pens too, perfect simple examples to use. I'm working on one at the moment, an alternate approach to calling multiple animations at once, will put up a link once I'm done. And Jonathan, thanks also for the info, but you knew I was joking, about APNG's, right?? It hasn't been supported by anything other than Firefox from the start, and I'm pretty sure it's been scrapped now too. It looked good at least... Thanks again for the help boys.
  16. Thanks for the great response Rodrigo, and sorry for the delayed reply, had to jump on to some other work. I totally get what you're saying, and yeah, in normal circumstances I'd be playing around with the css more. Unfortunately I didn't build it, and am not really in a spot to change it too much, am in a position where I don't want to step on another developer's toes (don't laugh). And yes, I do usually prefer animating from instances too, but I find it can get a little confusing when animating certain properties, like opacity i.e. trying to remember which one you set it to in your css file. Same as when you're using CSS animations and keyframes, and you typically set the fill mode to forwards. Now, I did manage to find a workaround. It doesn't actually solve the problem mind you, so yes, I'm cheating, but I found that when I added some easing - and certain types of easing in particular - it would override or 'delay' the mouseout, so there's no judder or stuttering effect each time you mouse over one of the sub-menu titles. I updated the second test above to show you what I mean, have a look here if you like: http://webslinger.com.au/GS_hover_test/test_2/index.html I know, it's not a proper solution, but it works Thank you for creating the example pen, very sporting of you. The JS seems pretty detailed for just a simple menu hover, but I really like what you've done with it, very robust. Thanks again
  17. Alright, another question Greensock Guys... Was having a look at the Served ping-pong site the other day, have a look at it here: http://www.served-mcr.com/ Great site, loving the animation in it. Noticed they're using TweenMax and Scrollorama among other scripts, nice. I was interested in the tiny background animations they've included. I created something very similar a while ago with CSS Animations and Keyframes, and in the spirit of cross-browser compatability I wanted to recreate it with JS. I've been hearing more and more lately about animated PNG's using this method (as opposed to an Animated PNG, or Firefox's APNG). I get how they're using setInterval to call an individual .png file every x second to create the illusion of an animation, which is pretty cool, and a huge time/file-size saver when compared to say using .gif's, but I haven't been brave enough yet to try and create something similar with the GSAP. If any of you guys have the time could I ask for any suggestions or examples of how this might be done with Greensock? I've included some makeshift assets for you to use, just five images of squiggly lines you could use to trigger through, if that makes it easier Appreciate any help you boys have. Cheers
  18. Hey there Greensock Guys, I've got a small brainteaser I could use some of your assistance with So I've got a site with a nav that is using good old CSS transitions to achive a hover effect. I've stripped it back and created a simple copy you can check here: http://webslinger.com.au/GS_hover_test/test_1/index.html So in an effort to make the animation accesible across the board (*ahemcough* for older IE browsers) I just tweaked the nav a little and used the GSAP to achieve the same thing: http://webslinger.com.au/GS_hover_test/test_2/index.html However when you move the mouse cursor from the menu header or its empty space on to an sub-menu title it's tripping the mouseout function, and there's a slight hiccup in height every time you move to a new list item. Now I know you typically run into this problem with hovers (as opposed to clicking) and I've managed to get around it for the most part, and I've tried a couple of different approaches - like putting a delay on the mouseout, so when you rollover a sub-menu title the hiccup essentially never happens - but haven't been successful. Tried to do a bit of digging and homework first, plenty on Flash/AS forums about this, but nothing I could find for JS, appreciate any input you boys can give. Cheers
  19. jlo

    Null Target Error

    Thanks for the feedback Jonathan, that clears it up a bit. I figured at the end of the day it was just better off using TweenMax - by the time you combine TweenLite, CSSPlugin and whatever else is needed for easing etc you've pretty much reached the same file size as TweenMax anyway, so all good. Jamie, I'm not sure how I did it either, definitely the results of some whacky experimentation, though magic would seem the most logical answer. From memory, it did work, but the result was somewhat degraded - text that I would have fly in from the right for example would leave a trail, and the animation wasn't very smooth (as opposed to running it properly in later versions with TweenMax). If you're genuinely curious I can recreate it for you . Just for reference, the end result of all my questioning above can be seen here (the intro spinning cup animation): http://www.theornateoracle.com (might have to do a little work on image size reduction/preloading or delay to get it load a little smoother, but happy with the result, so cheers ) Thanks again guys.
  20. jlo

    Null Target Error

    Ah - that makes more sense now, and thanks for explaining it So, dumb question, but are there only particular CSS properties that require the CSSPlugin to work, because I've been tweening objects using only TweenLite? From memory, they were only x/y movements, so 'left' or 'right, nothing like width or height - so would that mean that 'spatial' values are fine with just TweenLite, but 'visual' or stylistic values need extra help? [nb. I did read through the documentation this time , I just assumed that the CSSPlugin file 'kicked in', or TweenLite pulled it in, so long as it was present, but didn't necessarily need to be referenced. Apparently I was mistaken.] Just FYI, I'd been using this demo from a post a few months ago as reference, was assuming the same thing re CSSPlugin/other files, didn't even occur to me to swap out for TweenMax (well, it did, but was trying to be a tight-arse and save on file size space). Thanks again for the help!
  21. jlo

    Null Target Error

    Hahaa, no worries. Course', it might have helped if I read through the documentation in the first place and remembered to declare/run everything in the right order to begin with So, I just moved the script to the end of the body (since the original project files have a bunch of js sitting there anyway, jQuery etc), and the console's not reporting any error's, but now it's just..... doing nothing. It's not rotating, or executing (so it seems anyway). I'm completely stumped. What am I missing here? Am I still misplacing sections of the code? It's a real kicker, since I've actually already used GS a few times now to animate divs inside pages without any hassles, but this one's got me scratching my head. I updated the page in the same link I posted above, you can see the results there for reference.
  22. jlo

    Null Target Error

    Arh, gotchya - thanks so much for that, will give it a try now.
  23. jlo

    Null Target Error

    Hey GS guys, Been using the GS platform for a bit now, loving it, but lately I keep running into the "cannot Tween a null target" error, and for the life of me I can't find what's causing it. I've been trying to do a simple rotation on an image but it's stuck on this error. I created a new page to show what I mean, stripped back everything in the project to its basics so I could nut out the problem, here's a link: http://webslinger.com.au/greensock_test/index.html Apologies in advance if this has been answered already, I had a search through other posts and articles and I know this topic has been covered a little (mostly in AS forums though) but I haven't been able to find a solution as yet. Knowing my luck it'll be something really small and obvious too. Cheers, jlo
×