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