BarryS

Also, I used my delay_mc tween to add the onComplete callback. Can I pause the timeline for a period of time and then call the function? Thanks, Barry

Hello all, I'm sure I'm being pretty dumb here as there must be an easier way of doing this. In my code below I've used an mc called delay_mc, that is off stage and out of view, and is simply there to pause my timeline. It works, but seems over the top. Thanks in advance, Barry var timeline:TimelineMax = new TimelineMax(); timeline.append( new TweenLite(Text1_mc, 1, {scaleX:1, scaleY:1, x:600, y:200, alpha:1, ease:Circ.easeIn}) ); timeline.append( new TweenLite(Text2_mc, 0.5, {x:370, y:255, alpha:1, delay:0.5})); timeline.append( new TweenLite(delay_mc, 0.1, {scaleX:1, delay:5, onComplete:FirstText})); function FirstText():void { Text1_mc.gotoAndPlay(2); Text2_mc.gotoAndPlay(2); }

Thanks for the link Randall... I'll definitely check it out for the tips and tricks. And thank you GreenSock! You are a star. Looking at your simplified code make is look so simple. So its tips like this that will make a me a better coder. I really must get into the habit of writing functions instead of long drawn out inferior code! Thanks again guys, your help and tips are invaluable.

Hello, Here's the scenario: I create e-Learning and in the past I have used simple jQuery to show and hide divs when buttons are clicked. I'm still doing this, but I'm now using TweenMax to add some nice animation. My problem is that if you click the buttons quickly in turn I get an animation build up. I would like only the last animation to finish, before the last button click animation starts. I've tried using Overwrite, but nothing seems to effect it. You may ask "But why would a user go click happy on the buttons?". But that just what some people do. Here's my jQuery and TweenMax code: var tl = new TimelineMax; $(document).ready(function() { $("#Person001_btn").click(function() { tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut}); tl.to(Person001, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut}); }); $("#Person002_btn").click(function() { tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut}); tl.to(Person002, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut}); }); $("#Person003_btn").click(function() { tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut}); tl.to(Person003, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut}); }); $("#Person004_btn").click(function() { tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut}); tl.to(Person004, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut}); }); $("#Person005_btn").click(function() { tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut}); tl.to(Person005, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut}); }); $("#Person006_btn").click(function() { tl.to([introduction, Person001, Person002, Person003, Person004, Person005, Person006], 0.75, {css:{left:"-600px", autoAlpha:0}, ease:Power2.easeInOut}); tl.to(Person006, 0.5, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeInOut}); }); }); And if it helps, here is the HTML: <div class="PeopleThumbContainer" id="PeopleThumbContainer"> <div class="Person"> <a href="#" class="Person" id="Person001_btn"> <p>Janine<br /> Cost Centre Manager<br /> Capita Symonds</p> <img src="images/people/person_001.jpg" /></a></div> <div class="Person"> <a href="#" class="Person" id="Person002_btn"> <p>Barry<br /> Web developer<br /> Capita L&D</p> <img src="images/people/person_002.jpg" /></a></div> <div class="Person"> <a href="#" class="Person" id="Person003_btn"> <p>Reginald<br /> Consultant<br /> Capita IB Services</p> <img src="images/people/person_001.jpg" /></a></div> <div class="Person"> <a href="#" class="Person" id="Person004_btn"> <p>Lisa<br /> Cost Centre Manager<br /> Capita Symonds</p> <img src="images/people/person_001.jpg" /></a></div> <div class="Person"> <a href="#" class="Person" id="Person005_btn"> <p>Nigel<br /> Cost Centre Manager<br /> Capita Symonds</p> <img src="images/people/person_001.jpg" /></a></div> <div class="Person"> <a href="#" class="Person" id="Person006_btn"> <p>Sarah<br /> Cost Centre Manager<br /> Capita Symonds</p> <img src="images/people/person_001.jpg" /></a></div> </div> <div class="PeopleContainer" id="PeopleContainer"> <div class="Introduction" id="Introduction"><a name="maincontent" id="maincontent"></a> <p>What do people like about working in Capita? What are the benefits of working for such a large organisation?</p> <p><strong>Select the employees on the right</strong> to see what they have to say about things?</p> </div> <div class="PeopleContent" id="Person001"> <img src="images/people/person_001_big.png" /> <div class="text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </div> <div class="PeopleContent" id="Person002"> <img src="images/people/person_002_big.png" /> <div class="text"> <p>Text 2</p> </div> </div> <div class="PeopleContent" id="Person003"> <img src="images/people/person_001_big.png" /> <div class="text"> <p>Text 3</p> </div> </div> <div class="PeopleContent" id="Person004"> <img src="images/people/person_001_big.png" /> <div class="text"> <p>Text 4</p> </div> </div> <div class="PeopleContent" id="Person005"> <img src="images/people/person_001_big.png" /> <div class="text"> <p>Text 5</p> </div> </div> <div class="PeopleContent" id="Person006"> <img src="images/people/person_001_big.png" /> <div class="text"> <p>Text 6</p> </div> </div> </div> Thanks is advance. Barry

Thanks Jamie. The appendMultiple is what I needed as it inserts the tween inbetween the other tweens either side in the timeline. I had gotten confused by the terminology. Although I have been working with javascipt and jQuery for a while now, I still get confused when reading some APIs. You worked out what was wrong by reading the API and understanding the code below. insertMultiple(tweens:Array, timeOrLabel:* = 0, align:String = normal, stagger:Number = 0) I however, even find that confusing! Thanks again.

