Jonathan
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Jonathan
-
what about wrappng the image in a div. give the div css (position:relative;) and then give the image css (position:absolute); check out these examples (ie8 may be a little jittery): http://codepen.io/jonathan/pen/udoKG http://codepen.io/jonathan/pen/boclF code pen might not work in ie8 (ie8 standards mode)
-
i just tested in IE8 (IE8 standards mode) and i see it just translating but not scaling... have you tried adding a transformOrigin property to your tween, and/or encapsulating your css properties with the css: {} property: $(document).ready(function() { var bool = true; $('#campus').click(function(){ var _scale = (bool) ? .7: 1; TweenLite.to($('#campus'), 1, {transformOrigin:"center center", scale:_scale}); bool = !bool; }); }); // or using the css: {} property ??? $(document).ready(function() { var bool = true; $('#campus').click(function(){ var _scale = (bool) ? .7: 1; TweenLite.to($('#campus'), 1, {css: {transformOrigin:"center center", scale:_scale}}); bool = !bool; }); });
-
Here is one that I was testing with a GSAP timeline.. a couple of posts ago http://codepen.io/jonathan/pen/qxsfc note its not that dynamic just a quick concept with timeline and tweens... .but with help from Rodrigo, it can go in reverse now... if you want and by modifying it, and passing parameters of the active slide to the animateSlide functions it can become more dynamic. And just use one animateSlide function. but like Rodrigo and Bassta said.. sometimes its best to keep it simple and not mess with timelines.. and just use a simple function and CSS selectors.. just my one cent
-
if you look at your source code.. you have a ending div tag </div> with out the start div tag.. try correcting that, and see if it works.. ie8 (ie8 standards mode) throws an error in the console about the Unmatched end tag, line 23.
-
i did some other tests and noticed that clearProps wont clear properties in IE8 (IE8 standards mode) .. (which is whats used on Windows XP IE8 standalone) ..even with the working code pens from above... Any ideas on how to get GSAP to clear properties in IE8 (IE8 standards mode) To test, make sure that in the IE inspector, that Browser Mode: IE8 Document Mode: IE8 standards and you will see how clearProps wont clear the properties.. like the filter, etc.. If you have Windows 7, then IE10 Standards (if installed will be default).. When you test and if you are using Windows 7, IE10.. it will use the new standards mode, even if IE8 is selected for Browser Mode, you will have to select Browser Mode: IE8, Document Mode: IE8 standards to test it. But the real issue is on IE8 on Windows XP, which is where this problem would occur since Microsoft Internet Explorer only goes up to IE8 on XP. Even though IE8 is at 6% market share.. we still have to deal with this stupid browser for a little while.. codepen, jsfiddle, and jsbin might have problems with IE when in IE8 (IE8 standards mode) .. so i attached the files as a zip file below to test in IE8 (IE8 standards mode).. even to test if possible in IE8 (IE8 standards) in Windows XP. You will see how clearProps wont clear the properties after the animation runs in IE8 (IE8 standards) so any help will be highly appreciated !!! Thanks ahead of time... codepen_rwFva.zip
-
Thanks for responding!! Cool.. so i guess if i use clearProps and the css: {} property is present, i will make sure it goes inside the css: {} property... I guess we can see why transformOrigin wasn't clearing but least I know about clearProps inside the css: {} when used.. That explains it .. Nice .. Thank you Rodrigo, Carl, and Jamie!!!
-
if you check your collab codepen.. i left a comment.. Thanks for the help Rodrgo! I found out that in the tween if i use the css: {} property along with clearProps property ... the properties dont get cleared. But once i just declare the css properties without the css: {} property, than the clearProps work. ////////////////////////////////////////////////////////// // clearProps works without the css: {} in the properties var tl = new TimelineMax({ paused:true, autoRemoveChildren:true }); tl.add( TweenMax.to($("img").eq(0), 4, { // clearProps does work without the css: {} transformOrigin:"left top", scale:1.5, clearProps: "transformOrigin,transform,scale", ease: Linear.easeOut }) ); tl.play(); ////////////////////////////////////////////////////////// // clearProps doesnt work with the css: {} in the properties var tl2 = new TimelineMax({ paused:true, autoRemoveChildren:true }); tl2.add( TweenMax.to($("img").eq(1), 4, { // clearProps doesn't work with the css: {} css: { transformOrigin:"left top", scale:1.5 }, clearProps: "transformOrigin,transform,scale", ease: Linear.easeOut }) ); tl2.play(); i set up another example.. you will notice the second box that uses the css; {} property does not clearProps: http://codepen.io/jonathan/pen/zuAJs looks like some type of bug, or maybe that is the way its designed to work, not sure ???
-
thanks.. if you look at my above code pen... http://codepen.io/jonathan/pen/rwFva you'll see how I even removed the initial style on the image, and it still doesnt remove or clear the transform property.. I dont have code pen pro for collab mode.. maybe you can fork it
-
thanks for the reply.. but even if I clearProps scale.. the values still are not cleared on the image.. if you notice I had the clearProps commented out on the tween.. I tried all 3 ways.. and all at the same time.. because even when I tried the clearProps property on the tween.. it still didnt clear the scale or the transform origin.. I tried clearing the transform since I want all parts of the transform matrix (scale,rotate, and translate) cleared.. i update dmy code pen but still with all 3 , its a no go when I look in the code inspector the values are still there on the tag and even listed in the dom inspector, even if I have all 3 clearProps uncommented out.. and have it on the timelines onComplete callback.. the tween onComplete callback.. and as a property on the tween.. the transform: matrix() is not cleared.. im not sure why.. the only way i can clear the properties is by either removing the style attribute on the image, or using removing the transform matrix property via jQuery
-
Hello.. i am trying to clear properties on a tween and/or timeline. But no matter what or where i use it, it wont clear the properties off the element (image). sample code below: var tl = new TimelineMax({ paused:true, autoRemoveChildren:true, onComplete: function(){ //TweenMax($("img"),{clearProps:"all"}); TweenMax($("img"),{clearProps:"transformOrigin,transform,scale"}); } }); tl.add( TweenMax.to($("img"), 4, { css:{ transformOrigin:"left top", scale:1.5 }, clearProps: "transformOrigin,transform,scale", //clearProps: "all", ease: Linear.easeOut, onComplete: function(){ //TweenMax($("img"),{clearProps:"all"}); TweenMax($("img"),{clearProps:"transformOrigin,transform,scale"}); } }) ); tl.play(); and here is my codepen example: http://codepen.io/jonathan/pen/rwFva as you can see using your browser code inspector/console.. you can see how after the animation completes the transform properties do not get cleared. You can see how i tried 3 ways that are commented out: the clearProps that is called in the onComplete callback of the Timeline using the set method the clearProps that is called in the onComplete callback of the added Tween using the set method and the clearProps property on the added tween. No matter which way i try to clear properties, i cant seem to have the element clear the properties GSAP has added. If you check my code pen example commenting out each way you can see how its not clearing the style attribute css properties: transform matrix3d, transform origin or any css that GSAP adds to the element (image). Any help will be highly appreciated!
- 15 replies
-
- 1
-
-
- css
- clearprops
- (and 3 more)
-
have you looked at this? .. http://premiumcoding.com/freebie-jquery-falling-leaves/ you could download the files and try to convert that concept using GSAP.. which would probably make the leaf animation much more smoother and faster.. some type if starting point. When I have more time I will go over those files to look at converting to GSAP, and try to post here. It might give you some ideas?
-
one last thing.. if for some reason I have to use multiple tickers, to know which one called the ticker, and use the event object to keep track using the scope parameter. If I use one of the kill methods, does that remove any garbage, regarding the ticker? or in general when killing a tween, timeline, delayedCallback, or removing the listener from a ticker.. does that remove garbage? thanks again for the help!
-
does your GSAP timeline animation use canvas? Because if your animating canvas properties with GSAP, then you could possible use this to convert your GSAP canvas animation to a video... http://www.ultramegatech.com/2010/09/record-html-canvas-animations-to-video/ just a thought...
-
That's awesome Jack.. I didn't know you could store the ticker in a variable! Great idea.. this way i don't have to worry about garbage collection. Thanks for the quick solution!
-
looks like after doing some tests.. it looks like that both output the same time. But i guess im unclear on which one is better to use?
-
I am accessing the time property via the ticker() methods event object: TweenMax.ticker.addEventListener("tick", loop, this, true, 1); function loop(e){ // the time property in the target if(window.console) console.log(e.target.time); // the time property in the target._eventTarget if(window.console) console.log(e.target._eventTarget.time); // do stuff with passing time } When accessing the time property in the event object that gets passed, which time property is best to use when keeping track of the passed time: e.target.time or e.target._eventTarget.time Any help will be highly appreciated!
-
Thanks for the clarification Jack!
-
just in case anyone wants to know, How to make tween or timeline accept new selector value.. and after getting advice from Jack.. he suggested that I need to use one of the kill methods on the tween, If I want to re-declare a new target/selector. He explained that when a tween is run, you can not change the tweens target, since the animation is technically running in memory. So after following Jacks advice, I killed the tween after its completion and then re-declared it with a new selector. After that I was able to animate the new target. I hope this helps someone else!
-
I just tested this code pen example in latest Firefox, Chrome, and IE10, IE9, IE8.. and it works fine in all of those browsers. I tested those browsers on Windows 7. .. I haven't tested in Windows XP though.
-
cool.. i just updated my pen with those onReverseComplete changes http://codepen.io/jonathan/pen/qxsfc thanks Rodrigo
-
rhernando here is a code pen test of me trying with the timeline only approach: http://codepen.io/jonathan/pen/qxsfc also here is your code pen example slightly modified for showing one slide at a time... its gonna give me ideas: http://codepen.io/jonathan/pen/sJlix i will still have to try and test my timeline version with a loop, so there is only one child timeline, maybe for a next slide animation and a previous slide animation. I still need to find if the GSAP API has a method for updating the tween or timeline if one of the object properties are changed.. like the element/selector. I wonder if there is a way through GSAP using one of the KILL methods, or UPDATETO methods? thanks for the help rhernando!
-
thanks rhernando!! .. I will play around the pen you made.. I appreciate your advice and time!
-
thanks for the quick answer! but im actually using it for a slider im making .. but was wondering why it wouldnt accept the new increment. So i will run the tween in a loop. basically im creating a parent timeline that calls child timelines that will have a fade animation and then wait 5 seconds. And then the onComplete callback will increment the 'current' variable. The current variable is what drives the next slide. because the slider will have a next and previous button... and an autoplay feature so im fleshing out the slider as a timeline, so when each child timeline finishes it will callback the current variable to change and then the next time the timeline restarts it will be animating the next slide. Im just trying to make a slider solely from a GSAP timeline.. so i can control it using all the playback controls. So i need way to have it accept a element selector that changes mid stream through an animation run.
-
hello, im making this animation run and then the onComplete callback increments the 'current' variable by one, so it would advance to the next element to animate. But the problem im having is that the variable (currrent) increments by one, but the tween in the doSomething() function seems to not update the selector/element in that tween. my example below: var $ul = $("ul"), $li = $ul.children(), liCount = $li.length, current = 0; function doSomething() { var someTimeline = new TimelineMax({ onComplete:updateCurrent }); someTimeline.add( TweenMax.to($li.eq(current), 1, {css:{opacity:0}}) ); return someTimeline; } function updateCurrent(){ current = ++current;}function restartTimeline() { tl.restart(); } var tl = new TimelineMax({ repeat:-1, onComplete:restartTimeline }); tl.add(doSomething(), "slide1"); But when i run it, it looks like the tween in the doSomething function is stored in memory so the selector/element never gets updated with the new increment. // when the animation first runs the selector is:$li.eq(0) // $li.eq(current)// then the current variable gets incremented// then when it runs a 2nd time$li.eq(1) // $li.eq(current) Is there a way to update the tween so it accepts the newly incremented variable in the tween? Do i have to kill the someTimeline variable TimelineMax instance. So when the 'current' variable gets incremented the tween will accept the new selector. Thanks ahead of time for any help!
-
Will do, thanks Carl! I had one more question regarding setting css properties regarding opacity.. When using TweenMax.. is it best to set css opacity or autoAlpha? thanks again for the help!!
