Jump to content

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


  • Content Count

  • Joined

  • Last visited

Everything posted by explorerzip

  1. Oh cool. Thanks so much for the speedy response. Any thoughts on how to fix the warping of the plane image from the end of the path to the start on first load?
  2. I have a banner animation where I want the plane graphic to leave a dotted trail behind it as it flies. I am having difficulty getting the timing right. Specifically, the plane completes its movement before the dotted path is revealed. The dotted path actually doesn't animate. I am changing the strokeDashoffset of the white path, which reveals the yellow dotted path beneath. So I'm wondering how to go about syncing the plane movement with the path reveal? I have tried negative offsets for the second "path" tween, but to no avail. Perhaps there is a better way to achieve this same e
  3. Thanks for the reply Zach. I definitely know the benefits of GSAP and the price is excellent for what's included, but I'm not the one who would be paying the bill
  4. I'm looking to use svg shape morphs (a heart morphing into a thumbs-up icon) on a standard banner ad. Does anyone know the size of the MorphSVG.js file and if Google even allows that library to run in banner ads on Double-Click? While the cost a Business Green license is not expensive, I still have to consider if it's worth it to get a license because I'm likely only going to use MorphSVG as a one off. Are there any other considerations when including MorphSVG.js in a standard banner?
  5. Your question doesn't really relate to Greensock, specifically. It's more of a JavaScript / HTML question. From the link below, it looks like you can add / remove classes on page load using JavaScript. The behaviour will be reset if the end user clears their browser cache. https://teamtreehouse.com/community/use-javascript-to-animate-only-once
  6. Animate only helps you do the layout of all the assets. You still need to write GSAP code.
  7. If you must use a graphical tool you could try out Google Web Designer. Not the most full-featured tool out there especially compared to Adobe Animate, but it is free. If you want someone to look at your project, you'll either need to host it on your own web-site or copy it to DropBox, Google Drive, etc. and share a link to it.
  8. Yeah, I seldom see rich-media ads anymore. I guess marketers feel that the ROI is no longer there to develop and traffic these ads.
  9. I know that 970x250 is a standard IAB ad. I was referring to having the ad start in the expanded state and then the user clicks a button to display the collapsed state. I haven't come across any rich-media ads like this. The only rich-media ads I've made thus far open in the collapsed (or smaller) state and the the user clicks a button to expand it to a larger state.
  10. Has anyone come across a collapsable ad unit like this? https://onecreative.aol.com/view/public?ids=420584&keys=11e21a9d1a854e7eb97df74f90a9c15f&secure=true where the ad starts in the expanded state and when the user presses the Close Ad button, the collapsed state appears. Verizon seems to have developed this proprietary ad specification: https://adspecs.verizonmedia.com/adformats/displayads/970x250-billboard/ I think the idea is to have the ad move up and out of the way of web-page content. Google's expandable ads work differently in that they start in the collapsed state
  11. Try reaching out to Petr Tichy on Twitter: https://twitter.com/ihatetomatoes I learned so much from his YouTube videos. He wrote the Greensock cheat sheet and a number of courses. He used to do web-site deconstruction videos, but haven't seen him post in months. So he's likely very busy.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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,
  19. 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.
  20. 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.
  21. 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
  22. 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
  23. 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 other
  24. 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 b
  25. 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 o