Problem - Animation with zooming effect in Internet Explorer

[gsmas]

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

 

 

[Jonathan]

Hello gsmas,

 

Without being able to test or see your code live. Make sure your height for that img4 image has a proper height since you have it set to auto. Sometimes auto isnt calculated since it gets inherited from its parent.

 

Could you please setup your example in codepen. It will be really hard to see what is going on with testing your code live.

 

Here is a video tut on how to create a codependent demo example.

 

 

[gsmas]

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

[Carl]

Thanks for the demo. 

 

It would really help if you could reduce it to only the assets and code necessary to illustrate the problem.

 

Right now you have html with things

 

like

<div class="logobottom1"></div>
 <div class="logobottom2"></div>

and js like

 

TweenLite.from(".logobottom1", 0.6, {opacity:1.0, scaleX:0.95, scaleY:0.95, delay:0, ease:Power0.ease});
TweenLite.from(".logobottom2",0.7, {opacity:0.0, delay:12,ease:Power0.ease});

yet when I look at the demo I see 2 dark rectangles, a green rectangle and an orange rectangle.

 

its very difficult to decipher what logobottom1 even is.

 

I don't know if there are images not loading but it would be great if you could rename things to

 

.orange and .green and only include the animation that isn't working.

 

Also it is best if the animation is much quicker. It is tough staring at a demo for 15 seconds not knowing what is supposed work or not work.

 

I'm sure once you clean things up we will be able to help you quickly. I'm sure you will find that GSAP and especially its timelines are perfect for banners and you will really enjoy using them.

 

 

[gsmas]

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

[gsmas]

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