sorciereus

Here is my cleaned up code. I saw about the relative tweens, however was a bit confused how to pass a non relative tween as a variable to the function? Also is it possible to implement this to have a seperate movieclip vertical infinite scrolling from the same button click? You would think it's as easy as changing x values to y and width to height and creating a vertical movieclip, but it isn't. I feel like I've seen ways to do this utilizing timelinelite or timelinelite as well. Any links to threads? You'll have to forgive me I'm only less than a year doing Advanced AS3 and is my first Object Oriented programming language that I've learned. I appreciate the assistance I receive on these forums. That said, Could BlitMask be a good solution to this? var startX:Number=parent_mc.x; var distanceToScroll:Number = 345; var lastItemX:Number = parent_mc.width var tweenFlag:Boolean = false; parent_mc.x = startX; function scrollIt() { TweenMax.to(parent_mc, .54, {x:String(distanceToScroll), onComplete:reset}); } function reset() { //move all clips over to the right for each (var mc in parent_mc) { mc.x+=distanceToScroll; if (mc.x >= lastItemX) { mc.x-= lastItemX; } } //shift the parent so it looks like nothing moved parent_mc.x = startX var tweenFlag:Boolean = false; } function reset1() { //move all clips over to the right for each (var mc in parent_mc) { mc.x-=distanceToScroll; if (mc.x < 0) { mc.x+=lastItemX; } } //shift the parent so it looks like nothing moved parent_mc.x = startX; var tweenFlag:Boolean = false; } function scrollItr() { TweenMax.to(parent_mc, .54, {x:String(-distanceToScroll), onComplete:reset1}); }

Nvrmind I resolved that issue as well - it's just important that your movieclips within parent_mc are exactly to the pixel edge to edge.

Hi. One more question.. Any clue why it seems to add/loose pixels after clicking the arrows for awhile?

Hi there. I was using the new IE to emulate older IE. Unfortunately I don't have access to real older versions on the emulator.

Here is the solution in case anyone wants to use it - pretty nifty little infinite scrolling gallery import com.greensock.*; var startX:Number=parent_mc.x; var distanceToScroll:Number = 345; var lastItemX:Number = parent_mc.width parent_mc.x = startX function scrollIt() { TweenMax.to(parent_mc, .54, {x:String(distanceToScroll), onComplete:resetDelay}); } function resetDelay(){ TweenLite.delayedCall(.1, reset); } function reset() { //move all clips over to the right for each (var mc in parent_mc) { mc.x+=distanceToScroll; if (mc.x >= lastItemX) { mc.x-= lastItemX; } } //shift the parent so it looks like nothing moved parent_mc.x = startX //scroll it again after 1 second //TweenLite.delayedCall(.2, scrollIt); } function resetDelay1(){ TweenLite.delayedCall(0, reset1); } function reset1() { //move all clips over to the right for each (var mc in parent_mc) { mc.x-=distanceToScroll; if (mc.x < 0) { mc.x+=lastItemX; } } //shift the parent so it looks like nothing moved parent_mc.x = startX //scroll it again after 1 second //TweenLite.delayedCall(.2, scrollIt); } btn.addEventListener(MouseEvent.CLICK, toggleMask) function toggleMask(e:Event = null):void{ parent_mc.mask = (parent_mc.mask) ? null : mask_mc } function scrollItr() { TweenMax.to(parent_mc, .54, {x:String(-distanceToScroll), onComplete:resetDelay1}); } toggleMask(); next_btn.addEventListener(MouseEvent.CLICK, next) function next(e:MouseEvent):void { scrollIt() } previous_btn.addEventListener(MouseEvent.CLICK, next1) function next1(e:MouseEvent):void { scrollItr() }

Ok thank you for your time

Hello GreenSock community! I have a question for you. I've been working on a image scroller of some images, and got this working how'd I'd like. However my client has now requested an infinite scrolling gallery. I've done some research and found a script that seems to have the potential to do what I want to do, however it would need some modifications to behave as the client has requested. So right now this script auto scrolls a row of images, adding the appropriate image on to the end of the row with each scroll. I'd like to modify this to have it not auto scroll, but be controlled by a left and right arrow, and be scrollable to either the left or right. If anyone could help me out that would be great. Here is the code I have so far: import com.greensock.*; var startX:Number=parent_mc.x; var distanceToScroll:Number = 44; var lastItemX:Number = parent_mc.width function scrollIt() { TweenMax.to(parent_mc, .54, {x:String(distanceToScroll), onComplete:resetDelay}); } function resetDelay(){ TweenLite.delayedCall(.5, reset); } function reset() { //move all clips over to the right for each (var mc in parent_mc) { mc.x+=distanceToScroll; if (mc.x >= lastItemX) { mc.x-= lastItemX; } } //shift the parent so it looks like nothing moved parent_mc.x = startX //scroll it again after 1 second TweenLite.delayedCall(.2, scrollIt); } btn.addEventListener(MouseEvent.CLICK, toggleMask) function toggleMask(e:Event = null):void{ parent_mc.mask = (parent_mc.mask) ? null : mask_mc } toggleMask(); TweenLite.delayedCall(1, scrollIt); Here is it moving backward import com.greensock.*; var startX:Number=mask_mc.x; var distanceToScroll:Number = 44; var lastItemX:Number = parent_mc.width parent_mc.x = startX function scrollIt() { TweenMax.to(parent_mc, .54, {x:String(-distanceToScroll), onComplete:resetDelay}); } function resetDelay(){ TweenLite.delayedCall(.5, reset); } function reset() { //move all clips over to the right for each (var mc in parent_mc) { mc.x-=distanceToScroll; if (mc.x < 0) { mc.x+=lastItemX; } } //shift the parent so it looks like nothing moved parent_mc.x = startX //scroll it again after 1 second TweenLite.delayedCall(.2, scrollIt); } btn.addEventListener(MouseEvent.CLICK, toggleMask) function toggleMask(e:Event = null):void{ parent_mc.mask = (parent_mc.mask) ? null : mask_mc } toggleMask(); TweenLite.delayedCall(1, scrollIt); Let me know how to make this scroll on onclick only and left and right - I feel like it's close...

Thanks for confirming - that is straight forward enough.

Hi there. Can someone demonstrate how I would pass a numerical value to positioning setting such as x or y that is set in a variable from an array using Tweenlite if possible? (tweenmax?) For example, the Flash tween version: var myNumber : Number = 0; var myArray : Array [30, 20, 10]; new Tween(instance_mc,"x",Regular.easeOut,instance_mc.x,myArray[myNumber],1,true); Thanks for any help!

Hi there. This question isn't limited to Greensock but was hoping I could get a little help here. I have an image scroller that basically uses buttons to relatively position a movieclip containing a horizontal line of images. There is a mask over an area so that when you click a left or right arrow, it relatively positions the movieclip under the mask and reveals a section of the movieclip. I have this working fine, however the one functionality I'd like to add, is when the left or right border of the movieclip is reached, the appropriate button is disabled so that the movieclip isn't positioned outside of the mask. Or it loops back to the starting x position. Here is the code: import flash.display.MovieClip; import flash.events.MouseEvent; import com.greensock.*; import com.greensock.easing.*; function init():void { TweenLite.to(products_mc, 1, {x:696, alpha:1}); } init(); function productsLeft(events:MouseEvent):void { TweenLite.to(products_mc, .75, {x:"-255"}); } function productsRight(events:MouseEvent):void { TweenLite.to(products_mc, .75, {x:"255"}); } arrowL_btn.buttonMode = true; arrowL_btn.addEventListener(MouseEvent.CLICK, productsLeft); arrowR_btn.buttonMode = true; arrowR_btn.addEventListener(MouseEvent.CLICK, productsRight); if (products_mc.x == 696) { arrowR_btn.visible = false; arrowR_btn.buttonMode = false; } if (products_mc.x == -1086) { arrowL_btn.visible = false; arrowL_btn.buttonMode = false; } /* buttons */ arrowL_btn.doubleClickEnabled = true; arrowR_btn.doubleClickEnabled = true; arrowL_btn.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler, false); arrowR_btn.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler, false); function doubleClickHandler(evt:MouseEvent):void { evt.stopPropagation(); }

Ok thank you I get it now - thanks!

Hi - so I don't have a fla file right now - but all I'm trying to create is "replay" button that would simply replay a series of tweenlite animations. Could be nested with timelinelite or timelinemax, whichever is better. Does that makes sense?

Thanks for the reply!

Hi there. This is a straight forward question. What is the best technique for coding a replay button in Greensock AS3? Would TimelineMax be best? Could I see an example? Thanks in advance for any assistance.

Hm unfortunately this doesn't do the trick - however - if I remove the "scale" in the timelinelite code, the black outlines no longer appear - my design isn't dependent on the objects scaling so for this that's ok - but this seems like something we could try to figure out for the future.

Hi there - I have an animation using tweenlite to tween some divs that contain png w transparent backgrounds. This looks great in all browsers expect IE8 there are blackout lines around the pngs. I know there are fixes for jquery fades and whatnot in IE8 for transparent PNGs, however none of the ones i've tried work on my file. Here is the timelinelite doing the tweening: var tl = new TimelineLite(); tl.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare1", .25, {alpha:1, scaleX:1.6, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) ; and here is the css #lens_flare1 { opacity:0; position:absolute; left:22px; top:5px; background:transparent url('images/lens_flare.gif') no-repeat; width:59px; height:53px; } #lens_flare2 { opacity:0; position:absolute; left:73px; top:10px; background:transparent url('images/lens_flare.png') no-repeat; width:59px; height:53px; } #lens_flare3 { opacity:0; position:absolute; left:118px; top:21px; background:transparent url('images/lens_flare.png') no-repeat; width:59px; height:53px; } #lens_flare3 { opacity:0; position:absolute; left:118px; top:21px; width:59px; height:53px; background:transparent url('images/lens_flare.png') no-repeat; } #lens_flare4 { opacity:0; position:absolute; left:233px; top:50px; width:59px; height:53px; background:transparent url('images/lens_flare.png') no-repeat; } Any tricks for this? Apologies for not posting to Codepen but have super limited time at the moment to get setup on that - Any help is greatly appreciated. ~julia

Thanks for the reply. I'll start using code pen to show you working code - thanks for the answers here I'll look them over - interesting this thread didn't show in my account so I started a similar one with my progress - apologies for the duplicate.

So I have a loop of lights lighting and diming - right now I have this happening in timelinelite with results that I find satisfactory. However, I'm wondering if any of you devs have a even more streamlined way of accomplishing this via timelinemax and an array? Can you let me know anymore details about the technic I'm demonstrating here? var tl = new TimelineLite(); tl.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare1", .25, {alpha:1, scaleX:1.6, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) ;

What's a better way to make a sequence like this shown here, but utilizing timelinemax? TweenMax.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2, repeat:3, repeatDelay:1, delay:1}); TweenMax.to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.25, delay:1.25}); TweenMax.to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3, repeat:3, repeatDelay:1.1, delay:1.1}); TweenMax.to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.35, delay:1.35}); TweenMax.to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2, repeat:3, repeatDelay:1, delay:1}); TweenMax.to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.25, delay:1.25}); TweenMax.to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4, repeat:3, repeatDelay:1.2, delay:1.2}); TweenMax.to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1, repeat:3, repeatDelay:1.37, delay:1.37}); After this series completes further animation will resume'.

Yeah I tried that one before doesn't seem to do the trick.

Thanks. Tried that and no dice.

Hello - My last thread became a new topic so I'm starting one specific for this one. Here is the original thread: http://forums.greensock.com/topic/8978-animated-rollovers-not-functioning-properly/ So I'm trying to use JQuery (document).ready to load some tweenlite rather than window onload. This isn't working so far, I know the tweenlite works because it's working with window.onload - here is the code: <body> <div id="container"> <div id="lens_flare"><img src="images/lens_flare.png" /></div> <div><img src="images/new_season.png" id="share" /></div> <div id="love"><img src="images/new_you.png"></div> <div id="my_logo"><img src="images/my_logo.gif"></div> </div> <!--- The following scripts are necessary to do TweenLite tweens on CSS properties --> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> jQuery(document).ready(function(){ console.log("DOM is ready"); jQuery(window).on("load", function(){ console.log("window is loaded"); TweenLite.to("lens_flare", .25, {alpha:1, scaleX:1.2, scaleY:1.2, delay:1}); TweenLite.to("lens_flare", .25, {alpha:0, scaleX:1, scaleY:1, delay:1.25}); TweenLite.to("container", 1, {autoAlpha:1, ease:Quad.easeIn}); TweenLite.to("share", .75, {delay:3, alpha:1}); TweenLite.to("love", .5, {alpha:1, delay:3.5}); TweenLite.to("my_logo", .75, {left:0, alpha:1, delay:4}); }); }); </script> </body> This displays as blank. Any help? Thanks!

So would this be correct? <script> jQuery(document).ready(function(){ console.log("DOM is ready"); TweenLite.to("holiday", 1, {alpha:1, delay:4}); TweenLite.to("starts", .75, {alpha:1, delay:4.8}); TweenLite.to("buy", .5, {alpha:1, top:142, ease:Back.easeOut, delay:5.5}); }); </script>

Ok, I have one more javascript/jquery question - so also the window.onLoad isn't a good way for me to load my gsap units - I need to use Document.ready - Can you show me how that would look in the context of the code I initially posted? Thanks for any help!

Hello - so I have another question - this may be more of a Jquery question. For the particular site I'm researching these methods for, I can't use $ to reference Jquery code. It breaks with the other site code. For this here: http://codepen.io/rhernando/pen/kcday Do you have an alternative method to referencing: var element = $("#element"), ? Thanks in advance for any help -