gsmas

Hi Sahil, Thanks a lot for prompt help.

Hi, I have following Problem. My fade in effect function but on Start it shows the last image overlap on first image. TweenLite.to("#blackimg", 0.1, {autoAlpha:0}); TweenLite.to("#blackimg", 0.1, {autoAlpha:1, delay:0}); TweenLite.to("#redimg", 1, {autoAlpha:0}); TweenLite.to("#redimg", 1, {autoAlpha:1, delay:4}); TweenLite.to("#blueimg", 1, {autoAlpha:0}); TweenLite.to("#blueimg", 1, {autoAlpha:1, delay:6}); TweenLite.to("#greenimg", 1, {autoAlpha:0,}); TweenLite.to("#greenimg", 1, {autoAlpha:1, delay:8}); Thanks

Hi mikel, I have solve the Problem. Thanks a lot for your prompt help. Very nice tutorial.

Hi mikel, Thanks a lot. Very interesting. I have now change and it is functioning but not clean. The 3rd image at the beginning disappear very fast. Than the pulse effect is not too clean. What is false here?

I am trying to create pulse effect like heartbeat on image3. Image three should have this effect two times before image4 appears. Is there any possibility to do that? Thanks a lot

I have solve the scaling problem too. scale:5 and transformOrigin ("center center") Thanks a lot for your help

I can hide the images after completing the image. TweenLite.to("#text_image", 3, {autoAlpha:0, delay:4}); It works. Only Scaling is not working. I have increase it to 4 but it does not cover the whole area.

Thanks for your recommendation and prompt reply. I have increase the scale to 4 but it doesnot cover the whole area. One more thing: How can I hide #text_image and #image2 (opacity 0) after completing the animation. I am asking because I will add one more image. @Carl no Problem. Many Thanks for your help. Very thankful for prompt help and appreciating it.

Thanks a lot. This is nice. But the Scale:1.6 doesnot cover the whole area. The whole Blue area must be cover.

Dear PointC, many Thanks. At present it goes -500px up and coming down. I want to increase the size of the #image2 so that it will cover the whole area (300x250) and than come to the original size.

Dear Carl, Many Thanks for your explaination. I donot see any changes in the Codepen. The #imge2 remain the same. No animation on image2. Normally it will cover the whole area and come to its original size. I have click on the codepen. Which codepen have you changed. I have added the CustomEase.min.js file in my document but nothing happend. Thanks a lot.

I am testing some animation possibilty. I am trying custom ease effect. It does not function. I am stucked here. The codepen link shows the aninmation. First the textimage Just a test is functioning but after that the image This is another image does not funktion. image2 should be appear after Just a test shown completely. That means the img2 should delay. The second problem is the imge two should be bigger and cover the whole area (300x250) and than come to the original size as we see here. Thanks a lot

Thanks a lot. I am just trying. I found following video tutorial. Very intresting. This will solve the Problem. Many Thanks to all. @determin1st: I mean that the images should be shown from the beginning. At Present the image was ease in from top left. Thanks

Hi, I want to zoom my image for Banner from origninal size to 300x250px. I have tried as shown in codepan. But the image comes from the above leftside. The whole image should be shown from the begining and zoom inside till 300x250 size. I am using TweenMax. Many Thanks

Thanks. does it function if I seperate two classes with two different time(delay). TweenLite.to(".green1, .green2", 1, {x:200}); TweenLite.to(".orange6", 2, {x:200});

I have one more question related to the above Problem. Is there any possibility to use Tweenlite.to for two different boxes? TweenLite.to(".green1", 0.9, {opacity:1.0, delay:4, scaleX:1.2, scaleY:1.2});} Thanks

