dmcknight

Is there any way to set the speed of the automatic snap?

Did you find this thread in search results for "cycle" and "gsap"? I did. I know this thread is super old, but I've been working on a similar problem recently that requires a solve for what Carl and garyw were mentioning just above. We are entering the age of HTML5 Banners, and this topic is applicable as a foundation for cycling HTML5 banners. The challenge is to continously loop (crossfading, in this case) through an array of images, and when you reach the end, have the last element crossfade back to the first element seamlessly and then repeat... My solution uses plain javascript to 'cut' the first item from that array (making the rest of the array shift left one space) and then 'paste' that first item at the end of the array. Repeatedly crossfading only the first two items in the array ( 0 and 1 ), then doing the cut/paste to the array results in a continuous cycle that never has to 'restart' between the last item and first items...because it never reaches the end! Setup CSS: #imgcontainer { position:relative; } #imgcontainer img { position:absolute; top: 0; left: 0; opacity: 0; } #imgcontainer img:first-child { opacity:1; } This css sets up a container (#imgcontainer) to hold all the images, makes the images stack in front of each other, and makes them all transparent except the first one. Javascript: var imgs = $.makeArray( $('#imgcontainer img') ) function crossfade(){ TweenMax.to(imgs[0], 0.5, {css:{autoAlpha:0}}) TweenMax.to(imgs[1], 0.5, {css:{autoAlpha:1}}) imgs.push( imgs.shift() ) } var cycle = setInterval(crossfade,3000) The first line uses jquery's makeArray to create an array of references to all the images inside the designated container. If you aren't using jquery, this can be done by defining a traditional javascript array of individual document element references for each of the images. Next, we define a crossfade function. Inside the crossfade function, two TweenMax calls are used to fade out the first image (which would be the one that is initally opaque), while fading in the second one. They happen synchronously. You can add a small delay to the fade out call to make sure the new image is almost showing before the old one disappears, or you can adjust the speed of the two animations to your liking. At the end of the crossfade function, the array is cycled left using the javascript push() and shift() methods. The push() method "pastes" something new onto the end of the array. And in this case, that something is the first element of the array which we have "cut" from the beginning using the shift() method. I have found this array push/shift combo to be useful in games where you want to seamlessly cycle through a sequence of elements multiple times. Finally, the 'crossfade' function is set to repeat every 3 seconds using setInterval(). Each call represents an individual 'slide' in the slideshow or 'frame' in the banner. GSAP HTML5 BANNER LOOPING: Here's how the above Javascript would look if you wanted to limit the number of 'loops' of the whole sequence: var framesShown = 0 var loops = 3 // limit to three loops of all the frames var imgs = $.makeArray( $('#imgcontainer img') ) var framesLimit = imgs.length * loops function crossfade(){ TweenMax.to(imgs[0], 0.5, {css:{autoAlpha:0}}) TweenMax.to(imgs[1], 0.5, {css:{autoAlpha:1}}) imgs.push( imgs.shift() ) framesShown++ if (frameShown == framesLimit){ window.clearInterval(cycle) } } var cycle = setInterval(crossfade,3000) NOTE: You could set the framesLimit variable to any number so the banner can 'end' on the first or last or a middle frame. In that case just disregard the line where "loops" is defined.

I'm downloading DC Studio (enabler) and some templates now to check it out.

Fortunately, GSAP is heartily supported by the major ad-media players, and using the full TweenMax library (from CDN) is not even counted against the file size for most of them. Basic GSAP how-to's for each of the popular ad banner-generating apps are going to be in high demand.

alwayzambitious is correct that in using GSAP with GWD, the GWD interface serves mainly as a layout tool for the banner. This process is fresh in my mind, so here's a mini-tutorial to help you get started: 1. STAGE LAYOUT: Create a new banner in GWD at the desired size, Place your assets on the stage, putting the layers in the deisred top-to-bottom order. Then, using the Properties panel, give each element an ID, just like you would for Flash or HTML/CSS. These IDs will be used in your GSAP js code later on. 2. ADD A TAP AREA WITH CLICK TAG: (OPTIONAL) This element is for when someone taps or clicks the banner or button to go to the destination page. From the Components panel, drag a Tap Area onto the stage on top of everything. Generally this is resized to cover the whole stage, but it can also be for a smaller call to action element on the banner. Usually media vendors will require a 'clickTag' for the Tap Area, just like for Flash banners: On the Events panel, click the '+' in the bottom left to make a new Event that will be associated with the Tap Area. Going through the dialog to make an Event, set the following: Target: Target -> gwd-taparea_1 (that's the default id GWD makes for the first TapArea you add to the stage), Event: Tap Area -> Touch/Click, Action: Google-Ad -> Exit, Receiver: gwd-ad, Configuration: Metric ID -> clickTag, and URL -> any base URL for the destination page (this gets overridden with a tracking link by the media folks). Then click SAVE on the Event dialog. 3. ADD A TRIGGER EVENT FOR YOUR GSAP CODE: On the Events panel, click on the '+' then use these settings for the dialog: Target: Target -> 'page1' (that's the default name GWD gives to the initial state of the banner). Event: Page -> Page loaded, Action: Custom -> Add Custom Action. For the new Custom Action, give it a name like 'animation'. GWD will put 'gwd.' in front of it in order to keep it in the same namespace as the rest of the banner code. In the space provided for the function code, just add a javascript comment for now. Your GSAP code will go there later. Click SAVE on the Event panel. 4. ADD YOUR GSAP CODE: Save the GWD project and close it, then open the .html file that was generated by GWD in your favorite text editor (or use GWD's built in Code View) Add <script> tags to the html to import the GSAP libraries you wish to use. Find where your Custom Action function was created ('gwd.animation' for example) and put all of your GSAP-related code inside that function, including any 'helper' functions. At this point it is just like creating a GSAP animation on a web page, except GWD has done the initial setup and layout for you. Note that the GWD timeline Play button will not trigger your GSAP animation. You must use the Preview function to execute the code in a browser instead. Hope that helps!