sorciereus

February 7, 2014

I was able to implement the above link in a looping animated sequence - thank you!

February 6, 2014

Hi there. Apologies - I have the JQuery script tag in my original file but didn't copy over. Actually so I tried this and am also using the latest version of TweenMax - that ad is animating fine - rollover still isn't functioning. Tried placing the JQuery in it's own script tag, nested within the TimelineMax tag and etc - no luck.

February 4, 2014

Hello. I have some code I'm having trouble with - I'd like to do animated rollovers however it is not working correctly. Can you please advise where I am going wrong? Thank you!

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>GreenSock: HTML5</title>
<!--css goes here -->     
<style>
#container
{
  width:924px;
  height:250px;
  background-color:#000000;
  opacity:0;
  position:relative;

}

#my_films
{
	width:875px;
	height:422px;
	opacity:0;
	margin-top:55px;
	margin-left:20px;
}

#season2
{
	width:285px;
	height:44px;
	margin-top:0px;
	margin-left:19px;
}

#grantland
{
	width:304px;
	height:44px;
	margin-top:5px;
	margin-left:0px;
	opacity:0;
}

#packshot
{
	width:365px;;
	height:265px;
	position:absolute;
	left:335px;
	top:20px;
	opacity:0;
}

#holiday
{
	width:142px;
	height:16px;
	position:absolute;
	left:722px;
	top:84px;
	opacity:0;
}

#starts
{
	position:absolute;
	left:714px;
	top:104px;
	opacity:0;	
}

#buy
{
	position:absolute;
	left:747px;
	top:210px;
	opacity:0;
	background-color:#000000;
	background-image: url('images/buy_outline.png');
	width:88px;
	height:41px;
}


</style>
</head>
 
<body>
<div id="container">
   <div><img src="images/my_films.svg" id="my_films" /></div>
   <div id="season2"><img src="images/season2.png" /></div>
   <div id="grantland"><img src="images/grantland.png"></div>
   <div id="packshot"><img src="images/packshots_lrgest.png" /></div>
   <div id="holiday"><img src="images/holiday.png" /></div>
   <div id="starts"><img src="images/starts.png" /></div>
   <div id="buy"><a href="#">Buy</a></div>
</div>
 
<!--CDN link for the latest TweenMax-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.2/TweenMax.min.js"></script>

<script>
window.onload = function(){
var tl = new TimelineMax({repeat:2, repeatDelay:3});
tl.add( TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn}) );
tl.add( TweenLite.to(my_films, 1, {width:177, height:44, alpha:1, ease:Power1.easeIn}) );
tl.add( TweenLite.from(season2, 1.5, {alpha:0}) );
tl.add( TweenLite.to(grantland, .5, {x:19, alpha:1}) );
tl.add( TweenLite.to(packshot, 1.5, {alpha:1, ease:Power4.easeIn}) );
tl.add( TweenLite.to(holiday, 1, {alpha:1}) );
tl.add( TweenLite.to(starts, .75, {alpha:1}) );
tl.add( TweenLite.to(buy, .5, {alpha:1, top:142, ease:Back.easeOut}) );
}
$("#buy").hover(
  function(){
    TweenLite.to(this, 0.5, {scale:1.5, backgroundColor:"red"});
  },
  function(){
    TweenLite.to(this, 0.5, {scale:1, backgroundColor:"black"});
  }
);
     
</script>


</body>
</html>

Any ideas? (the buy text is in there as placeholder - I'd like to see the background changing like in this example:

See the Pen deb6ac1e2c8ce73ac7d68efba088ed00 by GreenSock (@GreenSock) on CodePen

January 28, 2014

Thats interesting - Also curious - how come if I view the gsap media on the greensock site in the simulated IE8 environment it renders the animation properly (slow, but it animates) - for example if I watch the greensock intro found on this page in the IE8 that I'm also testing my unit in, it animates correctly?

http://www.greensock.com/gsap-js/

January 28, 2014

Actually it's Window's 7 Enterprise running IE 9.

Also I was told I didn't need this line by a greensock developer:

var container = document.getElementById("container");

Is that what makes it work in IE8?

January 28, 2014

I'm not sure what you mean about missing the element tags - I see them? For example: TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn});

I'm testing on Windows XP using a newer version of IE and then using developer tools to replicate IE8. Could this be part of the problem?

January 28, 2014

Hi there - I have a file that works just how I want in all the browsers. However I must support back to IE8. The animation is not working at all in IE8. 9 is fine 10 is fine.. but 8? Totally broken. Elements appear randomly on the page and do not animate at all. Please help.

Here is my code:

<!DOCTYPE html>

<html>

<head>

<title>GreenSock: My films</title>

<style>

#container

{

width:924px;

height:250px;

background-color:#000000;

opacity:0;

position:relative;

}

#my_films

{

width:875px;

height:422px;

opacity:0;

margin-top:55px;

margin-left:20px;

}

#season2

{

width:285px;

height:44px;

margin-top:0px;

margin-left:19px;

}

#grantland

{

width:304px;

height:44px;

margin-top:5px;

margin-left:0px;

opacity:0;

}

#packshot

{

width:365px;;

height:265px;

position:absolute;

left:335px;

top:20px;

opacity:0;

}

#holiday

{

width:142px;

height:16px;

position:absolute;

left:722px;

top:84px;

opacity:0;

}

#starts

{

position:absolute;

left:714px;

top:104px;

opacity:0;

}

#buy

{

position:absolute;

left:747px;

top:210px;

opacity:0;

}

</style>

</head>

<body>

</div>

window.onload = function(){

TweenLite.to(container, 1, {autoAlpha:1, ease:Quad.easeIn});

TweenLite.to(my_films, .75, {width:177, height:44, alpha:1, ease:Power1.easeIn, delay:1});

TweenLite.from(season2, 1.5, {alpha:0, delay:2.2});

TweenLite.to(grantland, .5, {x:19, alpha:1, delay:3});

TweenLite.to(packshot, 5, {alpha:1, ease:Power4.easeIn});

TweenLite.to(holiday, 1, {alpha:1, delay:4});

TweenLite.to(starts, .75, {alpha:1, delay:4.8});

TweenLite.to(buy, .5, {alpha:1, top:142, ease:Back.easeOut, delay:5.5});

}

</script>

</body>

</html>

January 16, 2014

Hi there. Is it possible to tween the kerning of a word via TweenLite in AS3? My search hasn't pulled up info on that. Apologies if I'm over looking something! Thanks!

January 14, 2014

I'm making the switch from Flash to GSAP HTML5 animation and want to really make sure I'm doing this the best way. Right within my html doc I have a series of animation that utilize TimelineMax so that I may loop the entire set of animations. I have a few questions about these. First of all here is the code:

Is there a more optimized way to load these? I know that

window.onload = function(){

isn't the best way - I heard that document.ready could be a good way but having a hard time getting that work. Further more I can probably scrap the TweenLite reference all together and just use tl.to, is that correct?

Also right now I'm pulling in the entire TweenMax library in this manner:

Is there a way to only load the select things that I need and therefore save on file size? Please advise.

Apologies for the noob questions! Thanks in advance for any help!

Notifications

Messages

sorciereus

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by sorciereus

Animated Rollovers not functioning properly

Animated Rollovers not functioning properly

Animated Rollovers not functioning properly

IE8 not loading animation properly

IE8 not loading animation properly

IE8 not loading animation properly

IE8 not loading animation properly

TweenLite tweening Kerning?

Best way to load GSAP and best way to optimize animation