Jump to content
Search Community

Michael Barsotti last won the day on January 30 2016

Michael Barsotti had the most liked content!

Michael Barsotti

Business

  • Posts

    36

  • Joined

  • Last visited

  • Days Won

    1

 Content Type 

Posts posted by Michael Barsotti

    Best way to set up a standard ad with GSAP

    in Banner Animation

    Posted

    Yes, we use Google fonts with their font loader script to avoid FOUT.

    I hate my answer to the next question but my manager will not allow me to share (I don't think he understands that browsers have a 'view source' feature.) - I can outline our approach

     

    We link our Google Campaign Manager and Google Studio files to the Greensock cdn to get the base animation library, membership extra files (well worth the membership fee, plus you support the developers) need to be added like any other JS file. We also link to the Google fonts. By linking to these services, Google Ad Server doesn't count the weight of Greensock (base) or Google fonts against our total KBs allowed.

     

    We basically build what we think is going to be the heaviest banner first. If we have any issues with file weight, animation timing, etc. then we know early. Once the Creative and Account team review and approve the initial build we create the resizes by just copying that folder and making adjustments to the layout, if we build the animation correctly then 95+% of the time we don't even need to touch the JavaScript. 

    We use gsap timelines for all of our animation, only occasionally needing to call a second timeline for animation that spans multiple key frames.

    We use the Chrome plugin called "Perfect Pixel" to match up the layout of each keyframe to the artwork provided (our developers do NOT design)

    We meet with the creative team to write up animation notes and confirm that we're under the maximum allowed time.

     

    I looked at creating responsive banners but we had too many issues, we ended up building one set of files for each banner dimension but since we can usually use the animation in each size without having to touch anything (gsap for the win!) it's working very well for us.

     

    I'm sorry I can't provide one of our templates if I had my way I would gladly do so, also because I'm sure you might come back to me with a suggestion for improvements but if I want to keep my jerb... 

     

     

     

    • Like 4

    Best way to set up a standard ad with GSAP

    in Banner Animation

    Posted · Edited by Michael Barsotti
    L'esprit de l'escalier

    My team and I build about a dozen banner ads a week. We just do straight HTML/js, we haven't found a graphic banner tool worth the trouble. We rely on gsap timeline and Google fonts, neither of which add file weight because of the CDN. Most of our file weight is graphics unless we add a gsap members files and those only add a KB or two.  Coupled with how awesome Greensock tutorials are and their response on this forum is we are getting by like bandits.

     

    With that said it is my opinion that if you do as many banners as we do straight HTML is the way to go, if you only do one a month I would use Google Web Designer but I would also quit my job.

    • Like 4
    • Haha 1

    Repeating timeline without going back to initial position

    in GSAP

    Posted

    See? THIS, right here. 'repeatRefresh : true' THIS is why I love Greensock.

    13 years ago I was a Flash developer and learned about TweenMax and it changed my life, suddenly I was adding subtle animations to everything because Tweenmax made it so easy. One day I had a problem and didn't know what to do, I was looking at writing up a bunch of code just to get something to happen over and over. I got onto the GreenSock site and poked around the documentation and learned about 'yoyo : true' OMG GreenSock had an answer for EVERYTHING!

     

    Today, 13 years later, in HTML/JavaScript I needed what I was calling a progressive repeat. I needed to add 25 pixels to the y over and over again, not going back to the original position. I thought yoyo would be the answer but it wasn't working, it was resetting the element back to zero then to 25. I came here and learn about ' repeatRefresh : true' and once again: "GreenSock has an answer for EVERYTHING!"

     

    Thank you @DabeDotCom 

    • Like 2

    SplitText 'lines' removes <br> tags

    in GSAP

    Posted

    The SplitText - lines issue I'm having is when I need a forced line break inside of a style tag.

    Quote

    In an industry that’s often seen astransactional, temporary, and rigid, we’re focused on <b>doing<br>things</b> differently.

    This keeps "Doing Things" bold but on one line.

    A work-around is <b>doing</b><br><b>things</b> but that's annoying :)

     

    (why am I a newebie? I've been using Greensock for 10+ years)

    get timeline as a string

    in GSAP

    Posted

    I'm sure this is a very fringe case but is there a way to get a timeline as a string? For example if my javaScript is

    var timeline = gsap.timeline();

    timeline.set(text1,{autoAlpha:0})

        .addLabel("one","+=1")

        .to(text1,{duration:2,autoAlpha:1},"one");

     

    I would like to use something like

    console.log(timeline.toString());

    and get

    timeline.set(text1,{autoAlpha:0}).addLabel("one","+=1").to(text1,{duration:2,autoAlpha:1},"one");

     

    Thank you.

    Remove timeline label delays

    in GSAP

    Posted

    I have a request to build this timeline animation to play once, then allow the viewer to manually control with a next/back button. We're in the habit of using 

    .add("frame1","+=4")

    to hold on a frame of the timeline allowing a person to read the text. 

    I can get manual control OK, but, I think, when clicking the next/back buttons this += delay time is playing. I can't figure out how to remove, or change it to zero, when we enter manual mode.

    I'm sure I'm not describing my problem very well, please ask any questions.

    Any suggestions are appreciated. 

    See the Pen ExyRQvO#code-area by cmbarsotti (@cmbarsotti) on CodePen

    Forum for non-Greensock banner questions

    in Banner Animation

    Posted

    Does anyone know of a forum like this for banner development specific questions? I've tried some board that Google Campaign Manager has but it's mostly monitored by people trafficking banners, not building them. I want to communicate with other developers.

     

    (moderator, this is off-topic, feel free to delete this if you see fit) 

    • Like 1

    latest version number

    in Banner Animation

    Posted

    Thank you, I removed my code from my earlier post, I will use https://api.cdnjs.com/libraries/gsap?fields=version. this is exactly what I was looking for.

     

    A new question. My employer is a GreenSock business member, if I mix old versions of the business green files with latest gsap from the cdn will that cause a problem since those files are included in our projects? I imagine it will but you guys are great with backwards compatibility so I thought I'd ask.

    • Like 1
×
×
  • Create New...