explorerzip

Members
  • Content Count

    29
  • Joined

  • Last visited

Community Reputation

32 Newbie

About explorerzip

  • Rank
    Member

Recent Profile Visitors

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

  1. explorerzip

    Animating a Mask using GSAP

    Have a look at this article about using the clip and clip-path properties in CSS. In short, css clip is deprecates, but will work in just about any browser including IE. Clip-path is the newer way of accomplishing the same thing, but with some newer bells and whistles. https://css-tricks.com/clipping-masking-css/ The tricky part with this technique is figuring out the correct values for top, right, bottom left because it's a lot of trial and error especially on non-rectangular objects. You can use the browser's inspector to manually change these values on the fly, but you'll want to disable any external or inline JavaScript code. I've found it best to use a TweenMax.to tween to change these values. You could end up with your object flashing on and off briefly when the web page is first loaded if you use a TweenMax.from tween. In your scenario: 1. Use clip: rect(0px, 0px, 0px, 0px) in CSS to make your object "invisible" on page load 2. Use a TweenMax.to tween to change those properties I also recently posted a thread about using the css clip to do exactly what you want; reveal and hide objects.
  2. I know you've figured out the issue, but you might also consider putting your JS code in a separate file instead of within the HTML. Then call your external JS in a script tag at the bottom of your HTML before </body>. I've done this for years and it works perfectly fine with DoubleClick Studio and standard banners. Other ad platforms like Sizmek, AdGear should allow you to call external JS files too. Double check their docs obviously.
  3. Dynamic content including images and live text is stored in a Google sheet. Naturally, you'll need a Google account with access to Studio. Your best bet is to follow Google's docs to properly code your ad: https://support.google.com/richmedia/answer/3526354?hl=en You can also contact Google to get help with their API. You can upload code to them and in some case they write large sections of code for you.
  4. explorerzip

    How to move arrow in curve path

    You can also animate an SVG line using CSS animations. It's more tedious and I much prefer using GSAP, but it can be done: https://css-tricks.com/svg-line-animation-works/
  5. explorerzip

    Vertical Wiping and CSS Clip Animation

    I think all you need to mention is that the position parameter also accepts variables. It just wasn't obvious from the docs.
  6. explorerzip

    Vertical Wiping and CSS Clip Animation

    It just didn't occur to me to use a math expression with variables for the position parameter e.g. duration - overlapDuration - gapDuration. It now makes sense from a programmer's perspective, but I thought I was limited to using values like: at an absolute time (1) relative to the end of a timeline allowing for gaps ("+=1") or overlaps ("-=1") at a label ("someLabel") relative to a label ("someLabel+=1") Perhaps you can state in the docs that you can use variables and math expressions like: "someLabel - anotherLabel - 1", etc.
  7. explorerzip

    Vertical Wiping and CSS Clip Animation

    Thanks so much for the assist Jack. I'll give this a shot with my real assets and let you know if it works. It must have took you a lot of trial and error to figure out the correct values for the variables? I didn't know you could use an expression like: "duration - overlapDuration - gapDuration" in the position parameter. But it now makes logical sense since I've been using relative values like "+=1" for ages. Might be worthwhile to update the official TimelineMax docs to call attention to this.
  8. I'm trying to "convert" an Adobe Animate project to GSAP. As you'll see in my Codepen, the top and bottom "filgrees" (they are supposed to look similar to: https://goo.gl/images/GNQgRi) wipe one image and simultaneously reveal another image. The actual banner is more complicated because the filgrees and the images in the center are irregular shapes. My challenge is syncing the movement of the "filgrees" to the image wipe / reveal. The wipe / reveal is being done by tweening the css "clip" property. I know that the css clip property is deprecated on most browser, but I have to use it for Internet Explorer 😡 You'll notice that the image "wipes" slightly faster than the "filgrees." I know this is a timing issue since the filgrees are have further to move in the Y direction vs the images have to clip in the Y direction. Any tips on how to sequence these separate parts so there's no red background visible as they are moving.
  9. explorerzip

    Learning GSAP with no Javascript knowledge/experience

    You can ease into GSAP by using tools like Animate or Google Web Designer (GWD) for design work. I'm a hand-coder, but must admit that Animate is a much better than GWD since it's been around for far longer. Both products support let you insert GSAP code into them, which gives you the flexibility of designing with a GUI with the time-saving power of GSAP to tween everything. Once you get a hang of the GSAP syntax, you can move into pure HTML, CSS and JS.
  10. explorerzip

    Problem with resizing GSAP banner

    You should not need over 1000 lines of code to accomplish this animation, which is relatively straightforward. I think the original developer of this banner ad was trying to make it responsive so that the assets resize and reflow according to the browser window, which makes the code more complex than it needs to be. I've done some experimenting with responsive ads and found it not worth the effort in getting it to work properly on different browsers. IMO, it's much more efficient to create individual sized banner ads since I don't have to go through such rigorous testing. Banners are not web-sites after all. It might be a lot simpler for you to redo this ad from scratch vs modifying someone else's code. You'll also get some valuable experience writing code on your own. You can write the HTML / CSS / JS from scratch or use a HTML boilerplate. In either case, you should only include what you need i.e. remove CSS, HTML or JS that you don't need thus making the code easier to read / maintain and for a smaller file size. Most banner ads like this should also not need jQuery, SASS, etc.
  11. explorerzip

    Scaling with GSAP and Adobe Animate

    I think this line of code in your Animate file might be problematic. TweenMax.to(this.circle_mc, 1, {scaleX:50, scaleY:50, ease:Back.easeOut}) You're telling GSAP to scale your object by 5000%, which enormous. It could be that CreateJS (the HTML Canvas plugin bundled with Animate) cannot deal with such a large scaling factor and that causes the browser to pixelate the circle. I previewed your Animate file in Firefox and Chrome and they both have the pixelation issue. Not sure about this, but I think that objects rendered in HTML canvas are actually raster (aka bitmaps) even if you created them as a vector in Animate or Illustrator. I recreated your animated circle with vanilla CSS and your JS code and the scaling is not pixelated. Bear in mind that the JavaScript syntax is a bit different in that I can specify "scale: 50" instead of "scaleX: 50, scaleY: 50" as with Animate. It might also help to know what you're trying to accomplish with this animation.
  12. explorerzip

    Scaling with GSAP and Adobe Animate

    That's a bizarre issue since objects you draw in Animate are vectors. Perhaps you can try to make a completely new Animate file and use the timeline to scale it up i.e. don't use GSAP and see if the problem persists.
  13. explorerzip

    Scaling with GSAP and Adobe Animate

    If you're scaling up a JPG or PNG, it will become pixelated if you try to scale it. Animate does have some additional settings you can change, however. After importing image into Animate, right click on the asset and click Properties. You'll see the Bitmap Properties window. You can change options like Smoothing and Compression. Try changing Compression to "Lossless" and "Allow smoothing" to see if that helps. Keep in mind that your outputted file (SWF, HTML Canvas, etc) will be much larger as a result of changing the compression settings. The other way would be use vector image from so you can scale them up and down without loss of quality.
  14. 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.
  15. 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