Search the Community

Very new to integrating gsock into banner ads that will eventually be sent to a 3rd party host, ADGEAR, for serving up to my client's ad venders. I've been trying to setup a banner in Animate CC. I use a mouseover to increase the alpha of a movieclip called "darken", which effectively darkens the stage, and then I use mouseout to change the alpha property of "darken" to lighten the stage once again. Just want a nice way to show user interaction with my banner. Based my banner setup on an Animate CC template found here on this website, GSAP_AdStarter_Demo_2017.fla. It works perfectly when I launch the banner in my browser, but when I use ADGEAR's test site, for some reason, the mouseover animation works, but the mouseout animation fails to play. I think this might have something to do with how I'm targeting the "root" to trigger the movieclip animation "darken". I tested the GSAP_AdStarter_Demo_2017.fla on ADGEAR's test page and it also works perfectly, so I'm pretty sure there's some problem with my coding. Any help would be much appreciated!! Thanks in advance. //Enables ClickTAG for ADGEAR stage.enableMouseOver(10); this.clickButton.on("click", function(evt) { ADGEAR.html5.clickThrough("clickTAG"); }); this.clickButton.cursor = "pointer"; //set scope activation object var root = this, tl; root.on("mouseover", function(){ TweenMax.to(this.darken, 1.25, {alpha:1, ease:Back.easeOut}); }); root.on("mouseout", function(){ //if the ad is asleep, wake the ad to allow animation to complete ad.wake(1500); TweenMax.to(this.darken, 1.25, {alpha:0, ease:Back.easeOut}); }); Files.zip

Hello everyone! I am trying to use GSAP with Animate.css to create flexible animation for banner ads. I know this is possible but I would like to know the best way to use GSAP + Animate.css to improve my coding. I've provided link for codepen! Any suggestion would be great! If you have experience with GSAP + Animate.css please comment here! What is Animate.css? --> a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness. Thanks GSAP Masters! HTML: <div id="circle"></div> CSS: #circle { width: 200px; height: 200px; background: #222; border-radius: 200px; } Javascript: window.onload = init; function init() { TweenMax.set("#circle", {alpha: 0, x: "+=100px", onComplete: a}); } function a() { TweenMax.to("#circle", 1, {delay: 1, alpha: 1, onStart: aa}); TweenMax.to("#circle", 1, {delay: 1.5, onStart: ab}); TweenMax.to("#circle", 1, {delay: 2, onStart: ac}); TweenMax.delayedCall(2, ad); } function aa() { $("#circle").addClass("animated wobble"); } function ab() { $("#circle").css("margin-left","100px"); } function ac() { $("#circle").addClass("animated bounce"); } function ad() { $("#circle").removeClass("animated bounce wobble") }

Is it supported by GSAP the animation for venetian mask effect animation? I surf the net about making a venetian mask effect using GSAP. If you guys know how to make please post here thanks! The animation look like this but using GSAP! Reference of animation: https://codepen.io/dudleystorey/pen/HrFBx

Hello! I am going to make some GSAP banner ads for the Google Network Display Ads. Google requires a .zip file of all HTML, CSS, JS, and images - my question is: this looks and smells like a good match for GSAP!!! so should I 1. Include all the folders full of jQuery and TimeLineMax, etc.... 2. Include just HTML with an embedded style sheet and then absolute link to the CDN? Any best practices for sending GSAP banner ads to the Google Network will be helpful and welcome.

Hi, probably an easy question for most of you, but I searched a lot and I didn't find anything (english isn't my first language so...) I'm obviously a new user of GSAP and I saw uses of x and y properties used to move an object, is it possible to do it without CSSPlugin? Maybe I should put this question in banner section, because I would like to only use TweenLite.js for banner ads, a matter of very restrictive weight in multiple platforms Ads Exchange campaign. In short, I mostly want to know what I can do with TweenLite.js only. Can we move object like this TweenLite.to(element, duration, {x:200}); ? And last question : Is it better to use .delay() to create a kind of timeline or we can chain tweens in each onComplete for the next one. My test didn't work at all for onComplete but I need a confirm to be sure I didn't made a mistake. Thank you for your attention

http://doubleclickadvertisers.blogspot.com/2015/07/making-it-easier-to-run-mobile-friendly.html A step by step tutorial https://www.doubleclickbygoogle.com/articles/how-build-html5-ads-step-step-workshop/ also linked in this post HTML5 Toolkit http://www.richmediagallery.com/resources/html5-toolkit#h5ToolkitPath:%2Fhtml5%2Ftoolkit~