tmgale

Hi everyone, I was wondering what everyone's favourite method of creating banner ads with GSAP is? I am fairly new to using GSAP (Loving it so far!), I have currently tried two ways of approaching creating banner ads with GSAP. 1. HTML, JS, Image sprite In this method I write the HTML structure, create an image sprite and use CSS positioning to arrange elements into place that exist in the image sprite. I then use GSAP to animate in the various elements. While I liked the simplicity of this method, I found it to be cumbersome having to manually adjust divs and positioning to correspond with the image sprite. I also found that it reduced the flexibility of the design. For example, when I wanted to make text variations, the constant readjustment of div size and positioning made the task very time-consuming. 2. Animate CC and GSAP This has been documented well on this site (http://greensock.com/animatecc-quickstart). The ability to add code into a program like animate CC seems like a powerful mix. However, when trying to create animations with complex scenes, I found the constant need to 'test movie in browser' (ctrl + enter) felt quite slow. The stage can also become very cluttered as GSAP only doesn't apply effects (positioning, opacity etc) so I felt that it was becoming hard to work with. As I have said, I am fairly new to GSAP and creating banner ads. Seeing how popular animate CC + GSAP is, I am sure I am missing something here/ doing something wrong. So, does anyone have additional methods of creating banner ads? or perhaps some workflow tips? Thanks! Tom

Thanks Jonathan, Turns out the issue was that I needed to assign the name in the properties panel for it to be picked up. All working now!!

Hi All, I am trying to play around with the demo file provided in the 'Quick Start: GSAP and Adobe Animate CC' article; https://greensock.com/animatecc-quickstart All I am trying to do is successfully add an additional symbol into the timeline and apply any animation to it in the js file. Here's what I am doing: 1. Create new layer - 'Layer 1' 2. Create new symbol (a red rectangle) - 'test' 3. Select symbol ('test') and drag onto stage with 'Layer 1' selected. 4. Duplicate existing .from in tl and change symbol name to be 'test' 5. Watch in despair as ad display blank I cannot for the life of me get this to work without receiving the error 'Uncaught Cannot tween a null target.' along with a blank ad. It seems that the symbol isn't being referenced in the js file. Here is the original js he uses; //set scope activation object var root = this, tl; //prevent children of mc from dispatching mouse events root.cta_mc.mouseChildren = false; root.cta_mc.on("mouseover", function(){this.gotoAndPlay(1);}); root.cta_mc.on("mouseout", function(){this.gotoAndStop(0);}); root.logo_mc.on("mouseover", function(){ TweenMax.to(this, 1.25, {scaleX:1.05, scaleY:1.05, ease:Elastic.easeOut}); }); root.logo_mc.on("mouseout", function(){ TweenMax.to(this, 1.25, {scaleX:1, scaleY:1, ease:Elastic.easeOut}); }); //gsap timeline tl = new TimelineMax(); tl.from(root.headline_mc, 1, {y:"500", ease:Back.easeOut}); tl.from(root.tagline_mc, .5, {y:"510", ease:Back.easeOut}, "-=.5"); tl.from(root.logo_mc, .75, {scaleX:0, scaleY:0, alpha:0, ease:Back.easeOut}, "-=.25"); tl.to(root.cta_mc, .75, {scaleX:.85, scaleY:.85, repeat:-1, yoyo:true, repeatDelay:0.25, ease:Expo.easeInOut}); I am just adding a tl.from above the first tl.from (See below); //set scope activation object var root = this, tl; //prevent children of mc from dispatching mouse events root.cta_mc.mouseChildren = false; root.cta_mc.on("mouseover", function(){this.gotoAndPlay(1);}); root.cta_mc.on("mouseout", function(){this.gotoAndStop(0);}); root.logo_mc.on("mouseover", function(){ TweenMax.to(this, 1.25, {scaleX:1.05, scaleY:1.05, ease:Elastic.easeOut}); }); root.logo_mc.on("mouseout", function(){ TweenMax.to(this, 1.25, {scaleX:1, scaleY:1, ease:Elastic.easeOut}); }); //gsap timeline tl = new TimelineMax(); //Added new symbol ref in line below tl.from(root.test, 1, {y:"500", ease:Back.easeOut}); tl.from(root.headline_mc, 1, {y:"500", ease:Back.easeOut}); tl.from(root.tagline_mc, .5, {y:"510", ease:Back.easeOut}, "-=.5"); tl.from(root.logo_mc, .75, {scaleX:0, scaleY:0, alpha:0, ease:Back.easeOut}, "-=.25"); tl.to(root.cta_mc, .75, {scaleX:.85, scaleY:.85, repeat:-1, yoyo:true, repeatDelay:0.25, ease:Expo.easeInOut}); Can anyone point me in the right direction, or point out to me what I am doing wrong? Thanks!! Tom

Thanks for the demo Jonathan! Really insightful!! I should now be able to achieve the effect I want! Thanks again

Hi All, I am trying to achieve a blinking eye effect. Ideally, I would like the eye to travel down from the top to half in the eye, this would simulate the eyelid moving down the eye to meet the other eyelid. I have tried scale with transformOrigin to achieve the effect as well as opacity 0. Opacity 0 seems to give the best effect, but the visible fade doesn't look too great. Would I need to use SVGmorph to achieve this? Can anyone point me in the right direction? My codepen attached shows the example. Thanks, Tom