Jump to content
Search Community

ohem last won the day on April 23 2017

ohem had the most liked content!

ohem

Members
  • Posts

    383
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by ohem

  1. Hi, I have some text which I'm vertically centering using 

     

      top: 50%;
      transform: translateY(-50%);

    I figured it would be better to set it using GSAP to avoid prefixes & have it work cross-browser.  So I switched to this: 

    .set(".headline", {top: "50%", transform: "translateY(-50%)"})

     

    While it works great in Chrome, for some reason it does not set the alignment as expected in Firefox.  Is there a way to fix this, or should just I do this part in the CSS?

     

    Here's a simplified example: 

     

    Any suggestions are appreciated.

    See the Pen yLOVEmE by ohem (@ohem) on CodePen

  2. It's been a while since I used GSAP, but I'm using it again for a current project.

     

    I've been using some variation of the same button rollover animation/reverse code for years, so I updated that for GSAP 3 and added it to my project.  Everything works fine in Chrome, but in Firefox (on a Mac), on mouseout, the button's background color disappears instead of changing back to its original color.  I put together a simplified example on Codepen here: 

     

    Does anyone know how I can fix this?  Any help would be much appreciated!

     

    See the Pen WNwNaMx by ohem (@ohem) on CodePen

  3. 40 minutes ago, cartimundi said:

    I published it now, in a zip...its that enough?

    https://we.tl/t-xApbIa2HaK

     

    I didn't animate the <span> because it didn't work

    the gsap with the images worked...and I did the same for the <span> without result

     

    as you can see...I'm still a newbie trying to get into the code world ;-)

     

    FYI you should get rid of the existing GWD timeline animation before trying to animate with GSAP; otherwise GSAP will be fighting with the existing CSS and you might run into weird conflicts (plus it's pretty messy to edit).

     

    As Jack mentioned, <span> elements are inline elements, so transforms won't work on them, but you could set them to display:inline-block to animate with transforms.  Or why not just use <p> instead of <span> for your text?

     

    • Like 1
  4. Hi everyone, I was just curious how most freelancers decide how much to charge.

     

    I often see the advice to charge flat project-based (or deliverable-based) rates, and it makes sense.  I mean, with an hourly rate you're basically punished for being fast. 

     

    But... how do you decide how much a banner is actually worth?  Does anyone have a sense of what kind of price range most companies (in the US) would consider typical/reasonable?

     

    I get the impression that larger agencies don't mind paying a lot to outsource to production studios/shops, but when it comes to individual freelancers, they might not be so generous. 

     

    I'm never really sure how much is appropriate to charge so I've always shied away from flat rates, but the idea seems appealing... so I was just curious what kind of methods you all use for determining market rates.  Any insight is appreciated!

     

    *Edited to add an anonymous poll

  5. 12 hours ago, cartimundi said:

    Hello everyone...

     

    I follow the GS a few year...(first time I used it in Adobe Edge, from there to Animate and Hype)

    Sad enough the company which use my banners want GWD files...they say that the GWD operates better..

    So, for me as a creative I set my eye on GWD..

     

    Is there anyone who has a basic GWD file with a little bit GS init...os i can see how GS must be used in GWD, I saw the reaction of Joe_midi that isn't just put the code in..

     

    I hope that I'm clear...I'm more visual then coder, but I like the way GS works

    It really is as simple as including a link to TweenMax and then starting your animation after the ad initializes (the animation code does not need to be any different than usual for GWD).

     

    Here's a step by step article on Medium: https://medium.com/@alexcleary/google-web-designer-and-greensock-c11473130184

     

    To keep things cleaner, you can also keep your animation in an external JS file.

    • Like 1
  6. 1 hour ago, somnamblst said:

    I did notice that the Dynamic HTML5 templates that used to be in the template database have been removed. I have the original files from before they removed them. PM me if you would like to see them.

     

    You don't have to use GWD, but you need a Rich Media vendor like Google to serve your Dynamic ads. Google Studio has great Live Chat for anything you run into, that is confusing, or not working.

    I think the templates are still here if you filter by dynamic: http://richmediagallery.com/create/templates

  7. Hey everyone!  I was in a longterm (several years) contract role which recently ended.  I haven't been job hunting or freelancing for a while, and I was just curious what the market has been like for other banner animators/developers lately?  Are you still seeing a lot of demand for this type of work, or have you felt the need to branch out into other mediums?

     

    Banners are such a fun niche, but I'm debating whether it's too limiting (career-wise) to be too specialized in one thing. 

     

    Just thought I'd see how the past couple of years have been treating everyone here... I'd love to hear your stories!  (It's been a bit quiet in this forum now that the initial chaos of the 2015 flashpocalypse died down.)

    • Like 3
  8. Just use box-sizing: border-box; to keep the borders within the boundaries of the main ad container.

     

    Regarding your second question, ads can be served with transparent backgrounds, so it's always good to have a background color or image, even if you want the background to be plain white.

     

     

    • Like 4
    • Thanks 1
  9. Try this:

     

    TweenMax.from(".disc2", .2, {left:"200px"})
    TweenMax.from(".disc3", .3, {right:"150px", delay: 2})

     

    Or use a timeline:

     

    var tl = new TimelineMax();
    
    tl.from(".disc2", .2, {left:"200px"})
    .from(".disc3", .3, {right:"150px"}, 2)

     

    Also note that with timelines, you can actually use relative values to more easily animate things sequentially: https://greensock.com/position-parameter

     

    So instead of the 2 at the end, you could have "+=1.8".

    • Like 1
×
×
  • Create New...