Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

81 Contributor

About explorerzip

  • Rank
    Advanced Member

Recent Profile Visitors

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

  1. Unless you have a very compelling reason for using Flash / Animate, I'd recommend that you learn to hand-code banners vs relying on the often buggy Adobe software and the CreateJS plugin. Learning to hand-code is certainly daunting at first, but once you get the hang of it you'll wonder why you were relying on clunky software.
  2. Banner ads usually need to meet IAB standards: https://iabcanada.com/content/uploads/files/IABCanada-AdGuidelines-English.pdf All animations must typically stop at 30 seconds, but 15 seconds is recommended.
  3. There is a GSAP snippet for VSCode: https://marketplace.visualstudio.com/items?itemName=hridoy.gsap-snippets that will complete a block of code for you. You only need to replace the parameters. Once you gain a mastery of the syntax you likely won't need the snippet. Also have a look at https://ihatetomatoes.net/get-greensock-101/ for an excellent and free GSAP course.
  4. VSCode aka Visual Studio Code is a free code editor by Microsoft, but it is not the same as Visual Studio. The latter is an Integrated Development Environment, which is overkill for most JavaScript projects.
  5. Most dedicated code-editors have some form of auto-formatting and / or JavaScript error checking . VSCode has it built in, but there are extensions for Sublime, etc. These auto-formatters should be able to catch typos, invalid or too many parameters, wrong brackets, etc.
  6. I don't get why you would need to make your own tool because there are already many paid and free Powerpoint like web applications out there like Prezi. These apps should be able to output to PPT and PPTX, but they might not be able to transfer animations. Remember that PowerPoint is closed off so it will take a lot of experimentation / hacking to get everything working.
  7. You'll need to know which platform your rich-media ad is going to be hosted on e.g. Google DoubleClick. There are other players like Sizmek, that have their proprietary ways of embedding video / YouTube players into ads. You can certainly use GSAP to create / remove a video player in your html file. I think playing, pausing, stopping, or seeking to a specific time in a video is beyond the scope of GSAP. That's where the API of the video player will come in. If possible upload your video to YouTube so you can use Google's API that allows you to control playback, speed, seek to time, etc and collects playback analytics. Have a look at this site to see what's possible with DoubleClick: https://www.richmediagallery.com/
  8. Great point Jack! Didn't even think to use this approach. So much simpler (in this specific case) since there is some trial and error with the clip-path and clip properties.
  9. Have a look at this post I made a while ago where I used the clip: rect(). That property is deprecated, but you can still use it. Clip-path is the newer and more robust way to do this kind of animation. https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path The old clip:rect() property will work if all you want is a simple horizontal wipe and it works in IE. You'll need to redo your HTML with img tags and the JavaScript to make the Animate button work. The concept is the same though.
  10. explorerzip

    Toggle menu

    I'm not quite sure what you're trying to accomplish here. Are the items 1, 2, 3, and 4 supposed to be hidden until you click on the "toggle" div? What would be the point of the "toggle" div if you can click directly on each item? https://codepen.io/jack_grechi/pen/VNQmdp You actually don't need GSAP at all if you're just looking to make a simple dropdown menu: https://www.w3schools.com/howto/howto_js_dropdown.asp
  11. I'm also confused about why you want to run repackage GSAP and not from the CDN. You can download all the basic GSAP files to run them locally if you must. Seems to be a lot of extra work to bundle it, which won't teach you anything about animation. https://greensock.com/gsap
  12. I've been making banners for years and have minimally used SVG's for simple shapes like CTA buttons, replay buttons, legal, etc. I have only used very simple SVG animations with GSAP like animating strokedasharray and strokedashoffset properties. All other assets are JPG, PNG and GIF. From a workflow perspective, it is far easier to prepare and export image assets as JPG / PNG files. The biggest obstacle for me (and I'm sure many others) is creating / getting a properly formatted Illustrator file with shapes on their own layers, proper names, etc. You have to take these steps otherwise animating will be near impossible. After all that, you still need to use third-party optimization tools and will have a wall of SVG code in your HTML file. I'd say that CPU usage is not much of a concern with banners because their design and animation tend to be simple. There will be a much stronger case for SVG in banner ads once a) the workflow issues can be addressed by Adobe b) there are fewer cross-browser issues and c) more people start using hi density (4K and above) displays. All this being said, I have to give huge kudos to the GSAP folks and the community for experimenting and smoothing out many of these SVG issues.
  13. I'm not quite sure what you mean by "more sophisticated animations." In your example, you'll notice that the animations are simple and have the same movement no matter the size of the browser window. You can use something like TweenMax.from(element, 1, {x: "-=100%"}) and GSAP will do the calculations for you. In your example, you'll also notice that everything except the background image are SVG's and relatively simple shapes. You can use a tool like https://jakearchibald.github.io/svgomg/ to compress those. You can also use a tool like TinyPng / TinyJpg to reduce the size of the background image. I'm not sure what else we can do to help unless you can post up a simplified example of what you're trying to do on CodePen. I know you're using Animate, but this might be a good opportunity for you to learn how to hand-code since you're already using GSAP.
  14. I can't say that I've heard of a "responsive sidebar ad" that responds to the size of the browser window. Nor have I seen any in my web browsing experience. Do you have an example we can look at? This could be a difference in European vs North American terminology, but I think you're referring to an "expandable ad." Those ads feature a "collapsed state" like 300x250 and a button that lets the user manually expand to a pre-set size like 970x250. Expandable ads cannot automatically respond to the size of the browser window, however. Here is an example of a "LightBox" ad that floats on top of the web-site, but the principle is still the same http://www.richmediagallery.com/detail?id=13936 In Google Double-Click, expandable ads are considered rich-media and you would have a lot more than 80KB to work with. Perhaps you can let us know your ad vendor (DoubleClick, Sizmek, EyeReturn, etc) so we can look into your issue more.
  15. These are not exactly sexy and are largely invisible, but are super important in making complex animations. 1. Mastering the Timeline with callbacks, multiple nested timelines, function-based values, counted and infinite loops, etc. 2. Responding to events like mouse over, click, hover, etc. 3. Writing modular code using variables, arrays and functions where you can change things back and forth. That goes hand in hand with writing clean and properly formatted code.