Jump to content


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

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

explorerzip's Achievements


Newbie (1/14)



  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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/
  6. 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.
  7. 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.
  8. 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
  9. 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
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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
  15. 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?