isaballoon
isaballoon's Achievements
3
Reputation
-
Custom Ease the what I am most transitioning from AS to JS. One more vote here.
-
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.
-
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});
-
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?
-
Thanks, Rodrigo.
-
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)
-
Strictly a CSS thing, but do you know why the slider is positioned above the marquee gallery?
-
Interesting. Well the variables without strings is working here. Check it out: http://erikkittlaus.com/preview/animPlusjquery2.html
-
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)!
-
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.
-
I will post an example. Give me a few.
-
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>
-
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?
-
Brilliant! Just what I was looking for, Rodrigo. Thanks so much.
-
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.
