Jump to content
Search Community

joe_midi last won the day on August 24 2016

joe_midi had the most liked content!

joe_midi

Members

  • Posts

    216

  • Joined

  • Last visited

  • Days Won

    1

 Content Type 

Everything posted by joe_midi

2
3
4
...
9
Page 3 of 9  
  1. joe_midi
    What about people willing to relocate?
  2. joe_midi
    What's your favourite platform to work on? Which one do you absolutely hate? Which one makes the most sense? Discuss!
  3. joe_midi
    Try adding a slight rotation or z: https://bugzilla.mozilla.org/show_bug.cgi?id=739176
  4. joe_midi
    Wasn't that supposed to be Edge Animate ? lol #handcoder4life
  5. joe_midi
    Here is the code I used: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://awaps.yandex.net/data/lib/adsdk.js"></script> <meta charset="utf-8" name="ad.size" content="width=320,height=268"> <title>320x268_YandexVideo</title> <!-- write your code here --> <script> function getUrlParam(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^]*)"), results = regex.exec(location.search); return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } </script> <style> body { margin: 0px; height: 100%; } #video { border: 1px solid gray; width: 100% !important; height: 100% !important; min-width: 320px; max-width: 1080px; min-height: 268px; max-height: 328px; object-fit: contain; position: fixed; margin: auto; left: 0; right: 0; bottom: 0; top: 0; display: block; background-color:rgba(00, 00, 00, 1.0); } </style> </head> <body> <a id="click1_area" href="#" target="_blank" style="width: 100%; height: 100%; cursor: pointer; position: absolute; z-index: 9;"> <video id="video" width="400" height="224" controls> <!--<source src="video_for_banner.mp4" type="video/mp4">--> </video> </a> <script> var video = document.getElementById('video'); video.addEventListener('canplaythrough', function() { // Do something. this.play(); }); video.src = getUrlParam('video1'); document.getElementById('click1_area').href = getUrlParam('link1'); home.expandableBannerAPI.close(); </script> </body> </html>
  6. joe_midi
    http://demo.padasian.com/yandex/?video1=http://demo.padasian.com/yandex/video.mp4&link1=http://www.google.com @AlexeyBoldin Does this example work for you?
  7. joe_midi
    <script> function getUrlParam(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^]*)"), results = regex.exec(location.search); return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } </script> All this does is return a string from the current URLs query parameters. // So if your URL is https://www.google.com'>http://example.com/my-banner/index.html?link1=https://www.google.com console.log(getUrlParam('link1')); // https://www.google.com // https://www.google.com'>http://example.com/my-banner/index.html?link1=https://www.google.com&video1=http://www.w3schools.com/html/mov_bbb.mp4 console.log(getUrlParam('link1')); // https://www.google.com console.log(getUrlParam('video1')); // http://www.w3schools.com/html/mov_bbb.mp4
  8. joe_midi
    But are you using the query parameter to pull in the video?
  9. joe_midi
    Move var video = document.getElementById('video'); video.addEventListener('canplaythrough', function() { // Do something. this.play(); }); video.src = getUrlParam('video1'); To the lower <script> tag, it probably can't find the v video element because it hasn't been defined yet.
  10. joe_midi
    <video id="video" width="400" height="224" controls> <!--<source src="video_for_banner.mp4" type="video/mp4">--> </video> You could probably comment out that source. And test it by adding the query to the URL something like: https://example.com/my-banner/index.html?video1=https://example.com/my-banner/video.mp4&link1=https://www.google.co.uk
  11. joe_midi
    Oh. Hmm, shouldn't it be: function getUrlParam(name) { name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); var regex = new RegExp("[\\?&]" + name + "=([^]*)"), results = regex.exec(location.search); return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); } var video = document.getElementById('canvas'); // You should probably call that video to avoid confusion video.addEventListener('canplaythrough', function() { // Do something. this.play(); }); video.src = getUrlParam('video1');
  12. joe_midi
    YunoJuno is pretty good for London/UK based freelancers: http://www.yunojuno.com/
  13. joe_midi
    Well, I guess it's just throwback mentality to the SWF clickTag era, but I would also imagine that you'll need to be able to set a variable if you wanted just a specific part of the banner to click through or had multiple clickTags. It's also good for you to actually test that your clicks work. Yes I actually include: <script>var clickTag = "https://www.google.com";</script> as part of my DCM template, and then call it with: var clickArea = document.getElementById('click-area'); // Or what ever you want to cover clickArea.addEvenListener('click', function(){ window.open(window.clickTag); }); as for DoubleClick Studio with the Enabler: var clickArea = document.getElementById('click-area'); // Or what ever you want to cover clickArea.addEvenListener('click', function(){ Enabler.exit('Background Exit'); }); The String 'Background Exit' is then a reference in the Edit Events tab on the DoubleClick Studio platform where you can change the destination URL.
  14. joe_midi
    TweenMax includes TweenLite, TimelineMax, TimelineLite and the CSSPlugin, so it would be fine on its own. <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js"></script> TweenLite is just TweenLite so you need the other scripts as well: <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/cssplugin_1.19.0_cfbff7d208ccfdbe176b9855af1eb1fa_min.js"></script> <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/timelinelite_1.19.0_13e3bd0e510d63fd5e5ef9bf9dac7017_min.js"></script> <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenlite_1.19.0_422f021fad4c20f20cf3640a06ac39e9_min.js"></script>
  15. joe_midi
    As far as I know DCM is able to change this on the fly, probably using some RegEx check or it just re-assigns the global variable All you really need to do is give the banner var clickTag = 'https://www.google.com'; And the DCM system does the rest.
  16. joe_midi
    If you're using DoubleClick Studio with the Enabler.js https://www.google.com/doubleclick/studio/docs/sdk/html5/en/class_studio_Enabler.html Then you should be using: Enabler.exit('Exit_Name'); This can then be set within DoubleClick Studio on Tab 3 of a creative "Edit Events".
  17. joe_midi
    Does anyone know if Atlas has a specific CDN for GSAP, or have they whitelisted the Cloudflare CDN? Or do we have to include GSAP in our ad files?
  18. joe_midi
    This could work, but you'd have to remember on mobile devices an autoplay call will probably need to be triggered from a user event stack.
  19. joe_midi
    You can actually pass an array to the target parameter, which would do all of those elements at the same time. tl.from(copy1, 1, { autoAlpha:0, ease: Power4.easeNone }) .from(hemma1, 0.1, { delay: 0.6, autoAlpha: 0, ease: Power0.easeNone}) .from([hemma2, hemma3, hemma4], 0.1, {autoAlpha: 0, ease: SteppedEase.config(1) }) .from(system1, 0.1, { delay: 0.5, autoAlpha: 0, ease:SteppedEase.config(1) }) .from([system2, system3, system4], 0.1, { autoAlpha: 0, ease: SteppedEase.config(1) }) .to([copy1, hemma1, hemma2, hemma3, hemma4], 0.5, { autoAlpha: 0, ease: Power2.easeOut }) .to([system1, system2, system3, system4], 0.5, { autoAlpha: 0, ease: Power2.easeOut }); Another method of making animations occur at the same time is to give them the same position with a label. tl.from(copy1, 1, {autoAlpha:0,ease:Power4.easeNone}) .to(hemma1, 0.5, { autoAlpha: 0, ease: Power2.easeOut }, 'fadeOut') .to(hemma2, 0.5, { autoAlpha: 0, ease: Power2.easeOut }, 'fadeOut') .to(hemma3, 0.5, { autoAlpha: 0, ease: Power2.easeOut }, 'fadeOut') .to(hemma4, 0.5, { autoAlpha: 0, ease: Power2.easeOut }, 'fadeOut')
  20. joe_midi
    Hey Crazy 1s, Could you make a CodePen example of your animation? It's pretty difficult to give you a definitive answer without seeing what's going on. But one thing I can see from your code: var tl2 = new TimelineLite({}); tl2 .to($lock, .5, { rotation: 25, left: '95px', ease:Sine.easeInOut, top: '60px', transformOrigin: 'left 50%' }) .to($lock, .5, { rotation: 5, left: '110px', ease:Sine.easeInOut, top: '78px', transformOrigin: 'left 50%' }) .to($lock, .5, { rotation: 15, left: '103px', ease:Sine.easeInOut, top: '69px', transformOrigin: 'left 50%' }) .to($lock, .5, { rotation: 10, left: '106px', ease:Sine.easeInOut, top: '74px', transformOrigin: 'left 50%' }); Instead of using left and top, try using x and y, they should prove to give better performance. var tl2 = new TimelineLite({}); tl2 .to($lock, .5, { rotation: 25, x: 95, ease:Sine.easeInOut, y: 60, transformOrigin: 'left 50%' }) .to($lock, .5, { rotation: 5, x: 110, ease:Sine.easeInOut, y: 78, transformOrigin: 'left 50%' }) .to($lock, .5, { rotation: 15, x: 103, ease:Sine.easeInOut, y: 69, transformOrigin: 'left 50%' }) .to($lock, .5, { rotation: 10, x: 106, ease:Sine.easeInOut, y: 74, transformOrigin: 'left 50%' });
  21. joe_midi
    Banners might not be analogous to full-on software development, but it gets pretty similar to websites/microsites. In my experience they go through the exact same processes as a website does, just expedited. I've never worked with Gitflow itself, but I love Git for developing banners, it just makes so much sense to have a nicely ordered way to version control your code. I guess the workflow you will create will depend on how you and your team like to work. I've used branches as a way to version control different languages. So working on a whole European campaign, I created a set of master banners as English, then: git checkout -b french git checkout -b german git checkout -b dutch git checkout -b spanish I then used a script to append the branch name to the deployment script, so each preview link had its own language. http://mypreview.banners/new-campaign http://mypreview.banners/new-campaign-french http://mypreview.banners/new-campaign-germna http://mypreview.banners/new-campaign-dutch http://mypreview.banners/new-campaign-spanish This kept it not only consistent but very straight forward for devs who weren't familiar with the project to pick up easily. Another workflow is creative routes as branches git checkout -b feature/route-a git checkout -b feature/route-b git checkout -b feature/route-c With the master branch always being the main creative route/idea. My main pet peeve is git commit messages, making sure people are concise and informative with their messages. And follow this style guide: https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md#type I'm not sure what if there is a name for it, but it makes sense and its pretty easy to follow. The only other thing I added was "amend:" as a new type because we all know client amends are going to be in there all the time, and they're not really a "refactor:" or a new "feat:" joe_midi 2eb47c1 amend: remove drop shadow from CMB lockup sprite joe_midi d2185e5 docs: update README joe_midi 397e9ae amend: speed up transition to right-hand side joe_midi de45d11 amend: right-panel background no longer has transparency joe_midi 0eb7b38 chore: update backup.jpg joe_midi d057f72 fix: make product labels retina fixes font in issue #7 joe_midi 156a7f2 amend: legal line to appear only when you hover over a product joe_midi d2d45fc feat: add legal line
  22. joe_midi
    Do you have a reduced test case of this behaviour? Off the top of my head, I would assume that is because of how GSAP uses the requestAnimationFrame API to wait for a browser tick before animating and because the iFrames are no longer in view they're not being told by the browser to animate. I would read this thread here: http://greensock.com/forums/topic/10051-animations-pause-when-browser-tab-is-not-visible/ In which Jack's fixes are:
  23. joe_midi
    Impressive as always @Volcanoflash!
  24. joe_midi
    You might want to check out the Web Font Loader library: https://github.com/typekit/webfontloader It was created by Google and TypeKit
  25. joe_midi
    =D Thanks OneDesign! I implemented it into one of my banner projects to help designers and developers debug animations: https://joemidi.github.io/bannertime-anim-panel/
2
3
4
...
9
Page 3 of 9  
×
×
  • Create New...