Ooops, just realised that I can fix it with delay, like so. tl.insertMultiple([new TweenMax(GreyBlock, 0.3, {css:{height:"400px", autoAlpha:1}, delay:1, ease:Power2.easeInOut}), new TweenMax(GreyBlock2, 0.3, {css:{width:"952px", autoAlpha:1}, delay:1, ease:Power2.easeInOut}), ]);

Hello guys, Sorry to post yet again with something that is probably really simple, but I'm stuck again. In my code below I used insertMultiple to start two tweens at the same time, but they do not run in sequence in the Timeline. I had expected them to run after the first tween in the timeline had complete. var tl = new TimelineMax({onComplete:runHighlights}); tl.to(FirstImage, 1, {css:{left:"0px", autoAlpha:1}, ease:Power2.easeOut}); tl.insertMultiple([new TweenMax(GreyBlock, 0.3, {css:{height:"400px", autoAlpha:1}, ease:Power2.easeOut}), new TweenMax(GreyBlock2, 0.3, {css:{width:"952px", autoAlpha:1}, ease:Power2.easeOut})]); tl.to(SecondImage, 1, {css:{left:"830px", autoAlpha:1}, ease:Power2.easeOut}); tl.to(FrontPageText, 0.5, {css:{autoAlpha:1}, ease:Power2.easeOut}); tl.to(BottomNav, 0.5, {css:{top:"485px", autoAlpha:1}, ease:Power2.easeOut}); Originally, i had set each tween individually and used delays, but wanted to use a timeline to take advantage of the onComplere callback. Thanks in advance, Barry

I got there in the end (I must be tired this morning as it took me ages!). I knew I could repeat a timeline indefinitely like so: var tl = new TimelineMax({repeat:-1}); But I hadnt realised until now that I could simply write tl.repeat(-1) within a function. Now when I want to draw the users attention to the 'Next screen' button, I can simple call my function below which starts the timeline and repeats it. function runHighlights(){ highlights.play(); highlights.repeat(-1); }; I also hadnt known about insert and set as shown in your code below, so thanks for that. highlights.insert(TweenLite.set(box1, { css: { className: '+=glow' }, immediateRender: false }), 1); Cheers, Barry

You are fantastic! Thank you Jamie! I'll be able to use what you have done and recreate what I was using the plugin for. Thank again, Barry

Hi Jamie, Thank you for your reply and your example. I changed the vendor prefixes a little in the jsFiddle so that the fade in effect worked in FF. The result is still not as smooth as i'd like but is a step in the right direction. If you are insterested, I'm currently using this Shadow animation jQuery plugin available here: http://www.bitstorm.org/jquery/shadow-animation/ Carl, I'll also give your solution a try too. Thanks for your help, Barry

Hi Carl, Thanks for updating me here. I'm using the same DW and I havent found a fix yet but I will come back and update when I do. Thanks, Barry

HI Carl, I'm using DW CS4, and I'll have a look again this morning. It maybe now that my PC has had a rest over the weekend, the problem may have fixed itself. If it still doesnt work, i'll reinstall DW and see what happens. Thanks for you reply. Cheers, Barry

Hello again, Am I able to animate the box-shadow css property? I had been using a seperate jQuery plugin to make a button glow when I wanted a user's eyes to be drawn to it. Now I'm using the GSAP for all other animation I thought I'd ditch the other plugin, but I can't seem to recreate the glow. Here are the methods I have tried so far: Adding a class: TweenMax.to(NextBtn, 1, {css:{className:"+=Glow"},repeat: -1, delay:2, yoyo:true, ease:Power2.easeOut}); Tweening the css property: TweenMax.to(NextBtn, 1, {css:{boxShadow:"0px 0px 5px 2px #F00;"},repeat: -1, delay:2, yoyo:true, ease:Power2.easeOut}); Thanks in advance. Barry

Hi, Has anyone come across an issue where linking to a JS file in HTML crashes their Dreamweaver? I've tested it and TweenMax.min.js causes my DW to crash but TweenMax.js doesnt. I updated my verstion today (27th July) as I wanted the updates to the Bezier Plugin, so that may have something to do it. Whats weird is that I've been able to work with it for most of the day, but now it has started to crash. I'll carry on using TweenMax.js for the time being. Thank you in advance, Barry

You were correct in the assumption that the car artwork is oriented pointing up (assuming no rotation). I've just downloaded the latest version and used your code snippet and it does exactly what I wanted it to do. Thank you so much for you help.

I've just realised that if I change the bezier type to 'soft' I can get the image to move the way I want it to. Here's my code. tl.to(Vehicle1, 1, {css:{bezier:{type:"soft", values:[{x:50, y:-100}, {x:200, y:0}], autoRotate:true}}, ease:Power1.easeInOut}); Now I just need to work out how to rotate the image so that the vehicle looks like it is driving forward. I'd really appreciate it if you could help me with that. Many thanks, Barry

Hi, First let me say how great I think the GSAP is! It is brilliant. I've been looking forward to using the BezierPlugin and I'm just trying to get to grips with it now, but im struggling a little. What i'd like to do is simply take an image of a vehicle (looking from above) and to make it animate around a corner. So that the vehicle goes up, around the corner, and then down again. I can do the up and down part ok, and I'm using the timeline, but I cant seem to work out the bezier part. I'll also need to auto rotate the vehicle, but I'll move onto that next. In your syntax example below, can you point out to me how the array works, as the image I'm trying to animate moves in a 'S' shape (as if the S is 90 degrees clockwise). TweenMax.to(document.getElementById("myDiv"), 5, {css:{bezier:[{left:100, top:250}, {left:300, top:0}, {left:500, top:400}]}, ease:Power1.easeInOut}); I've saved this text, so if you'd like me to delete this comment and start another thread I can do so. Kind regards, Barry