[Fade in Problem]

Hi Sahil,

 

Thanks a lot for prompt help.

 

[Fade in Problem]

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

 

[Pulse effect through Timeline]

Hi mikel,

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

[Pulse effect through Timeline]

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?

[Pulse effect through Timeline]

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

 

See the Pen OErgqy by gsmas (@gsmas) on CodePen

[Animation Custom ease Problem]

I have solve the scaling problem too.

scale:5 and transformOrigin ("center center")

Thanks a lot for your help

 

[Animation Custom ease Problem]

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.

[Animation Custom ease Problem]

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.

[Animation Custom ease Problem]

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

[Animation Custom ease Problem]

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.

 

[Animation Custom ease Problem]

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.

 

[Animation Custom ease Problem]

 

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

 

 

See the Pen ZRmvmN by gsmas (@gsmas) on CodePen

[Animation Zooming effect]

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

[Animation Zooming effect]

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

See the Pen OEabOd by gsmas (@gsmas) on CodePen

[Use of TweenLite to and from]

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});

[Use of TweenLite to and from]

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

[Use of TweenLite to and from]

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:

 

See the Pen dObMjE by gsmas (@gsmas) on CodePen

 

May be here is some confusion. sorry for that. I am trying to clear it.

 

If you see the effect in the old version (

See the Pen dObMjE by gsmas (@gsmas) on CodePen

) and compare it with new version (

See the Pen yVBoRe?editors=0110 by GreenSock (@GreenSock) on CodePen

) 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

[Use of TweenLite to and from]

Hi Jonathan,

sorry for confusion. I have tried as you explain me. It functions but not as I want. Please check

new version

See the Pen MbgmzQ by gsmas (@gsmas) on CodePen

 

The animation effect should work like that

old version

See the Pen dObMjE by gsmas (@gsmas) on CodePen

 

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

[Use of TweenLite to and from]

See the Pen dObMjE by gsmas (@gsmas) on CodePen

[Use of TweenLite to and from]

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

[Use of TweenLite to and from]

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.

 

See the Pen dObMjE by gsmas (@gsmas) on CodePen

 

Thanks in advance

[Problem - Animation with zooming effect in Internet Explorer]

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

[Problem - Animation with zooming effect in Internet Explorer]

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

[Problem - Animation with zooming effect in Internet Explorer]

See the Pen bwJLVY by gsmas (@gsmas) on CodePen

[Problem - Animation with zooming effect in Internet Explorer]

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.

See the Pen bwJLvK by gsmas (@gsmas) on CodePen

 

Thanks in advance