isaballoon
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by isaballoon
-
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.
-
Thanks so much, Jonathon. This is very helpful.
-
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?
-
Thanks, guys! This is what I was after. Much appreciated.
-
Simple question: Is it the case all images referenced in a TimelineLite sequence are loaded before the animation initiates?
-
Thanks so much, guys.
-
plug-in out there? I much prefer this to a jQuery plug-in if such a thing exists.
-
Great stuff, Rodrigo. Thanks so much for the detailed explanation.
-
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.
-
Well that's embarrassing. Thanks...and to confirm, both elements now work - http://grokhaus.com/navTest/navTest04.html Thanks again, Carl!
-
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.
