[GSAP Demos / Snippets / Pens]

 

 

I just stumbled upon an code I wrote for a friend, and I thought the effect would be useful to somebody, here it is:

 

See the Pen hCGEb by bassta (@bassta) on CodePen

 

 

 

Nice one, might come handy as more and more html5 banners are being trafficked.

Thanks!

[Draggable with scale]

Hi there GreenSock staff, thanks for the great Draggable plug-in!

 

I didn't want to start a new topic but here's my dilemma:

 

I'm appending input fields into the draggable elements, they fit in ok but I cannot type anything into the textfields. They get the focus event but that's it.

Is there something I should know, I'm guessing the Draggable plug-in somehow prevents the change event or whatever.

 

Edit: no focus event is fired, but the cursor changes into text-cursor when hovered over the inputs.

 

Thanks

[TweenLite onComplete triggers immediately]

Excellent, thanks a lot.

[TweenLite onComplete triggers immediately]

Hmm, I think I found the cause of the problem. If I switch the TweenMax.from into TweenMax.to it works fine. 

[TweenLite onComplete triggers immediately]

Hi and thanks for your reply.

 

I switched to the latest TweenMax you linked but the "bug" didn't go away.

Now the console logs immediately this as I log the arrow in the arrowLoop(arrow) func:

› HTMLElement
<span id=​"arrow1" style=​"z-index:​ 0;​ top:​ auto;​ left:​ auto;​ ">​</span>​
<span id=​"arrow2" style=​"z-index:​ 0;​ top:​ -10px;​ opacity:​ 0;​ left:​ 0px;​ ">​</span>​
<span id=​"arrow1" style=​"z-index:​ 0;​ top:​ auto;​ left:​ 0px;​ ">​</span>​
 

The HTMLElement is for arrow2, as I collapse the element it reads this (I cut most of it out):

_gsTweenID: "t9"
attributes: NamedNodeMap
baseURI:file:///Users/username/Documents/2013/mobile_ads/test/300x50.html"
outerHTML: "<span id="arrow2" style="z-index: 0; top: -10px; opacity: 0; left: 0px; "></span>"
 

 

Afterwards the function seems to work just fine.

[TweenLite onComplete triggers immediately]

Oh, I just notice the syntax is a little different in those code snippets I posted. But don't let that fool you, no change in behavior.

[TweenLite onComplete triggers immediately]

Hi there, and thank you for these fine greensock tween engines. Can't imagine how many flash banners I've made importing that com.greensock package.

 

So let's cut to the chase, I've started using greensock for html-banners as well and ran through a problem.

TweenLite onComplete triggers right away.

I've searched the forums and all but didn't find anything on this.

 

Here's the (stripped) code that's not working:

function init()
{ 
TweenLite.to('#frame1', .3, {opacity: 1, delay: 0, onComplete: arrowLoop, onCompleteParams:[arrow1]})


TweenLite.from('#arrow2', .3, {opacity: 0, top:"-=10",delay: 10, onComplete: arrowLoop, onCompleteParams:[arrow2]})


}
 

In arrowLoop(arrow) function I logged the arrow and it traces right away the latter arrow2 twice before the arrowLoop is called for arrow1. If I comment the latter tween out then the arrowLoop works just fine.

 

This one works correctly:

function init()
{ 
TweenLite.to('#frame1', .3, {css:{opacity: 1}, delay: 0})
TweenLite.delayedCall(.5, arrowLoop, [arrow1]);

TweenLite.from('#arrow2', .3, {css:{opacity: 0, top:"-=10px"},delay: 10})
TweenLite.delayedCall(10.3, arrowLoop, [arrow2]);

}