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