greykrav

Ive forgotten to include the pen in question: https://codepen.io/kravmaguy/pen/YzKjKWN

I don't think its a GSAP question per say.. But can you please advise anyways. How do I keep the button size static while the text is changing and also keep the width of the text inside it the same so that the icons do not change position inside the button while the text is changing. on line 64 in the html is a button with changing text. In the CSS section on line 186-192 ive added some stuff to deal with this. I have figured out how to keep the button size static but do not know how to prevent the icon stack from shifting around when the text changes. How can I prevent the icon from changing its position inside the button while the text is changing?

please tell me how to fix this glitch, circled in red: https://www.dropbox.com/s/tzaymg2l5h9hvgv/stackedfontawesome.jpg?dl=0

I am going to make a splashscreen with GSAP and fade into this bootstrap card. I stacked the fontawesome icons w css instead of making it in illustrator. My question is why there is a quick glitchy flash of the border surrounding the smaller second icon. You might have to refresh the screen to notice it. I am using chrome. If its not noticeable in the above pen use this pen instead youll notice the glitch in the shape of the border radius surrounding the eye and its the same problem as the above pen. https://codepen.io/kravmaguy/pen/VwZJwax Am I doing it this correctly? Do i even have to worry about the glitchy flash because I will make a GSAP splashscreen which will proceed this card so by the time it gets to it it should be fully loaded and I dont have to worry about the user seeing the glitch?

ok nevermind Ive just fixed that issue now the loading icon is appearing on a small screen and its centered, just some minor css changes I had to make. and here is the final version: And is adding delayedCall on line 10 better than the solution I came up with, which was just to add delay:6 as the last parameter in the object on line 41 of the code? anything else I should change?

hey @mikel good to see you again I saw your reply right after I came up with this https://codepen.io/kravmaguy/pen/oNvyoKV?editors=0010 so delayedcall is better yes? now the loading icon has disappeared when the screen width is small

ok so this is probably the wrong way to do it but this is what I came up with https://codepen.io/kravmaguy/pen/oNvyoKV?editors=0010

Ok so now if you look at the original codepen, ive made some progress, but the split text is behaving funny.. I dont think im doing the sequencing the right way but no one commented so I had to try and see what I could accomplish.

good evening, How can I control the loading sequence of the attached pen(loading screens) combined with this pen of a high quality image using split text. for the first pen in the html there is a loading icon wrapped in a container and below that is the greensock logo with its effects wrapped in another div. this pen isnt working as desired because the greensock logo is showing at the same time as the loading logo and then only being replaced when setTimeout is completed. id like the loading spinner to show first, and then afterwards the greensock splash logo, and then after that the high quality image with its text. (and ideally set a minimum time for the greensock logo to display for say.. 2.5 seconds, in case the viewer gets the high quality image data fast) basically: first show the loading spinner, then show the greensock logo for a minimum amount of time AND when the high quality image is ready. then display the high quality image with its associated animations. Ive read/watched the following material position parameter and event loop. I could not implement it to solve my problem. All help and advice appreciated.

Question Re the first two things you mentioned: In the first two lines I think the cashing problem has been fixed, but the brightness tweak on line 99-106 is not behaving as I would expect: https://codepen.io/kravmaguy/pen/vqOLpJ?editors=0010

Yes I will look into all you mentioned is excellent. Is a timeline visualizer available to club greensock members?

Thanks @PointC for explaining that to me, I did some more work on it a few weeks ago, not yet completed, but its coming along nice, sorry I never posted it ive been so busy, here is what I did: codepen warehouse lights demo How can I fix the following: 1. There is an ugly flash of the image the first time it loads if the animation is not cached in the browser, Id like to hide it so theres only black, user should not see the image before its proper time. How to fix this? 2. @mikel in his demo, was actually tweening the brightness, his example is more realistic than in the work I did where its just going from completely black to showing the image. How can I achieve this? Any advice on the above is appreciated. my homework to follow up: *Go over the position-parameter video in the documentation, I believe understanding it at an A+ level will help me finish this project. Ive watched the video before and was easily able to finish the challenge afterwards with the man and the car on the platform but that was easier than this. In the video its mentioned "to illustrate how the postition parameter works im going to be using my timeline visualizer"... any chance I can also get my hands on this tool? *Clean and Re-Organize the code according to the protocol mentioned by @pointC i.e use functions to create the timelines as mentioned *There is something else I did not understand in this animation; <feMergeNode id="MergeNode" in=""/> vs. <feMergeNode id="MergeNode" in="SourceGraphic"/> Each one has a different effect, why? If i wanted to for one part of the timeline use the effect of lightbulb having an emty string for .5 second, and then say switch back to the Sourcegraphic effect for .5 seconds and then back again to empty string effect how would I do it?

