[Bullet proof JS timeline]

Hello all. I need a bit of help. I am trying to create the bullet proof timeline in JS. The AS example can be found below. Can someone help me get this started. I have tried but I am having issues with being able to jump to certain areas of the timeline. Thanks.

 

http://www.snorkl.tv/2011/03/bullet-proof-timelinemax-transitions-part-1-jump-to-section/

[Nested Timeline Help]

Thanks. I tried this and it worked beautifully.

[Nested Timeline Help]

I know this is a rookie question but does someone know where to find information or knows how to setup up a basic nested TimelineMax? Any help would be appreciated. Thanks.

[Relative Background Animation]

Thanks Carl. I have had fun with this one!

[Relative Background Animation]

I have been experimenting with animating a sprite sheet in javascript using GSJS. Here is how I have set it up. First I make a image sequence. I started with a 24 frame rotation of a camera. I created a illustrator file 12 x the width of one image which was 300px and 2 x the height which was 300px. My final artboard was 3600 x 600px for this test. For this animation to work all the images have to be lined up in there cells. Below is an example of the final code and animation. Enjoy.

See the Pen dJliq by anon (@anon) on CodePen

[Animating Sprite sheets.]

I have been experimenting with animating a sprite sheet in javascript using GSJS. Here is how I have set it up. First I make a image sequence. I started with a 24 frame rotation of a camera. I created a illustrator file 12 x the width of one image which was 300px and 2 x the height which was 300px. My final artboard was 3600 x 600px for this test. For this animation to work all the images have to be lined up in there cells. Below is an example of the final code and animation. Enjoy.

See the Pen dJliq by anon (@anon) on CodePen

[Relative Background Animation]

Thanks Carl. I was working with the code and SteppedEase and I believe I have achieved the desired affect. I was able to get the sprite sheet animated like I did with TimelineLite but I only have to write one line of code.

 

 

var TL = TweenMax.to("#seqHolder", .8,{backgroundPosition:"-6900px 0", paused:true, ease:SteppedEase.config(23), onUpdate:updateSlider});

 

 

Example of Sprite Animation

See the Pen vghjr by anon (@anon) on CodePen

[Relative Background Animation]

I have successfully animated a backgroundPosition through TimelineLite to achieve a some animation. I am now trying to see if I can achieve this with one Tween. Here is what I need to do but its not working yet.

 

 

var TL = TweenMax("#seqHolder", 1, {backgroundPosition:"-=300px 0", repeat:23, paused:true});

 

 

 

I want to have the background subtract 300px from its position every time the tween repeats. Any input would be greatly appreciated. Thanks.

[Shadow Box]

One other question about the GSJS shadow box. How can I have a css3 animation play for the content animating in and then fall back to another tween when browser doesn't support css3. 

 

Thanks.

[Shadow Box]

Thanks for the quick reply. This is exactly what I was looking for. This will help me build it out. I did not realize how easy it was. Thanks again.

[Shadow Box]

I know there are many ways to do a shadow box effect but is there a simple method that incorporates GSJS much like the shadow box effect for downloading GreenSock packages.

 

Thanks for you help.

[color animation]

I have had luck with using the hex color when changing the background color. I develop for IE8 so I know that this method works in that browser as well as others.

 

TweenLite.to(bot1, .2, {top:"-192px", backgroundColor:"#FFF", ease:Cubic.easeOut, paused:true});

[GSJS Slider]

Thanks for the post. The other item I was looking to building was a div with text in it that I could scroll. I just wanted to custom skin the slider.

[Particle Animation]

Wow that's awesome. Thanks for your post. This is what I was looking for.

[Particle Animation]

Thanks for the help. I had thought building it out but was curious before I do if there is a better way. Also thought about combining TimelineMax and the BezierPlugin together.

[GSJS Slider]

check out the Jump Start series here

http://www.greensock.com/jump-start-js/

 

I've learned so much from simply copy and pasting the examples and noodling with the examples.

What you are asking for can be found in different examples on this site.

 

Good luck!

 

Thanks for the reply. I'll check this out.

[GSJS Slider]

I need to create two elements and I am not sure where to start. First I need to create a slider that can control a TimelineLite animation. Second I need to create a custom scroller for a div box with its content being text. Any help on these two items will be greatly appreciated. 

 

 

 

Thanks for your help!

[Drag and Drop]

I am trying to setup an animation with GSJS that allows to drag one div item over another and fires a function either on over the target object or release of draggable object on top of landing target.

 

 

Thanks for your help!

[Particle Animation]

I am looking to create a particle animation similar to the video below with GSJS. What is the best way to go about this. Where should I start.

 

 

 

http://www.istockphoto.com/stock-video-18351884-colorful-numbers-background-loop-pastel-rainbow-hd.php?st=1f7e5fb

 

 

Thanks for your help!

[Animated Scroll to Anchor Tag]

I am trying to figure out how to use greensock to tween to another anchor point on the page. Does anyone know how to do this. Thanks.

[Tween Opacity of Text]

This worked great. I went back to my code and did some investigating. I found that if I called out to a function from the timelineMax that just contained the one Tween for the text it would work in animating; however when I placed the tween into the TimelineMax sequence it failed to run that line. Any thoughts on that?

[Tween Opacity of Text]

<script>

 

function init()

{

 

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

 

TweenLite.to(mainInfo, 1, {css:{alpha:0}});​

 

}

 

 

</script>

 

 

<style type="text/css">

 

#mainInfo

{

 

position: absolute;

width: 502px;

height: 434px;

margin-top: 140px;

margin-left: 284px;

font-family:Times;

font-size:14px;

text-align:justify;

display:block;

}

 

</style>

 

 

 

 

 

 

</head>

 

<body onLoad="init()">

 

<div id="mainInfo">My Text goes here</div>

[Tween Opacity of Text]

I new to the GSJS and I am trying to tween the opacity of a div that as text in it. I have not been able to get the text to change with any css changes. Here is a sample of my code below. Could anyone tell me what I am doing wrong. Thanks.

 

 

 

function init()

{

var title = document.getElementById("logoTitle");

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

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

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

var nav1 = document.getElementById("s1navOne");

var nav2 = document.getElementById("s1navTwo");

var nav3 = document.getElementById("s1navThree");

var nav4 = document.getElementById("s1navFour");

var nav5 = document.getElementById("s1navFive");

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

 

var logoTL = new TimelineMax({delay:.4});

 

logoTL.from(logoBar, .5, {css:{transformOrigin:"bottom", scaleY:"10"}, ease:Sine.easeOut})

logoTL.from(title, .5, {css:{alpha:0, marginLeft:"-50px"}, ease:Back.easeOut}, -.3)

logoTL.from(subTitle, .5, {css:{alpha:0, left:"50px"}, ease:Back.easeOut}, -.3)

logoTL.from(logoNumber, .5, {css:{alpha:0, marginTop:"20px"}, ease:Back.easeOut}, -.3)

logoTL.from(nav1, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.3)

logoTL.from(nav2, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4)

logoTL.from(nav3, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4)

logoTL.from(nav4, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4)

logoTL.from(nav5, .5, {css:{alpha:0, marginLeft:"-60px"}, ease:Back.easeOut}, -.4)

logoTL.to(mainInfo, 1, {css:{alpha:0}})

 

 

<div id="mainInfo">This is the text I have</div>