Hi Carl, thanks a lot. Difference between blue and blue1: Blue is the fixed image and blue1 for zooming. The animation process: the blue box is fixed and than zoom after 1 sec. For zooming purpose I have created blue1. (may be there is some other approach) after 2 or 1 (its not important 2 or 1 or may be 0.9) sec of zooming the blue box change to green and finally the same zooming effect through green_1. Is there any other possibility to zoom the blue box? For example with out needing blue1. In the old version as I have mentioned: http://codepen.io/gsmas/pen/dObMjE May be here is some confusion. sorry for that. I am trying to clear it. If you see the effect in the old version (http://codepen.io/gsmas/pen/dObMjE) and compare it with new version (http://codepen.io/Gr...Re?editors=0110) than you see the difference. Lets forget the blue box for a while and only see the green box how it moves. If you observe exactly the green box (whole image) is zooming. Following code is for that purpose TweenLite.to(".green1", 0.9, {opacity:1.0, delay:4, scaleX:1.2, scaleY:1.2});} I want to animate both blue and green box like that. I think I cannot use the TweenLite.to twice for blue1 and green1 simultaniously. That is the main problem. I am new and trying to understand how far can I go with greensock. Thanks in advance

Hi Jonathan, sorry for confusion. I have tried as you explain me. It functions but not as I want. Please check new version http://codepen.io/gsmas/pen/MbgmzQ The animation effect should work like that old version http://codepen.io/gsmas/pen/dObMjE Zooming effect. Here in old Version the only Problem was with blue box as I mention above. In the new Verion the blue box and everything appear but the animation is not as I want. Zooming effect should be like old version. In old version one cannot know wether or not the second Image is on the first one. In the new Version you see the differecne prompt. Thanks in advance

http://codepen.io/gsmas/pen/dObMjE

Hi Joanthan, thanks a lot. I am trying to animate each box one after another. Following Step: 1- first blue box will appear than after one second the blue box will be scale to 1.12 (x and y) 2- Finally the green box wil appear and after one second delay the green box will be scale to 1.12. (This is what we are seeing in copepen) I play with the code but till now the same problem the first step doesnot appear. Thanks in advance

Hi all, I have a general question about TweenLite to and from. How can I realise multiple images scalable? Can I use following: TweenLite.to("firstimage", 1.0, {opacity:1.0, delay:0.6, scaleX:1.2, scaleY:1.2}); After that for the second image TweenLite.to("secondimage", 1.0, {opacity:1.0, delay:0.8, scaleX:1.2, scaleY:1.2}); I have tried but not succeed. Only the last one is scalable the first one not. http://codepen.io/gsmas/pen/dObMjE Thanks in advance

I have solve the first Problem. {opacity:0.0, delay:10}); TweenLite.from(".green",0.7, {opacity:0.0, delay:12,ease:Power0.ease}); TweenLite.from(".green1", 0.7, {opacity:0.0, scaleX:0.95, scaleY:0.95, delay:12, ease:Power0.ease}); The Problem was the delay Properties. I have now the other 2 issues - The zooming effect in IE is not functioning smoothly. The Stage area is at present 600px width and height. If I increase minimum height from 600 to 1200 and try to fit the images than my whole box and other images are looking very tricky. One more things. How can I add shadow properties? I mean transparent layer with opacity on the orange box. So that I can bring the textbox over the orange box. Thanks

sorry- I have now change. There are 4 rectangles. Initial stage top - lightbrown bottom - blue (but this one doesnot appear now,) final stage after animation top - orange bottom - green and after a while final text box. green1 and blue1 is for zooming effect. I think that It is the right way. This is what I am trying. Thanks in advance

https://codepen.io/gsmas/pen/bwJLVY

Hi all, I am new here and testing greensock for HTML5 banner animation. I have created 4 different box und and 1 text images. I have following Problem: One of my box image does not appear. image 4 The zooming effect in IE is not functioning smoothly. The Stage area is at present 600px width and height. If I increase minimum height from 600 to 1200 and try to fit the images than my whole box and other images are looking very tricky. http://codepen.io/gsmas/pen/bwJLvK Thanks in advance