ok guys so I have this so far is what I did: https://codepen.io/kravmaguy/pen/Rmzoeg I still think it looks more like a twinkle than a lamp but I dont know.. what you guys think ? I used @pointC template, but now I think the picture will look too small on mobile so I will do it with his second template, can we elaborate on craigs code, I see he is calling newsize each window resize : <code> if (w > h * (16 / 12)) { TweenMax.set("#demo", { attr: { width: w, height: w * ratio } }); } else { TweenMax.set("#demo", { attr: { width: h / ratio, height: h } }); } </code> Why are we using the above ratios in this first conditional check and then afterwards he goes on and again resets the width and height a second time to the following regardless of the outcome of the conditional: <code> var data = svg.getBoundingClientRect(); TweenMax.set("#demo", { x: w / 2 - data.width / 2 }); TweenMax.set("#demo", { y: h / 2 - data.height / 2 }) </code>

Yes all these are excellent Ideas and help alot, thank you very much I will get back to work and follow through with you guys soon to show what I did.

here is what I did so far how do I make the bulb stick to the spot on the image on resize? I thought it would be easier if I had the left and top edges of the image always stick to the left and top edges of the window. But its distorting it too much when the screen gets smaller if im only using one image, I can switch it out to different image sizes based on screen width and keep adjusting the position of the ellipse bulb based on this... https://codepen.io/kravmaguy/full/mogVJw

ok @creativeocean and @mikel but how would you make it so that you have little bulb that gets mapped/glued on to the light fixtures in the ceilings here I can make creative oceans animation template fade into the warehouse image but beyond that im lost with how to make the light bulbs

@mikel Yes your answer is the best way to do it, I will have to study this animation you made. I am not skilled enough to create anything original. Here is your splashscreen on a Map w/ Mapbox api https://codepen.io/kravmaguy/pen/aMJbYx I want to know if there is a way to create custom animation objects and geolocate them on the map? This example is from the mapbox documentation, the only thing I did do was add the tooltips on hover when you hover over the extrusions of the building, If you want to draw your own extrusions with the mapbox Api what you can do is to geolocate a spaceplan raster image using CQGIS and then draw on top of it your walls ceilings etc.. How would you geolocate a gsap animation?

Hey @creativeoceanThanks, I appreciate that you think its a nice adaptation, I kinda just threw it together and got lucky its your creation really.. its not mine. So... I didnt share it yet, it could be better.. I was thinking of making the blackness transition into an image so that when the animation is done they are inside of this storage warehouse: codepen.io/kravmaguy/pen/mogVJw The transition would be a light bulb flickering on at this circled location : Image lightbulb source There is a period of darkeness after the number reveal, and that is when I would start the lightbulb animation. and when the light bulb flickers on it lights up the image to its normal state. I watched these videos that @PointC recommended. Amazing, but I still am not sure what techniques to use for the light. or how to go about putting this together? How would you make a flickering bulb that then lights up the image? Something like this? neon sign: codepen.io/thekenneth/pen/boGGba What techniques would you use to put a light in the same spot as in the image and stay there despite a resize. something like this? Image Map plugin I would like to hear what you all think about this?

Hey thanks @PointC and @GreenSock Yes I actually emailed him a while back telling him I want to build/modify his idea and he said he gives his permission, he mentioned that he wont have time to teach me how to do it, but he said I should ask any questions I have about his template on this forum. I also asked him If i could use the flare that he made, which is one of the assets, and he said: "please feel free to lift anything that helps your project." I told him that I would mention his company on the post on facebook where im going to share the work, giving him credit for the original creation that inspired it. Anyways here is what Ive done so far. Its obviously not as awesome as his.. but please give me feedback both technical and artistic I would love to hear it, I think its pretty cool, but it still feels a little "off" and I cant put my finger on exactly what it is: https://codepen.io/kravmaguy/pen/NmNBXb?editors=1000 I made the chrome version of the logo in photoshop with a metallic skin, but I noticed his logo doesnt have it, also the phone number I added in the second "Reveal" is just a plain solid color with no metallic skin. Anyways what might I do to polish this off? Edit: I am also curious why I was not able to use t1.duration() as the last parameter for the set of tweens in the second reveal. the console was throwing a reference error.

