Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

greykrav

ShockinglyGreen
  • Posts

    22
  • Joined

  • Last visited

Everything posted by greykrav

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

    Hulk smash

    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?
  17. I followed these directions, I found that the above added even more extraneous group names, I understand how to morph from one path to another however I am still not understanding how to morph an entire svg, since it doesnt allow morphing from groups, and for aything other than simple shapes the above method results in creating groups that might contain many paths, how can we get a group that contains many paths to morph into another group that might also contain many paths?
  18. Happy thanksgiving craig, Thank you for your guidance. I am still confused about the following, maybe this is all related : 1. I am referencing your pen yet having difficulty adding fill in the outer ring of the logo (the area in between the outer two ellipses) I also tried adding stroke ( didnt work for me either). How can I achieve this? 2. In your example the polygon (triange) which cuts out the space in the middle of the letter 'A' under the 'G' also gets the fill, how can we give it a different fill or fill ? 3. I still did not understand why in this codepen ( this is the one where i followed nicks protocol and used the trace feature) the fill from the first svg is spilling out and covering the entire canvas of the second svg, see this codepen. I have attached the png of the logo im trying to morph to.
  19. Happy holidays everyone. I am Trying to make a map svg icon morph into a logo. The problem Im having is that the fill of the first path (Map) is becoming the fill of the second path (logo), and completely blocking out the logo. I read this thread: morph svg groups and followed the instructions on this thread to get the from png to svg illustrator convert to svg I noticed that in illustrator that from the steps of expand to object->compound path->make the converted svg looses its fill. ive also noticed that there is also a square border around the actual logo svg, and when you try to change the fill in codepen, it just fills in the entire logo into one color. Ive also seen that illustrator has alot of extraneous <g> I understand that these are useless to greensock, because morph svg can only convert path to path. I should mention i am not experienced with illustrator or photoshop, however I recently purchased the adobe cc membership and I see a ton of resources through them, but no tutorials on how to optimize and prepare svg's for working with morph or greensock animations. I see that naming the layers will give an ID to the G elements which is useless to us? Can someone please outline their png conversion to svg and then morph workflow. Should I rather just create a layer and trace over the logo png in illustrator, then delete the png, and not even bother with the auto trace? When would you do one vs the other? and why is the fill color of the first svg spilling into the entire viewbox? So to recap, the morph is working, but i must be doing something incorrect with the preparation of the svg all advice appreciated. Edit: I realize I included the first pen, Where i actually did trace the logo but it wasnt morphing nicely, here is the second pen I created ( where I used the autotrace feature of illustrator) you can see what I mean by the fill spilling over: Fill Spill over pen
  20. Thank you for the solution and all the helpful information! I am researching the methods you recommended right now. I have run into some other questions about morph so ill make a new thread..
  21. Good evening everyone. I am having problems getting this function to run repeatedly, I wish it to run every time on mouseenter and reset itself on mouseleave, however its only running once. Also I was looking for tips on how to achieve the GOOEY morphs I see everyone doing, as well as the water ripple morphs seen in this pen All advice and tips welcome. Thank you.
  22. Good evening, I want span one and two to rotate inward causing the cross menu effect however they are just disappearing entirely on click, but I would like this button to remain visible on the right side of the screen while showing the navigation menu , also when the screen is resized to mobile you will notice a black space on top of the image full screen background, how can I fix these issues? any advice appreciate. thank you.
×