explorerzip

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.

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.

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.

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/

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.

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.

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

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

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.

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.

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.

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.

The code you copy out of CodePen is missing tags like DOCTYPE, head, etc, These are needed in a HTML file to work in a browser. Codepen is a prototyping tool mainly and it doesn't include these tags to make it faster for a developer to write up something quick. That's why you can't simply copy code straight out of CodePen and into a code-editor. The bare minimum HTML markup you need will look something like this: http://htmlshell.com/ I'm surprised you purchased a Club Greensock plan because almost all of the tools are free. You definitely don't need the bonus tools to learn. You don't need the bonus tools to do a lot of production work either. In terms of learning GSAP, have a look at https://ihatetomatoes.net/ for some free tutorials. You can also find him on YouTube. You can also learn the basic of HTML, CSS and JS at https://www.w3schools.com/ There are a number of issues with the HTML code you pasted. 1. The line: "ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" will only show text in the browser. This is how you link to an external css file: <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"> Even with the correct syntax, this external css file would not do anything because you did not load the Jquery UI plugin: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> The thing is you actually don't need the Jquery plugin for most projects. 2. These lines: "Get an all-access pass to premium plugins, offers, and more!" "JOIN THE CLUB" will cause an error in your browser's inspector because they are not valid javascript. I think you were trying to write a comment so you'll have to have to type "//" in front of your text. In most code editors like Sublime Text, the line will change colour so you know that it's commented out. 3. These lines will not do anything and will cause errors in your browser inspector because there is no "element" object in your HTML code. TweenLite.to(element, 1, {scrambleText:"THIS IS NEW TEXT"}); TweenLite.to(element, 1, {scrambleText:{text:"THIS IS NEW TEXT", chars:"XO", revealDelay:0.5, speed:0.3, newClass:"myClass"}}); Speaking of the browser inspector, you need to get comfortable using that tool to debug problems in your code. When you have any browser open, press the F12 key (it could be a different key in Internet Explorer, Edge, etc) to bring up the browser inspector. You can also right click anywhere in the browser window and select "Inspect". You'll see an an Elements or Inspector tab that shows you how the browser has interpreted the HTML document aka the Document Object Model or DOM. There's also a Console tab that will show errors. 4. You didn't define a background colour for your grey and orange boxes, which is why you can't see them. Here's how I did it

Since GSAP can tween just about any element, then it should be able to work with this plugin. Would it not make sense to use GSAP's Draggable plugin (which should do everything you need) so you only have to learn one syntax?

Great work. I did notice, however, that scrolling with the mouse wheel is quite jerky: moves rather quick from left to right. You might want to lock the scrolling until the sun moves all the way from left to right. The animation is fine if you click the scrollbar.

IMO, the only reason to use GWD is to make rich-media banners for Studio. Much faster to use one of Google's pre-made rich-media templates that contain code for the YouTube player and tracking, expanding, etc. vs writing that code from scratch.

Have a look at the web-site deconstruction videos from Ihatetomatoes.net. Could provide some insight into how to go about taking apart a web-site to see what is going on under the hood. You'll need to know how to use the browser inspector to see these details, but be forewarned that it can be really intimidating to look at a wall of code. https://ihatetomatoes.net/waaark-com-website-deconstruction/

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.

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.

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.

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

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.

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.

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.

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.