tomKnox

Thank you. That clears some things up for me. Pretty hard to both brush up on gsap, learn tailwind and html at the same time Cheers

Hello there During some brushing up on my greensock skills (I haven't touched gsap since the heydays of Flash) I am late, but slowly transitioning into HTML / javascript. Now we are talking about transitions. Please see the codepen above. The button does not tween in. Because of - I assume- transition ease-in-out duration-200 This does not seems to work: <button class="py-3 px-5 w-full font-semibold border hover:border-gray-300 rounded-xl focus:ring focus:ring-gray-50 bg-white hover:bg-gray-50 transition duration-200" type="button">Create Free Account</button> Removing transition ease-in-out duration-200 Does seem to allow the button to tween in. https://codepen.io/nitras/pen/oNPdjZB

TThank you. This clears things up. Good example too. However, the introWrapper needs to be closed off after the site wrapper in order for it to work. const intro = useRef(null); const introWrapper = useRef(null); const navigation = useRef(null); useLayoutEffect(() => { let ctx = gsap.context(() => { let tl = gsap.timeline({ defaults: { ease: Power3.easeInOut }, onComplete: function () { display: 'none'; }, }); //various intro-cover animations tl.to('.intro-cover', { delay: 0.5, autoAlpha: 0 }); tl.from('.navigation', { opacity: 0, delay: 1.34 }, 0.23); }, introWrapper); return () => ctx.revert(); }, []); return ( <main> <div ref={introWrapper}> <Intro intro={intro} /> <div className="site-wrap"> <Navigation navigation={navigation} /> //rest of site </div> </div> </main> );

Hi there. Please see the code below. I use context to grab the items in my intro component. Once those animations are done I would like to animate my navigation component. I am unsure how to do this, as the scope is a different component. I could create a new context but I am unable to link the two timelines.... I could use classes. That works, but I wonder why everyone is talking about context and react. Next up: I am a bit confused about .revert() is this required? All my intro does is show a background, logo, animates it and then set itself to display none. Thanks for brushing up my rusty gsap skills. const intro = useRef(null); const navigation = useRef(null); useLayoutEffect(() => { let ctx = gsap.context(() => { let tl = gsap.timeline({ defaults: { ease: Power3.easeInOut }, onComplete: function () { display: 'none'; }, }); //various intro-cover animations tl.to('.intro-cover', { delay: 0.5, autoAlpha: 0 }); tl.from('.navigation', { opacity: 0, delay: 1.34 }, 0.23); }, intro); return () => ctx.revert(); }, []); return ( <main> <Intro intro={intro} /> <div className="site-wrap"> <Navigation navigation={navigation} /> //rest of site </div> </main> );

Especially today I wish there was a GSAP After effects plugin. Please with easing on top!

hmm, when the svg is part of a child in rows/columns the path doesn't seem to get recognised. In previous tests I had an svg manually placed in the body of the html and that works perfectly. Would you mind if I privately send you the link, as this is a disclosed project. I understand any answer and will obviously look for a solution myself.

Hi PointC. Thanks for clearing that out. I am positive I won't forget this. Very much appreciated!

Hi it's been such a long time since I've played with gsap. Hope everyone has been doing fine :) Would someone please shed a light. I would love the fact that my triangles are spread across the screen on page load. For some reasons, the positions are all identical. I current have tried to regenerate the random value in a for loop, I console.log different values. Still, all paths go to the same position. I'd love them to be spread around. Thank you for your expert advice.

A good 'somewhat alternative' to gsap in unity is DoTween, as it has a similar syntax. This being said as a greeksock/gsap users since the very early days of greensock. I truly wish to see gsap someday in the unity asset store. all the best

Hi, Having a standard bootstrap progress bar — is it possible to actually tween it's value. i see over complicated things online, but not a simple progress bar without alternations. Hence the question. <div class="progress"> <div class="progress-bar active" role="progressbar" aria-valuenow="0" aria-valuemin="90" aria-valuemax="100" style="width: 90%"> <span class="sr-only">90% </span> </div> </div> So how would I simply animate it's value? Any tip is greatly appreciated. My apologies if this is already covered, however I couldn't find the answer for this simple example. Thank you for your help.

Pardon me for the late reply, thank you for this example, it worked out well. Kinda got lost in new projects so heres my belated thanks!

Thanks Carl. As I was afraid for. A slight "crap" echoes in a Homer Simpsons' style. I was experimenting with transferring it to a bitmap but still. it seems greensock strips the "to tween object" to its bare essence. I did find some filters for Starling, also a motionBlur, but it doesn't really bring out the effect what greensock does. Maybe. I am not sure if its even remotely possible but i guess it would be awesome to enable this in the future? About the greensock platform, its awesome how much you can accomplish with onUpdate and onComplete in terms of everything, esp now with trying to push a game idea. I am not afraid of enterframes, however In this case i thought it was much more processor friendly to "enterframe" only when its needed. ofc this is possible with regular on enterframes but hey, something you just like to experiment and crash your IDE ten times before there is a result In my humble opinion from what i saw/learned is that greensock hand in hand with starling and its way of dealing with things would be totally well... greensock! greetings

Hi greensockers, I also posted this on the starling forum, as i am not sure, where to begin. First of all, i am not sure this is the best way: Scenario: I have several thousand movieclips on stage (the movieclip exist in the library and has its own class with basic properties) These are added to the fla (i don't work in flash Builder (for this project) through com.emibap.textureAtlas.DynamicAtlas This allows me to add movieclips from the library as starling movieclips. joy! However, I'd love to build this game idea purely around greensock's tweening classes. Hittest work via onUpdate, and each event that causes of effects any other parameter is so damn easy to code + fast, pausable, reversable No single enterframe is used in this game idea. Some of the motion would benefit with some motionBlur. I get this error: motionBlur tweens only work for DisplayObjects. I tried to cast the hero_mc as a displayObject (which works perfectly fine), until I add the motionBlur part in the greensock tween. Does anyone have a clue or workaround? relevant code snippet: var mc: SheetMC = new SheetMC(); var atlas: TextureAtlas = DynamicAtlas.fromMovieClipContainer(mc, .5, 0, true, true); var hero_mc :MovieClip = new MovieClip(atlas.getTextures("hero_mc"), 60); addChild(hero_mc) ; Starling.juggler.add(hero_mc); var mytest:DisplayObject = hero_mc as starling.display.DisplayObject; mytest.x = 1024 * .5; mytest.y = 768 * .5; TweenMax.from(mytest, 0.48, { y: 868, onUpdate:hitTest, ease: Back.easeOut, motionBlur: { strength: 0.9, quality: 2 } });

Hi! best wishes for ya'll green(s)®ockers! Good health & what floats your boat! enjoy!! my question: Is it possible to define a gradient of lets say 4 color stops in jquery then loop through an array of colors and one of those array items is that gradient... the rest is a single color. Here is what I have. (it might look dirty... just testing ) The rainbow_array in the color array obviously doesn't work, its just to illustrate what i am after. Many thanks for some insight! var rainbow_array = Array ("e21111", "11e2c2", "a011e2"); var color_array = Array("#ffcc00",rainbow_array, "#e7353a", "#b62727", "#eeeeee", "#d5d5d5", "#0c0c0c"); $('#clickable_thing').click(function(event) { var parent = $(this).parent(); parent = parent.find("rect"); var fillcolor = $(parent).css('fill'); console.log(rgb2hex(fillcolor)); TweenMax.to(parent,.4,{fill: color_array[i]}); if(rgb2hex(fillcolor) == color_array[i]) { if (i < color_array.length-1) { i++; if (i == 1) { /*do gradient*/ } else { TweenMax.to(parent,.4,{fill: color_array[i]}); } } else { i = 0; TweenMax.to(parent,.4,{fill: color_array[i]}); } } });

Greetings On stage i have a "backgroundHolder" which succesfully listens to the liquidstage/area stuff. This works as a background image. code: ls = new LiquidStage(this.stage, stage.stageWidth, stage.stageHeight, stage.stageWidth, stage.stageHeight); area = new LiquidArea(this, 0,0,stage.stageWidth, stage.stageHeight); area.attach(backgroundHolder, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.LEFT, AlignMode.TOP); ls.addEventListener(Event.RESIZE, onLiquidStageUpdate); This works fine. Now the situation: in thumbsHolder, a batch of images are loaded with loaderMax. after clicking a thumbnail, I try to attach a movieclip (pictureHolder.largeImage) to the liquid stage. using my LoadLArgeImage function. fairly simple so to speak. Inside that function I do a normal ImageLoader set up. But I get an error, Error: The parent of the DisplayObject largeImage added to AutoFitArea instance111 doesn't share the same parent. Using this code: function LoadLargeImage(toload):void { bImageLoader = new ImageLoader(toload, new ImageLoaderVars() .container(bigPicture.largeImage) .width(stage.stageWidth) .height(stage.stageHeight - 50) .scaleMode("proportionalInside") .crop(true) .y((bigPicture.largeImage.height/2) + 25) .smoothing(true) ); var ls2:LiquidStage = new LiquidStage(this.stage, stage.stageWidth, stage.stageHeight, stage.stageWidth, stage.stageHeight); var area2:LiquidArea = new LiquidArea(this, 0, 0, stage.stageWidth, stage.stageHeight-50); area2.attach(bigPicture.largeImage, {scaleMode:ScaleMode.PROPORTIONAL_OUTSIDE, crop:true}); } BAsically whats going on "on stage" are 2 movieClips aka no nesting except for the contents of bigPicture: -thumbsHolder -bigPicture(holds next/previous/close buttons and the largeImage holder) I am not entirely sure what causes this. Could anyone shed a light upon this? Sorry (again) if the answer is rather obvious... at times i seems lost in the displaylist etc. Many thanks.Tom

Thanks again Jack for the insight, glad I was on the right track. however -after reading the docs- I am not very sure how to tween the path's progress. But after killing the tweens & some additional optimalisation so far the project runs at a steady 25-30 fps. with over 6000 loops going on. Which is lovely to see.

Hi Jack. Heres my situation. sorry for the story, but I thought it would explain better vs some code. I have two main displays to show : an overview and some detail views. Attached to a lineholder i add my pathfollowers. Then i tween the followers all this happens in a loop. now this loop its length is quite variable. my biggest loop so far goes over 2000. something like this: myPath .addFollower(createCircle(5, 0x006699), (i/ connectionArray[i].@myvar), true); overviewTween = TweenMax.to(myPath , (connectionArray[i].@myvar), {progress:1,repeat:-1, ease:Linear.easeNone}); lineHolder.addChild(myPath ); //createCircle is a simple function to draw a dynamic dot of 5px with a color these are added to its own child layer named (dotHolder) All this runs okay. and with my skills I didn't find a way to code this any more optimal but heres the catch. When I click an item that needs a detail view(showing even more tweens. the (new) tweens become very slow. I remove my children with this function function removeChildren():void { while (lineHolder.numChildren) { lineHolder.removeChildAt(0); } while (dotHolder.numChildren) { dotHolder.removeChildAt(0); } if (dotHolder.numChildren == 0) { //does nothing, but without it get errors, as some items has no children } trace ("remove lines and dots"); } so here is question nr 1: Does the tweens stop(calculating, free up memory) automatically when I remove the children? question 2: could it be that the cpu is massive due to the way i keep my tweens continuously? In otherwords. the dots flow from point A to B and then restart from its original position, never ending. consider this situation: the user clicks back and forth between overview & detail, on and on, I am concerned that this all will slow down the application. I've currently experimented with the following code in the removeChildren function var currentconnections = connectionArray.length(); while (currentconnections--) { TweenMax.killChildTweensOf(dotHolder); } Which seems to work okay, but all this story telling above, has one major question. Is this a good way to tackle my situation in a -nearly- optimal cpu friendly way? again; please take in regards that the data to be shown (aka for loop(+- 2000 times) with the PathFollower tween) will recreate itself every 10 seconds. + there are about 8 more user-functions that can happen while all this is happening(ofcourse in all situations the tweens will be killed (if needed)). I hope my questions are somewhat clear. I've been working on this for a week now. and duno anymore whats good / bad practice. motivating it sure is. If you want I can screen share the project to you Jack through skype, just let me know and i'll pass on my handler. I sure respect privacy and all that. but I can't put this project(or code) in the open at this point. Thank you for your time, and sorry for the lengthy post.

Thats perfect help for my needs today Jack! thank you so much. I honestly never thought to convert the points back as you mention. insights!! nice one. I am positive your new endavors are the time worthy goodluck. Thanks again for the blazing fast responds I shall code in peace now greetings

Thats a huge help, lol I wasn't aware of the easeNone, thanks!!

Hi Jack. The question When you look up the plugin explorer, in the BezierThroughPoint part. You successfully tween a movieclip that follows a curved line.(thanks for this!!) + draw a line between those 3 (or more points). Would you be so kind to share that technique(i mean the drawing of that curved line through the point)? I am aware of your wonderful motion paths... but I can't find how you draw the curve through the points (lines are ofc. no problem). with the motionPath class (for now) I am unable to make the path a curve. > there are countless examples on the web to draw a curve through 3 points, but each equation gives me a different result. So Drawing a curve ain't all that difficult. Making the object follow the exact curve... is (for me). +additional question: How could I transform this code so its a continuous movement? //tween all of the squares through the path once (wrapping when they reach the end) TweenMax.to(path, 20, {progress:1,repeat:-1}); This tweens the boxes in your motionpath example over 20 seconds, i've experimented with putting the repeat on -1 with keeps doing the animation. however. I'd love it that the time is constant. and not have a certain easing applied to it. (if its possible) Same goes for the circle example: I just can't seem to get the motion continuous (aka revolve 360° and then do it again) (ok i can make an onComplete function, but the tweening never is really continuous, .. it has a certain ease) just wondering... var circle:CirclePath2D = new CirclePath2D(500, 500, 100); var follower:PathFollower = circle.addFollower(myMc, circle.angleToProgress(0)); TweenLite.to(follower, 2, {progress:circle.followerTween(follower, 360, Direction.CLOCKWISE)}); addChild(circle); the suggestion : I was wondering. Are you planning a greensock class in order to tween lineTo's / circle/arc / curveTo's? (with a few cool / handy parameters?) Like for example in your motionPath class : where you can add a circle that represents the motion path. it would be awesome if you could tween the actual drawing of the line/curve as well. Yes I could use the update functionality to do the drawing with, i was just wondering. Maybe all this is capable in greensock right now. but I just can't find it. Any insight is wonderfully appreciated. Thanks for your time in reading this. my best regards

I do see now and alot of insight has been cast over this issue!learning everyday! i'll use this method for a global workflow. seems solid and bug free! many many thanks.

Hehe, yes i often write the code online different, to spot where i was wrong, so its a second try..if you catch my drift I am surely following the thoughts here. all seems very logical but It doesn't work. I get 1 movieclip of the holder. with a smaller movieclip inside of the second xml item. code used: var img_c:video_small_mc = new video_small_mc(); img_c.name = "img_c"; thumbsHolder.addChild(img_c); //then later .container(img_c.TH) (this shows 1 movieclip with the correct holder. but the second image is smaller and lies randomly over the holder) all very weird, I've done what you suggest. Maybe could you post the code you used? Does it works for you? Sorry to be a drag, but its really weird this doesn't work :/ best regards Peter

Thank you! I've pm'd u the files. Only thing left out is the actual flv's which are called video1_FLV.flv & video2_FLV.flv included is fla (cs5), images, xml gl with the project, right now i can't see whats doing this.

Greetings! I did some searching but couldn't came up with any solvable method for me. I am using a for loop to load the files from the xml. using loadermax instead of loading it to a sprite on my stage, I'd like to add a specific movieclip which has textbox animations , a "mini_image" movieclip in it. below is the code i use. hmm maybe its me but how do i attach my actual thumbnail to the thumbnail holder that sits in my library and cast this on the stage. (reference name is : "thumb_animation_clip"). aka thumbs_animation_clip.mini_image < here i want the loadermax image to be loaded in. while using thumbs_animation_clip as the main grid layout. Maybe its just me but i just can't figure it out right now :s I tried pushing the thumbs_animation_clip.mini_image reference in the .container() but to no avail var th:thumbs_animation_clip = new thumbs_animation_clip addChild(thumbsHolder.th); and later in .container(th.mini_image) but it doesn't work as planned :/ any help is more then welcome. hope my question is clear enough. var thumbsHolder:MovieClip = new MovieClip(); var mainHolder:MovieClip = new MovieClip(); var imageList:XMLList; thumbsHolder.x = 50 thumbsHolder.y = 60 addChild(thumbsHolder); //load XML; var gallery_xml:XMLLoader = new XMLLoader("xml/videoxml.xml"); gallery_xml.addEventListener(LoaderEvent.COMPLETE, xmlLoaded); gallery_xml.load(); function xmlLoaded(e:LoaderEvent):void { var xmlData:XML = e.target.content; imageList = new XMLList(xmlData.img); //setup loadermax object var thumbsLoader:LoaderMax = new LoaderMax({name:"thumbsLoader"}); thumbsLoader.maxConnections = 1; thumbsLoader.addEventListener(LoaderEvent.COMPLETE, thumbsLoaded); //setup variables for imageLoader vars; var spacing:Number = 1; var imageWidth:Number = 300; var imageHeight:Number = 169; for (var i:int = 0; i < imageList.length(); i++) { var numberOfPics:Number = imageList.length(); //trace ("stage = " + Math.round(stage.stageWidth / (imageList.length() + imageWidth))); var maxCols:Number = 1//Math.round(stage.stageWidth / (imageList.length() + imageWidth)); //trace ("maxcols"+maxCols); var imageLoader:ImageLoader = new ImageLoader("assets/" + imageList[i].@thumb, new ImageLoaderVars() .name(imageList[i].@name) .container(thumbsHolder) .width(imageWidth) .height(imageHeight) .x(int(i % maxCols) * (imageWidth+spacing)) .y(int(i / maxCols) * (imageHeight+20)) .scaleMode("proportionalOutside") .crop(true) .smoothing(true) .prop("index", i) .prop("url", imageList[i].@url) .prop("title", imageList[i].@title) .prop("desc", imageList[i].@desc) ); thumbsLoader.append(imageLoader); } thumbsLoader.load(); } function thumbsLoaded(e:LoaderEvent):void { for (var i:int = 0; i < imageList.length(); i++) { var cdImg:ContentDisplay = LoaderMax.getContent("p" + (i + 1)); cdImg.addEventListener(MouseEvent.CLICK, onClick); //etc etc } }