Jump to content
Search Community

retropunk last won the day on April 16 2015

retropunk had the most liked content!

retropunk

Members
  • Posts

    181
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by retropunk

  1. Hi there. Welcome to the GSAP forum. I am sure Carl and gang will post some helpful starter links on GSAP and CodePen.

    In the mean time take a look

    See the Pen NNjGbq by SnapToPixels (@SnapToPixels) on CodePen

     

    1. You don't need to define the body tag in the HTML

    2. scripts should be imported via the Pen Settings panel

    3. Also, something I like to do with banners is set the visibility to hidden on the wrapper div and then at the beginning of the GSAP timeline I set the visibility back to visible. It helps with the flicker too.

     

    Hope that helps in the mean time.

    Here are some other links too:

    GSAP Getting Started

    http://greensock.com/get-started-js

     

    Here is a nice CodePen starter you can fork

    See the Pen PZdNMG by GreenSock (@GreenSock) on CodePen

     

    I would also look at the GSAP CodePens. There are tons of easy to learn pens

     

    Good luck!

    - P

    • Like 2
  2. This is something I found out by accident.

    If you have a div id named "logo"

    You can target it with GSAP without defining a var or using the quotes '#logo' in the Tween

     

    This works and I was surprised because I didn't define a var:

    TweenMax.to(logo, 1, {scale:0.5});

    Depending on what I am doing I will define the var

    var logo = getElementById('logo');
    TweenMax.to(logo, 1, {scale:0.5});

    or just

    TweenMax.to('#logo', 1, {scale:0.5});

    Is this a happy accident or is it dangerous? Not sure why it would be dangerous but I wanted to ask just in case ;)

    With my luck this was probably blogged about and I am behind the curve again :(

     

    Thanks

    - P

    See the Pen JXbLow by SnapToPixels (@SnapToPixels) on CodePen

  3. Hey Carl, I wanted to comment because switching all images to use the img tag affects my current workflow greatly.

     

    I almost always use sprite sheets.

    All of the sprite sheet creation tools I have ever used, use background-image and background-position.

    My knee-jerk reaction is "how the heck do I switch to img tags?" ARGH!

     

    It never dawned on me to try img tags with sprite sheets, clip-path maybe?

    I only used background-image because thats what TexturePacker uses for CSS.

    I'll look to see if it can use the img tag but I don't think so.

     

    Anyways, just chiming in. :)

     

    Thanks

    - P

  4. I'd be careful using 2 functions called windowLoaded() 

    I suggest renaming your function in the FLA to something more appropriate to the methods inside

    startAnimation() for example

     

    You also don't need this extra load call. The body init is already doing this.

    Rename your function in the FLA to startAnimation and then move the function into the init via CreateJS in your Profile template.

     

    That will fix it

    function init() {
      $CJS_INIT
    
      stage.scaleX = stage.scaleY = window.devicePixelRatio || 1;
      console.log('window loaded');
      document.startAnimation();
    }

    - Patrick

    • Like 1
  5. Hey guys, I made an update to the template for both Standard and Rich Media.

     

    I forgot that when you are uploading the DoubleClick you need to use the DC GSAP link:

    https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js

     

    I tweaked the retina scripts and added a small animation that shows how to target sprites using GSAP from the timeline or the main JS file.

     

    This is a work in progress so please report mistakes or any suggestions on how to do things more efficiently.

     

    - Patrick

    BannerMaster.fla.zip

    • Like 2
  6. Hey guys, with Animate and CreateJS I found that using the stage.enableMouseOver() a bit laggy even if you bump of the rate.

     

    Check out the template in this thread where we use Animate CC and GSAP together. There are 2 Profile templates for Standard and Rich Media DC Banners

    http://greensock.com/forums/topic/13774-animate-cc-gsap-starter-file-needed/#entry58050

     

    Depending on how you need the cursor to perform this may or may not work for you. In most banner cases this template should serve you fine.

     

    Take a look and let me know how it works for you

     

    Good luck

    - Patrick

×
×
  • Create New...