isaballoon

October 26, 2013

Custom Ease the what I am most transitioning from AS to JS. One more vote here.

October 14, 2013

You guys are too much. Rodrigo's suggestion to replace 'from' methods with 'to' methods did the trick, and once I did the set methods worked as well. Here it is.

http://erikkittlaus.com/preview/animPlusjquery3.html

The preloading you see here is a fake simulation of the functionality I'd like to create.

October 13, 2013

Mid point is reached after the first 50px shift. That's not the issue. You did give me the idea however to add an onComplete function taking the reposition outside of the tween.

In terms of your "immediateRender" idea, does that look like this?

.set("#element", {left: "+=50px"}, {immediateRender: false});

October 13, 2013

I have a TimelineLite tween sequence that has an element tweening in the from the right, then later tweening off to the left with the opacity tweening to 0. Once the element's opacity tweens to 0 (on the way out) I'd like to reset the element's position to it's original position.

Here's how I'm attempt to do so, which isn't working:

var tl = new TimelineLite();
tl.to("#element", 1, {left: "-=50px", autoAlpha:1})
.add("elementOutLabel", "+=2")
.to("#element", 0.5, {left: "-=50px", autoAlpha:0}, "elementOutLabel+=1")
.set("#element", {left: "+=50px"});
}

Can someone explain to me why this position reset isn't working for me?

October 13, 2013

Thanks, Rodrigo.

October 13, 2013

Jonathon, I've posted a version with a loading gif in the center of the screen. Would you (or someone else) be able to show me how I can implement this as a loading gif while the gallery images load?

http://erikkittlaus.com/preview/animPlusjquery3.html

Also, the last 4 tweens in the TimelineMax sequence aren't animating in, as intended. They're duplicates of the first few objects animating in at the top of the sequence. Is that a no no? Any clue as to why aren't they working?

(Thanks so much for your help in advance)

October 12, 2013

Strictly a CSS thing, but do you know why the slider is positioned above the marquee gallery?

October 12, 2013

Interesting. Well the variables without strings is working here. Check it out:

http://erikkittlaus.com/preview/animPlusjquery2.html

October 12, 2013

Yeah, that's no good. Interesting that the string works in the version without the jQuery. Anyway I've made the changes you suggested and indeed it works.

http://erikkittlaus.com/preview/animPlusjquery2.html

Next step is getting the slider to drive the animation. I'll see if I can get that working now.

Beyond that I have one more bit of functionality I'd like to ask for some help with. I've got an animated gif I'd like to have in place (and then disappear once the images are loaded). As soon as I get the slider working I will post files and inquire about it.

Thanks again for your input, Jonathon (and everyone else)!

October 12, 2013

Ok, the files are stipped down to include the image gallery only. I posted two pages: one to show the tweens working as expected. Two, the second with the inclusion of a jQuery UI slider.

TimelineMax alone (anim works):

http://erikkittlaus.com/preview/anim.html

TimelineMax with jQuery slider (anim broken):

http://erikkittlaus.com/preview/animPlusjquery.html

(note the slider, though in the flow of the document, sits above the gallery. Anyone know why it doesn't flow below the marquee div?)

Thanks for much for helping with this, guys. Really appreciate it.

October 12, 2013

I will post an example. Give me a few.

October 12, 2013

Here's the order that isn't working for me:

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>title</title>

<!-- jQuery slider --> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
  	$(function() {
    	$( "#slider" ).slider();
  	});
</script>

</head>
<body>

(body content)

<div id="sliderWrapper"></div>
	<div id="slider"></div>
</div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>

window.onload = function() {

var tl = new TimelineMax();
tweens here
}

</body>
</html>

October 12, 2013

I've got a TimelineMax animation working to my satisfaction but once I import jQuery libraries it breaks my Greensock animations. Whether I handle jQuery imports in the head or at the bottom of the HTML page doesn't seem to matter.

My set up is such that I've got my TweenMax import at the bottom of the page just above the window.onload section.

What am I missing here?

October 9, 2013

Brilliant! Just what I was looking for, Rodrigo. Thanks so much.

October 8, 2013

Question about labeling. I have three items I'm animating in initially with offsets of item02 & item03 relative to item01 (first three lines). Works fine.

Issue arises when it's time to animate out. How do I go about labeling line 5 given it's the same item (item01) as in line 2? I attempted creating a unique label name for line 5 to no avail. How are labels handled when you have multiple tweens with the same object in the same TimelineLite sequence?

Stated another way, is it possible to use labels when a sequence contains mutiple references to the same object?

var tl = new TimelineLite();

tl.from("item01", 0.5, {left: "+=40px", autoAlpha:0}, "item01")

.from("item02", 0.5, {left: "+=40px", autoAlpha:0}, "item01+=.1")

.from("item03", 0.5, {left: "+=40px", autoAlpha:0}, "item01+=.1")

.to("item01", 0.5, {left: "-=50px", autoAlpha:0}, "item01+=2.6")

.to("item02", 0.5, {left: "-=50px", autoAlpha:0})

.to("item03", 0.5, {left: "-=50px", autoAlpha:0})

.from("item04", 0.5, {left: "+=20px", autoAlpha:0});

Thanks, guys.

October 7, 2013

Thanks so much, Jonathon. This is very helpful.

October 6, 2013

One more question: the preloader animated gifs often accompanying loading image sequences, are these things generally handled with canvas manipulations? Any good tutorials you can recommend on this?

October 6, 2013

Thanks, guys! This is what I was after. Much appreciated.

October 6, 2013

Simple question: Is it the case all images referenced in a TimelineLite sequence are loaded before the animation initiates?

September 17, 2013

Thanks so much, guys.

September 17, 2013

plug-in out there? I much prefer this to a jQuery plug-in if such a thing exists.

May 17, 2013

Great stuff, Rodrigo. Thanks so much for the detailed explanation.

May 16, 2013

A general question: Is it the case that images manipulated with Greensock tweening are fully loaded before Tweens are engaged? Is that a safe assumption?

Thanks.

May 16, 2013

Well that's embarrassing. Thanks...and to confirm, both elements now work - http://grokhaus.com/navTest/navTest04.html

Thanks again, Carl!

May 16, 2013

Hey guys. Two things I'm trying to accomplish with a navigation bar. First I want it to fade up on page load. Secondly, I'm looking for opacity tweens on rollovers.

First part I have working, as evidenced here - http://grokhaus.com/navTest/navTest01.html

Second part I isolated for testing purposes before combining the two, and this functionality is not working for me (code provided by Carl in a separate post yesterday) - http://grokhaus.com/navTest/navTest02.html

On combining the two: would something like this work?



<script>


window.onload = function() {

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

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

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

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


    TweenMax.fromTo([video,faq,about,contact], 1.5, {autoAlpha:0}, {autoAlpha:.2, delay:1});

    TweenMax.fromTo(home, 1.5, {autoAlpha:0}, {autoAlpha:1, delay:1, onComplete: activateRollover});

}


function activateRollover() {


	video.onmouseover = function() {

  		TweenMax.to(video, 0.2, {opacity:1});

	}

	video.onmouseout = function() {

  		TweenMax.to(video, 0.2, {opacity:0.2});

	}

}


</script>

Any help here is greatly appreciated.

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by isaballoon