Guys this pen by tim miller is awesome, https://codepen.io/creativeocean/pen/pGNMEL How can I do the following: instead of the timeline only playing once, I want to make it run twice, copying it, and connecting the two copied timelines to one bigger timeline. the first time would do a logo reveal to blackness. and the second half of the animation would reveal another image. In my case, I would like to reveal a phone number after the logo. What is the setup to accomplish this? There are 4 images being used in the first animation. I see the first black logo is coming in but then its replaced by the white logo. I was wondering if someone could break down this animation and how to go about tweaking it so instead of a single reveal of just a logo, it would be a double reveal. first revealing the logo, and then a phone number.

Errors: https://imgur.com/a/Spt9PA7 greensock_test.html (located on desktop) <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>title</title> <script src="TimelineLite.min"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> <script> var line1 = $('#env-line-1'); var line2 = $('#env-line-2'); var line3 = $('#env-line-3'); var mailIcon = $('#mail-icon'); var envLid = $('#env-lid'); var envPaper = $('#env-paper'); var tl = new TimelineLite({ paused:true, }); TweenLite.defaultEase = Back.easeOut; tl .to(envLid, 0.3, { scaleY:-1, y: 1.5, } ) //etc...

Guys I was thinking about this over dinner I think I might be able to solve this if I could hear some of your opinions. Imagine the icon was a heart and for the sake of argument its in the middle of the screen now. For the sake of this explanation we would use a regular mathematical graph with x and y axis. so our heart icon is located at x=0, and y=0... if rhythm= a sequence of beats, and temp= that exact sequence of beats either sped up or slowed down. Then on this animation since he want it to resemble a heartbeat it makes to increase or decrease the tempo as a function of either the increase or decrease in either Y or X. So if this heart.. (which is a map in our case(and this map is composed of three different polygons), we would need to break up into three different paths lets call them left middle and right.. in the tween we offset the time that the animation happens so that the left path lights up first, the middle one .5 seconds later, and lastly, the right path would then light up, which happens a full second after the start of the animation... And this second that it takes to complete this animation cycle is constant.. this would be the rhythm? So we wish to control the tempo as a function of either the increase or decrease in mouseX OR mouseY.. and this way it doesnt matter where you place the icon.. because in any situation if your moving away from the icon either upwards, downwards, left or right, that would be increasing or decreasing either mouseX or mouseY... Does it make sense? How can I describe the situation above in a GSAP function?

I took some principles I learned on codedrops and combined a few different animations and inspirations from some other artists I found on codepen into one UI that I created for a friend who is a designer. He doesnt like the colors. the background gradient is easy enough to change. however how do I modify the colors from the lottie.js import? please describe the steps. P.S. I did recently purchase after effects, but I am a novice, which steps should I take to do it? Edit: click the menu to see the transition animation whose colors I wish to change.

greetings animation engineers, In the attached pen you will see the morph from the map into the logo, you will notice that the map is composed of three parts, which you had advised me to consolidate into one path in order to do the morph into the logo which is also a single path.. But now I would like to do the following: The map should pulse RGB at a heart rate based on distance of the mouse, and then it will morph into the logo according to its current behavior. So for example if we compare the map animation to a heartbeat, should the animation increase its rate linearly based on distance or at an accelerated rate (exponentially) how would you create such an animation? I have succeeded in animating tilts on x and y axis based on mouse positon as can be seen in many playing card demos on codepen, where you add shine and tilt to the element as controlled by mouseX and mouseY, so how would one go about it in this case? where you would be changing pulse rate based on distance.

Greetings everyone, I was able to morph from one path to another : this pen however what is the proper technique to use when there is not a 1:1 ratio, for example, in the attached pen (in the subject line) you can see I am morphing the man into the hulk, but the man is composed of many paths that I painted out in illustrator, as you can see its very slow, and they are all morphing into the same path.. As well you see that the svg is cropped by the viewbox, and I am having some trouble fixing it.. what is the method to work with morph when the ration is not 1:1, i guess if its only a few paths the user might not notice, however in this case you can see it just looks weird. what I am thinking of doing for this project is cutting down the amount of paths on the man, to say 10-15, and then have the paths on the man morph into different svg skin textures on the hulk, and then afterwards fade into something like a rastor image.. something similar to what guy so expertly did: this pen ** disclaimer: I will not be the designer on the project I will just be implementing the code, so what should I ask the designer to do?