Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

3 Newbie

About jlo

  • Rank

Profile Information

  • Gender
  • Location
    Gold Coast, Australia
  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 d
  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
  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 defi
  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.con
  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, co
  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 late
  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 'prop