• Content Count

  • Joined

  • Last visited

Community Reputation

15 Newbie

About explorerzip

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Try using Google's polite loading template at: https://support.google.com/richmedia/answer/2672514?hl=en You're also loading a number plugins that are redundant or you don't need. jQuery is not needed at all for a simple animation like this and TweenMax already includes TimelineMax, CssPlugin and easePack. You don't need to explicitly run them as you have in your HTML. It also looks like you're trying to use JavaScript to create a second CSS (polite.css) file. You should not have to do this because you can initialize everything you need in your global.css. While it's technically possible to load a second CSS file, I believe it's poor programming practice to do that especially in this case where you have very simple animation. Remember that efficiency should be your ultimate goal when building banners. As a result, you should only load plugins, scripts, css files, etc that you need. You can also contact Double Click directly through chat or email and can even send them your code. They will often write big sections of code for you.
  2. explorerzip

    Help with transformOrigin

    Nice work @mikel You just need the GSAP guy (does he have an actual name?) to hold open the truck door with his tweening powers Future Marvel movie right there LOL
  3. explorerzip

    Help with transformOrigin

    I tried to make something similar of a compartment door on a pick up truck and also tried using transformOrigin. I had a lot of problems getting it to work so I resorted to a sprite sheet. I was using PNG images instead of SVG, but the concept should work in your case too. Not sure if you used a sprite sheet before, but it's just a series of frames that you can make in Photoshop. You should be able to make one in Illustrator too. Frame 1 is the closed door and the last frame is the opened door. You'll have to figure out the in between frames. You then tween your door element with a steppedEase.config(x). Replace x with the total number of frames in your spite sheet. A spritesheet should work in every browser since you're not doing any transforms to the image.
  4. explorerzip

    'Pulsing' Button could this be done in a better way?

    I've always found the Animate interface clunky and buggy especially since I started hand-coding. Animate has far too many panels and you can accidentally move them out of place. Try pushing yourself more into pure hand-coding to avoid some of these issues. You'll obviously need to learn HTML, CSS and JavaScript, but it's worthwhile. Not sure what type of project you're working on, but the infinite looping could be an issue. If it's a banner ad, then you cannot have infinite looping animation of any kind. You either have to loop x amount of times or give the user control over the looping.
  5. explorerzip

    TweenAlign and appendMultiple

    Thanks for the code snip and for the tip on using CustomWiggle to create a raw SVG path. I've just started playing around with the new cycle property and it's a great code saver. It makes sense that old functions like appendMultiple won't be disappearing anytime soon. I'd rather start getting people to change habits now especially if they're not optimal. Better to change habits and processes now instead of waiting for something to break
  6. explorerzip

    TweenAlign and appendMultiple

    Thanks for the quick response Jack! I figured the code was from the AS, but thought I'd check anyway. Good to know that it won't be supported in the next release. Time to send out emails to the team I am aware of CustomEase and CustomWiggle (amazing work BTW), but likely cannot use them in banner ads. I load GSAP using a CDN and have to watch my package file payload carefully to meet IAB specs. Out of curiosity, how big are the CustomEase and CustomWiggle JS files?
  7. explorerzip

    TweenAlign and appendMultiple

    Are TweenAlign and appendMultiple still supported in the latest GSAP? I came across this Javascript code snippet in a colleague's hand-coded HTML banner ad: window.TweenAlign = { NORMAL: "normal", SEQUENCE: "sequence", START: "start" }; var counter = 0; /* begin animation */ tl.appendMultiple([ TweenLite.to(steering, 1, {rotation:-20, ease: Sine.easeInOut}), TweenLite.to(steering, 1, {rotation:20, ease: Sine.easeInOut}), TweenLite.to(steering, 1, {rotation:0, ease: Sine.easeInOut}), ], 2, TweenAlign.START, 1); The ad works fine and he's using a Google CDN to load GSAP version 1.20. I assume this code is a holdover from the ActionScript days? I've been using GSAP for years, but haven't come across this before and it doesn't exit in the Docs as far as I can tell. Has tl.appendMultiple been replaced by tl.add and has TweenAlign has been replaced by the TimelineLite position parameter? The ad still works properly, but I want to make sure that my team is not using old code.
  8. explorerzip

    The day-job

    Amazing work! I like the NZ police ad with the flashlight. Reminds me of the good ol days of Flash ads where it would follow your mouse movements.
  9. explorerzip

    TimelineLite Repeat problem

    TimelineMax already includes a repeat function. https://greensock.com/docs/TimelineMax/repeat
  10. explorerzip

    How do you optimize your banner ads?

    You have to compress everything: images and code to be within IAB specs.
  11. explorerzip

    How do you optimize your banner ads?

    Compressing images usually has the biggest effect on file size. There are 2 sites that can compress PNG's really well. I find the easiest way to compress JPGs is to do it right within Photoshop. www.tinypng.com www.compresspng.com TinyPng is really easy to use, just drag and drop your PNG files and download the compressed version. There's also a paid Photoshop plugin so you can export the compressed PNG's without opening a browser. CompressPng gives you more granular control over how many colours to include in the image.
  12. explorerzip

    Modifiers Plugin for Infinite Image Carousel

    Thanks Carl for the input and for making the initial demo for me to copy from If I'm reading your code correctly, does the "wrap" function contain the movement of the "boxes" class between -50 and 450 or any 2 numbers? Thanks again for your help and for all your wonderful videos. I'll update my code with actual images and post it up in the forums for everyone's benefit.
  13. explorerzip

    Modifiers Plugin for Infinite Image Carousel

    That's a lot closer to what I'm looking to accomplish, but there still is a brief glimpse of the grey wrapper container when the boxes move outside of the red box. I'll keep playing around and see if I can get it closer to what I am looking for. Thanks so much for your help though!
  14. explorerzip

    Modifiers Plugin for Infinite Image Carousel

    Thanks for the reply, but I can't change the timing from 0.25 to 0 because that would eliminate the animation of the boxes.
  15. explorerzip

    Modifiers Plugin for Infinite Image Carousel

    Hi Mike Thanks for the reply. Yes the Next button is considered "Forward." I omitted the left property for the .boxes class just to experiment. I don't see any difference between your code and my code? There is a slight difference with your version in that when I click the Next or Previous button past a certain point, the red box is empty for a split second.