Jump to content


  • Posts

  • Joined

  • Last visited

About greykrav

Recent Profile Visitors

361 profile views

greykrav's Achievements


Newbie (1/14)



  1. greykrav

    replay timeline

    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
  2. greykrav

    replay timeline

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

    replay timeline

    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?
  4. greykrav

    replay timeline

    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>
  5. greykrav

    replay timeline

    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.
  6. greykrav

    replay timeline

    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
  7. greykrav

    replay timeline

    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
  8. @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?
  9. greykrav

    replay timeline

    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?
  10. greykrav

    replay timeline

    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.
  11. greykrav

    replay timeline

    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.
  12. 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...
  13. 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?
  14. 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.
  15. 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.