• Content Count

  • Joined

  • Last visited

Community Reputation

58 Contributor

About explorerzip

  • Rank
    Advanced Member

Recent Profile Visitors

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

  1. explorerzip

    Where to start with learning Banner Ads

    Standard HTML banner ads like 300x250, 300x600, etc should work with any ad vendor. Google definitely has tools to verify that your code will work properly on their platform and I assume that Sizmek, EyeReturn, etc have them too. Ultimately, your banners have to meet IAB specifications for file size, polite loading, etc. Keep in mind that banners are just a standard HTML document that usually include animation and have well defined borders. Things get more complicated with rich-media (expandable ads, video players, etc.) because each ad vendor has their own requirements (though not significantly different), templates and support options. I believe all ad platforms support embedding proprietary components like a YouTube player, but you might have trouble getting help from Sizmek, for example, who's Google's competitor. Google is obviously the dominant player in the ad serving space and luckily their support options are basically free. You can chat with them directly if you have a problem with their products like Web Designer, Studio aka DoubleClick, etc. They sometimes even will write entire blocks of code for you. The big downside with Google in my experience is their documents are not always up to date and you have to dig for information. Unfortunately, I don't know how EyeBuild or Sizmek support their platforms especially when it comes to embedding third-party content like a YouTube player or creating expandable ads. I've always found changing another developer's project more trouble than it's worth because no two will approach a project the same way. Some will use shortcuts or hacks that will get the job done, but might result in hard to read or follow code. Some don't comment, some write 10 lines of code where 2 might suffice, etc. It's often easier to build an ad from scratch instead of modifying an existing one. There should be courses out there on Lynda.com or Udemy that are specific to building banners. The ad vendors should also have training or help files. I find that with Google's information is rather limited since they assume you have already built the ad. There is a company called Noble Desktop the runs in-person training and sells books about web development, Greensock, etc. If you're a visual person then you should obviously start with tools like Google Web Designer, or Adobe Animate. There are other tools out there, but Google and Adobe are by far the most popular and have lots of information out there. Once you get your feet wet with visual tools, then try to push yourself to learn HTML, CSS and JavaScript. That obviously includes Greensock, which is why you're here. Once you get into high-volume projects, you'll quickly realize how efficient GSAP is over using a visual tool. GSAP does has an official training book on Noble Desktop, but also check out Petr Tichy on Ihatetomatoes.com and his YouTube channel. He has tons of free tutorials on GSAP, React, etc. and e-books you can buy on his web-site. He's a great guy that I've learned so much from. Hope all this helps.
  2. explorerzip

    Creating a different ending in an animation

    One thing you might consider is simplifying your code into separate "in" and "out" animations. This line of code: .to(textMove_1, 2, {y:"-390px", yoyo:true, repeat:1, ease: Elastic.easeOut.config(1, 0.5), delay:0, repeatDelay:2 }) can be made into two lines: .to(textMove_1, 2, {y:"-390px",ease: Elastic.easeOut.config(1, 0.5) }) .to(textMove_1, 2, {y:"-690px",ease: Elastic.easeIn.config(1, 0.5) }, "+=2") Both methods basically achieve the same result, but the second method is much easier to read (shorter line of code) and for you to understand what is going on. You're basically limiting each line of code to do one thing. Greensock is a JavaScript library so good coding skills and habits are needed. Unfortunately, there's no way around that. Adobe Animate and Google Web Designer are solid options if you're more of a visual / timeline person. You do have the option of using graphical tools for layout and coding in Greensock for animation. The big benefit of learning to code with JavaScript / Greensock is being able to make a large number of changes easily. That is especially true for banner ads where you're typically making a bunch of them. All it takes is a Find and Replace in a code editor to change timings, order of animation, etc. That same workflow is tedious or impossible to do in a timeline applications like Adobe Animate, Google Web Designer, etc. They just are not made for doing that. Just be patient and stick it out and eventually you'll get there with coding.
  3. explorerzip

    Creating a different ending in an animation

    You should refrain from using absolute values like -4.8 for the "delay" or "repeatDelay" properties. If a client asks you to change the timing of a single line of code it will affect every following line. That quickly turns into a nightmare situation especially for more complex animations. You're using TimelineMax so make use of the position parameter and relative values like "+=1" to make sequencing easier. You should also go through your css and reduce the redundant code because it's good programming practice and makes the code a bit easier to read. Use something like this in your css. .flower { position: absolute; transform: scale(0); } You also don't need sizzle.js: <script src='http://cdnjs.cloudflare.com/ajax/libs/sizzle/2.2.0/sizzle.js'></script> for a simple banner like this. That also makes the first 24 lines of your js file redundant as well.
  4. explorerzip

    Are GreenSock plugins hosted in Google's CDNs?

    GSAP and many other popular JS libraries are hosted and Google Studio and are not counted against the total file size payload. In 99.999% of cases, you can load TweenMax to gain access to just about everything in GSAP. https://support.google.com/richmedia/answer/6307288?hl=en
  5. Illustrator and Photoshop have the same problems exporting images including SVG's. Illustrator exports a whole bunch of unnecessary SVG code. Last time I checked, Adobe XD and InDesign were very weak at exporting images; they just don't have the same options (or they're hidden) as Photoshop. It might be worthwhile looking at Affinity Photo / Designer, which are competitors to Photoshop / Designer. They open AI and PSD files, but I'm not sure about their exporting options.
  6. Yeah, Retina-sized PNG's are a workaround at best for today and won't be as viable once 4K and over monitors become the norm. Hopefully, one day Adobe will get its act together to address the bloated size of exported PNG and SVG files and we can stop relying on third-party tools. Not holding my breath on that one though since they haven't figured out how to standardize the UI, tools and menu structure across their apps.
  7. GSAP has integrated well with Animate / Flash for a very long time. You can continue to use Animate if you prefer the GUI interface while also leveraging the power of GSAP. https://greensock.com/GSAP-Animate-CC-2017 The syntax is largely the same in JavaScript or Animate. Hand-coded banners do not have to rely on web fonts and you are also able to link to free Google web fonts. The downside of using Google fonts is that there might be a slight delay in displaying the proper font in your ad. For example, the end-user might see the text render initially with Arial, Helvetica, etc. and then quickly switch to the correct font. An important thing to keep in mind is the licensing terms of fonts especially if it's tied to a specific client. You are technically distributing the font files (even if it's a PNG file) when you use them in an ad. So check with your legal folks to see if you can use those fonts on the web. Like Geedix said, you are also able to export text from Photoshop as a transparent PNG file. A typical workflow is where you export the PNG at double the resolution of your ad. For example, export the PNG at 600x500 px for a 300x250 px ad, etc. This trick will only work if you have the font file on your computer. If you don't have the font then Photoshop will have to create pixels from nothing, which will make the text fuzzier instead of crisper. Once you have the PNG, you "force" the image to display at correct size by manually entering the desired width and height properties in CSS and also using the "background-size: contain" property. Doing these steps allows you to support high density or Retina displays like on the Mac. Typically, I only "retina-size" PNG files for text so that it appears crisp. You can certainly "Retina size" photos or other images too, but I find that the increase in sharpness is hardly noticeable. Another important workflow issue when you move to hand-coding is that you have to compress all of your images especially PNG files manually to meet IAB specifications for banners. Luckily, you can use a service like TinyPng.com to do this. There is also a TinyPng plugin for Photoshop.
  8. explorerzip

    Timeline freeze page on load for 5 seconds

    You could also reproduce this in After Effects and output to MP4. An animated GIF might also work since there are very few colours in your illustration. Then make the GIF / MP4 as the background image.
  9. explorerzip

    AMPhtml WTF?

    Posts like this tend to be targeted at managers, etc and not developers. It's only natural that they'd use language like "better performance, "more secure", "increase ROI" to try to get people to adopt it.
  10. explorerzip

    AMPhtml WTF?

    Not quite sure where you got the idea that Google was not allowing JavaScript in banner ads because the AMP itself is a JS library. A move by Google to disable all other third-party JS libraries would have huge ramifications for libs like our beloved @GreenSock, Create, etc. I get the concern that it could be a move by the Googs to lock people into DoubleClick / GWD, but we'll have to see what happens. That being said, I get the rationale for wanting to move development forward by increasing performance / load times of ads.
  11. explorerzip

    Prevent repeatedly click on restart button

    You don't typically show a restart button until the banner is finished playing at least once. You can set your restart button as "visibility: hidden" in css, which prevents mouse clicks. You can use something like TweenLite.set(restart, {visibility: "visible"} or TweenLite.to(restart, 0.5, {AutoAlpha:1}) when you're ready to activate the button. The AutoAlpha property simultaneously sets opacity: "1" and visibility: "visible"
  12. explorerzip

    Controlling GWD animating wit Greensock

    Google Web Designer does have it's own timeline just like Adobe Flash / Animate. You can technically create animations using the GWD / Flash timeline and GSAP at the same time, but you might cause some conflicts like Shaun said. With these graphical tools I find it best to use them for layout only and use GSAP for animation only. Here's an old post from the forums that should help you insert GSAP into GWD. The exact steps might have changed since GWD is constantly evolving.
  13. explorerzip

    GSAP Default Frame Rate

    Are you referring to the IAB specs that specify a max frame rate of 24? https://iabcanada.com/content/uploads/files/IABCanada-AdGuidelines-English.pdf I've been dev'ing banners for years on ad platforms like DoubleClick, Sizmek and AdGear and have never had a scenario where I had to change the frame rate using Jack's or other methods. Banners made with GSAP or other tools should meet the specs for most if not all ad networks out there. Video files are a different story though and you'd have to change that in Adobe Premiere, After Effects, etc. The only scenario I can think of where you might have to change the frame rate would be where you're animating large numbers of elements at the same time and / or very quickly. In that case, it might be better to simplify the design and / or animation because you can never be sure of what the end user's device is going to be doing while the banner is playing. If your animation is too complex the end user might experience choppy performance.
  14. explorerzip

    Animation concepts question

    Have a look at this article that is a light read, but still gets the point across: https://blog.iconfinder.com/how-to-make-animations-look-realistic-e7ea00792f97
  15. explorerzip

    pausing the GSAP timeline from control in an iframe

    GSDevTools can control play / pause, playback speed, etc. but it's only available for Club Greensock members. https://greensock.com/gsdevtools I used to work at a company that made their own testing environment and I think they used jQuery to make play / pause buttons, etc. The buttons would fire functions like myAnimation.pause, myAnimation.restart, myAnimation.timescale, etc. Sorry, but I don't have any example to share.