jlo
jlo's Achievements
3
Reputation
-
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.
-
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.
-
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
-
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?
-
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
-
Got it, thanks Carl. And thanks for the clarification with the css strings Jamie, big help
-
Ah, got it, that makes much more sense. Thanks Jamie
-
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?
-
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.
-
Bloody brilliant Carl! Great work, so short and simple. Cheers
-
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.
-
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.
-
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
-
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.
-
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.
- 13 replies
-
- 1
-
-
- setinterval
- animation
- (and 3 more)
