Jump to content
Search Community

Jonathan last won the day on June 18 2019

Jonathan had the most liked content!

Jonathan

Moderators
  • Posts

    3,548
  • Joined

  • Last visited

  • Days Won

    133

Everything posted by Jonathan

  1. Hello Everyone, Is force3d:true deprecated.. i dont see it in the CSSPlugin docs either anymore, unless I'm mistaken and it was never there to begin with: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html I was doing some simple animation tests and noticed that i keep getting this error regarding force3d:true in the console invalid force3d tween value: true http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.0/TweenMax.min.js Line 15 i made a simple code pen so you can see the error thrown in the console: http://codepen.io/jonathan/pen/Hcvuq I have used force3d:true before but was wondering if it was recently deprecated or am i missing something here? I even saw it using version 1.10.3 I am using the force3d:true even inside the css{} object and still seeing the message above in the console Any help as always will be highly appreciated.. Thanks
  2. hello.. your window.load function should look like this window.onload = function() { var yeller = document.getElementById("imgYeller"); yeller.addEventListener("click", disappear, false); }; notice how you dont need to use init() since your assigning the window.load an anonymous function also have you looked at using a javascript library like jQuery or Zepto to handle the cross browser event handling. the reason I suggest this is because addEventListener() isnt available in some browsers like IE which in some versions use attachEvent() http://api.jquery.com http://zeptojs.com
  3. just a quick note.. if you want the background image to scale for responsive design.. take a look at the CSS background-size property.. depending on what media queries you are using for responsive design... you can use this property inside the different media queries ..the background-size property can scale the background image based on the width and height you pass to it. background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size http://www.sitepoint.com/css3-background-size-property/ it's a great property and is available in the modern browsers with the exception of IE8 http://caniuse.com/#search=background-size
  4. hello mgalic.. if you look at the staggerTo() method in the API DOCs you will see how each method is documented quite well: staggerTo() http://api.greensock.com/js/com/greensock/TweenMax.html#staggerTo() PARAMETERS targets:Array — An array of target objects whose properties should be affected, or selector text that gets passed to TweenLite.selector (for selecting DOM elements). For example, if jQuery (or similar) is loaded and you pass ".myClass", it would act as though you passed in an array of DOM elements that had the "myClass" class applied. The same behavior applies if you pass a jQuery object containing multiple elements (like $(".myClass")). duration:Number — Duration in seconds (or frames if useFrames:true is defined in the vars parameter) vars:Object — An object defining the end value for each property that should be tweened as well as any special properties like ease. For example, to tween x to 100 and y to 200 for mc1, mc2, and mc3, staggering their start time by 0.25 seconds and then call myFunction when they last one has finished, do this: TweenMax.staggerTo([mc1, mc2, mc3], 1, {x:100, y:200}, 0.25, myFunction}). stagger:Number (default = 0) — Amount of time in seconds (or frames for frames-based tweens) to stagger the start time of each tween. For example, you might want to have 5 objects move down 100 pixels while fading out, and stagger the start times by 0.2 seconds - you could do: TweenMax.staggerTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"+=100", opacity:0}, 0.2). onCompleteAll:Function (default = null) — A function to call as soon as the entire sequence of tweens has completed. onCompleteAllParams:Array (default = null) — An array of parameters to pass the onCompleteAll method. onCompleteAllScope:* (default = null) — The scope in which the onCompleteAll callback should be called (basically, what "this" refers to in the function). NOTE: this parameter only pertains to the JavaScript and AS2 versions; it is omitted in AS3.
  5. if you can provide a codepen or jsfiddle example it will be very helpful in helping you track down the issue..
  6. try this to check when the browser window or tab loses focus: the below uses jQuery .. for Firefox and Chrome.. and some native JS fro IE /////////////////////////////////////////////////////// // check if browser tab has focus var focused = true; // check if not IE for Firefox and Chrome if(document.documentMode === undefined){ $(window).bind("focusin",function() { if(isLoaded === true){ // ticker add listener goes here TweenLite.ticker.addEventListener("tick", updateGameState); focused = false; } }); $(window).bind("focusout",function() { if(isLoaded === true){ // ticker remove listener goes here TweenLite.ticker.removeEventListener("tick", updateGameState); focused = true; } }); } else { // check if IE all versions if(window.addEventListener){ window.addEventListener("focus", function(event) { if(isLoaded === true){ // ticker add listener goes here TweenLite.ticker.addEventListener("tick", updateGameState); focused = false; } }, false); window.addEventListener("blur", function(event) { if(isLoaded === true){ // ticker remove listener goes here TweenLite.ticker.removeEventListener("tick", updateGameState); focused = true; } }, false); } else { window.attachEvent("focus", function(event) { if(isLoaded === true){ // ticker add listener goes here TweenLite.ticker.addEventListener("tick", updateGameState); focused = false; } }); window.attachEvent("blur", function(event) { if(isLoaded === true){ // ticker remove listener goes here TweenLite.ticker.removeEventListener("tick", updateGameState); focused = true; } }); } } } the above event handlers will listen when you focus in and out of the tab or window in Chrome, Firefox and in IE so when the animation gains focus it will start the ticker and when you focusout it will remove the listener notice for IE i have to use attachEvent instead of using jQuery bind() due to IE's inconsistency with multiple versions and rendering modes hope this helps
  7. i cant see your full js, css, and html.. but do you have jQuery included in the page? the reason i ask is because in order to use your selector ".social-stream", as a target in the GSAP to() method .. you have to have jQuery loaded in the page so GSAP can take advantage of the JQuery selector engine plus i see an extra }); (ending squiggly and ending parenthesis) at the end without any preceding code
  8. Hello.. yes its possible to use GSAP to animate the page from top to bottom: There is the ScrollToPlugin available: http://api.greensock.com/js/com/greensock/plugins/ScrollToPlugin.html Rodrigo has created some cool examples using it: http://codepen.io/rhernando/pen/bjLxe http://codepen.io/rhernando/pen/dLxAJ the above examples were referenced from this post reply by Rodrigo: http://forums.greensock.com/topic/8053-scrolltop-in-greensock/?view=findpost&p=30899 also another example by Carl: http://codeaway.info/greensock-animation-platform-scroll-to-plugin-sample/ http://codepen.io/GreenSock/pen/e3773ba558336892a3bd43c49d7fdcf2 i hope this helps if you provide an example codepen or jsfiddle it would be great to better help you.. thx
  9. Hello and Welcome to the GreenSock Forums When you are testing your app.. are you testing on an actual device or through the PhoneGap emulator ?If you are you are testing on an actual device: What is the model, Operating System, and OS version being used ? GSAP is very fast and performs very well.. ive noticed that when using PhoneGap to test the app, that PhoneGap is not a good test bed when testing for actual performance and smoothness of animation. thanks.. if the app is online i would be more than happy to test on my android devices
  10. Hello have you tried using onComplete instead of onRepeat.. and also adding clearProps:"all" say after alpha:0 in your to() method maybe something like this: TweenMax.to($this.children(':first') , 1, { css:{alpha:0, clearProps:"all"} , repeat: -1, repeatDelay:3, onComplete: reset });you could also try this inside your reset fucntionTweenMax.set($this.children(':first'),{clearProps:"all"});or you might have to use any of the available kill methods to wipe the existing recorded target value, within your callback http://api.greensock.com/js/com/greensock/core/Animation.html#kill() http://api.greensock.com/js/com/greensock/TweenMax.html#killAll() http://api.greensock.com/js/com/greensock/TweenMax.html#killChildTweensOf() http://api.greensock.com/js/com/greensock/TweenMax.html#killDelayedCallsTo() http://api.greensock.com/js/com/greensock/TweenMax.html#killTweensOf() if you can create an example via codepen or jsfiddle it will help us be able to better help you find a solution.. thx
  11. on your site.. http://www.ducklingfarm.com/ you have ID's with the same name... ID's are supposed to be unique ... so try naming your IMG tags like homeImg1, homeImg2, homeImg3, etc.. instead of having them all have the same ID name : #homeImg try changing your selector to $('.homeImg > img') and when i look at your site you are still using the code from your first post.. try changing the code to reflect Carl or My codepen in the examples we changed for you above..
  12. what about this .. it looks like your syntax was wrong for the from() method .. http://api.greensock.com/js/com/greensock/TweenMax.html#from() you had two extra parameters in there at the end http://codepen.io/jonathan/pen/gIzeJ plus i had to change your image tags and make there id's unique.. they were all named #homeImg so i added an arbitrary attribute selector that finds any img tag that has an ID with part of the string homeImg $(document).ready(function() { $(window).on('load', function(){ TweenMax.from( $('img[id*="homeImg"]'), 0.5, {css:{scale:0.05, opacity:0, rotation: 180}, ease:Quad.easeInOut }); }); }); you could also target the images like this: $(document).ready(function() { $(window).on('load', function(){ TweenMax.from( $('.homeImg > img'), 0.5, {css:{scale:0.05, opacity:0, rotation: 180}, ease:Quad.easeInOut }); }); }); in that case it would find any img tag that is a first child of .homeImg div just a quick note.. in codepen you can add your js and javascript libraries by clicking the sprocket icon on the JS window area
  13. Welcome to the GreenSock Forums what about making sure the images are loaded before animating them... by using the window load event $(document).ready(function() { $(window).on('load', function(){ TweenMax.from( $('#homeImg'), .5,{css:{scale:.05, opacity:0, rotation: 180}, ease:Quad.easeInOut}), 400,-400); }); }); the window event makes sure all images are loaded on the page.. so you can run the tween when the image is loaded does that help? if not.. if you can provide a jsfiddle or codepen example it will be very helpful
  14. you could try using one of the GSAP kill methods to stop / clear / kill the animation so when the resize event fires and checks with your if statement that the animation is killed and runs the tween again: here are the available kill methods: _________________________________________________________________ kill() Kills the animation entirely or in part depending on the parameters. http://api.greensock.com/js/com/greensock/core/Animation.html#kill() //kill the entire animation: myAnimation.kill(); //kill only the "x" and "y" properties of the animation (all targets): myAnimation.kill({x:true, y:true}); //kill all parts of the animation related to the target "myObject" (if the tween has multiple targets, the others will not be affected): myAnimation.kill(null, myObject); //kill only the "x" and "y" properties of animations of the target "myObject": myAnimation.kill({x:true, y:true}, myObject); //kill only the "opacity" properties of animations of the targets "myObject1" and "myObject2": myAnimation.kill({opacity:true}, [myObject1, myObject2]); _________________________________________________________________ killAll() Kills all tweens and/or delayedCalls/callbacks, and/or timelines, optionally forcing them to completion first. http://api.greensock.com/js/com/greensock/TweenMax.html#killAll() //kill everything TweenMax.killAll(); //kill only tweens, but not delayedCalls or timelines TweenMax.killAll(false, true, false, false); //kill only delayedCalls TweenMax.killAll(false, false, true, false); _________________________________________________________________ killChildTweensOf() Kills all tweens of the children of a particular DOM element, optionally forcing them to completion first. http://api.greensock.com/js/com/greensock/TweenMax.html#killChildTweensOf() <div id="d1"> <div id="d2"> <img src="photo.jpg" id="image" /> </div> </div> <div id="d3"></div> TweenMax.to( document.getElementById("d2"), 1, {css:{left:100}}); TweenMax.to( document.getElementById("image"), 1, {css:{left:100}}); TweenMax.to( document.getElementById("d3"), 1, {css:{left:100}}); //only kills the first 2 tweens because those targets are child elements of the "d1" DOM element. TweenMax.killChildTweensOf( document.getElementById("d1") ); _________________________________________________________________ killTweensOf() Kills all the tweens (or specific tweening properties) of a particular object or the delayedCalls to a particular function. http://api.greensock.com/js/com/greensock/TweenMax.html#killTweensOf() TweenMax.killTweensOf(myObject); TweenMax.killTweensOf(myObject, {opacity:true, x:true}); _________________________________________________________________ You could use any of the above GSAP methods to stop the animation which.. or kills the animation entirely or in part depending on the parameters and what method you use In your case you can try using the killTweensOf() method: $(window).resize(function(){ var ww = $(window).width(); if(ww < 1350) { var ha = document.getElementById(home-art); TweenMax.killTweensOf(document.getElementById(home-art)); TweenMax.set(ha,{'left','-350px'}); } if(ww < 1780 && ww >= 1350) { var ha = document.getElementById(home-art); TweenMax.killTweensOf(document.getElementById(home-art)); TweenMax.set(ha,{'left','-200px'}); } }) if you notice i have the ha variable in each if statement so it only tries to find that element if the width meets the conditional. This way the resize event doesnt have to keep checking the DOM when the width if conditional isn't true. also using document.getElementById() is faster than using the jQuery element object selector. http://jsperf.com/getelementbyid-vs-jquery-id/13 also you will notice i used the GSAP set() method to set the css properties instead of using the jQuery css() method http://api.greensock.com/js/com/greensock/TweenLite.html#set() try that and see if that helps..
  15. Jonathan

    Null Target Error

    for file size to stay low you can just include TweenLite and CSSplugin js only to keep file size down. If your not using any other special plugins for GSAP, then you can just limit the files your only going to use. If you click the get GSAP button above and select customize. And then choose TweenLite and CSS and it will output this for you to copy and paste <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/plugins/CSSPlugin.min.js"></script> so with the CSSPlugin.min.js included as Jamie talked about above you can animate those CSS properties like rotation.. and as stated in the DOCs if you you declare the css:{} in your tween you can get a slight speed boost, but is optional http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html
  16. Hello and Welcome to the GreenSock Forums Without seeing any or all of your code... You could try setting a resize event handler: $(window).on('resize', function(){ animations.homeSection.from("#home-art", 0.75, {css:{opacity:0, left: -100}}, "homeart"); }); also depending on your media query you can also check your content widths and adjust accordingly: $(window).on('resize',function(){ if($('#content').width() >= 400){ // tweens or code can go here } else if($('#content').width() >= 800){ // tweens or code can go here } }); you get the idea.. you basically check the width of the container you are testing against for the width in the media query and then apply your tweens when it meets your specif widths or test between a specific width range: if($('#content').width() >= 400 && $('#content').width() <= 800 ){ // tweens or code can go here } this would check to see if the content width was above 400px but below 800px does that what you mean?
  17. i have just been creating an empty tween or using delayedCall() when i need a paused delay for a specific duration.. i understand that you try to keep the API as tight and light as possible! I was just curious since i saw the addPause() method... and thought if there was anything like that but with a duration.. but im fine with just using an empty tween or delayedCall() .. thanks for replying Jack!
  18. thanks for the response Carl and Jamie.. i just figured since there is the addPause() method to adding a pause to anywhere in the timeline.. if there was a way to just add a paused delay/duration as method as well.. so like if you had a slider for example you can add that paused delay without having to add an empty tween for a set duration i was testing with an all GSAP slider where i use empty tweens: http://codepen.io/jonathan/pen/qxsfc .. I see how it can open up a new can of worms regarding all the situations that would have to take into account.. especially when you wanted to go in reverse i have just been using the empty tween solution and using the delayedcall() method.. but was just curious about if there was anything down the pipeline for this type of pause with a duration as a method .. But thank you for replying to my question regarding this
  19. Hello.. in the DOC's there is the addPause() method which Carl brought to my attention after reading Carl's answer on this post.. http://forums.greensock.com/topic/8472-right-way-to-put-pause-marker-inside-timeline/?view=findpost&p=33079 it got me thinking to see if there will be some type of mixture of addPause() with a delay / duration.. kind of like a addPauseDelay() method coming in the future? so say in the middle of my timeline, i want to pause the timeline for say 5 seconds and then continue... right now im adding a to() method with an empty {} properties object like this to add a pause with a duration: tl.add( TweenMax($("#element"), 5, {}) ); in the future are we gonna see any time of pause with a delay / duration? thx
  20. i didnt notice any bugginess like the above post example, so it looks like it is animating ok.. i did notice you are using the requestAnimationFrame... Paul Irish has a nice article with using it cross browser and with a nice polyfil.. http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ also GSAP also has a very nice equivalent which is the ticker property http://api.greensock.com/js/com/greensock/TweenMax.html#ticker example usage: //add listener TweenMax.ticker.addEventListener("tick", myFunction); function myFunction(event) { //executes on every tick after the core engine updates } //to remove the listener later... TweenMax.ticker.removeEventListener("tick", myFunction); also here is a nice tut by Lee Brimelow on using it with canvas (last 3rd of the video): http://gotoandlearn.com/play.php?id=161 i hope that helps
  21. when you say your trying to have it tween itself back using the onComplete.. are you saying you trying to have it reverse back? if so you can try to add yoyo:true but you will need to use TweenMax http://api.greensock.com/js/com/greensock/TweenMax.html#yoyo() also there are reverse methods. available... but if you mean something different, a reduced test case example will be very helpful in seeing your issue thx
  22. hello.. do you have a codepen or jsfiddle example so we can see , this behavior in action to better see what your seeing in the scope of all your javascript, css, and html.. thx
  23. The delegated events work better than a normal event in that you are binding to the parent of the element you want to trigger. So instead of binding the event directly to every element that you want to listen to, ...you bind a single event handler to the parent of that element or elements, which in turn when the child is triggered, it bubbles up the DOM to the parent that has the event handler (mouseenter and mouseleave) attached to it... so the parent will listen for events happening on it’s descendants or children elements. So this way when you attach the mouseenter and mouseleave events to your div's, it will have to bind events to each div. Using more memory because of multiple event handlers... verses just binding to its parent once. Plus we would have to unbind event handlers to every element that is removed from the DOM, and bind event handlers for every element added to the DOM. But if we bind the event handler to the parent, any children that are added or removed will trigger just fine. Even if the children didn't exist after the DOM was ready and all event handlers were attached when the page first loaded. The jQuery on() method keeps listening for changes to the DOM .. using jQuery off() method unbinds or kills the event handler that you previously attached / binded with on(). you can learn more about the on() / off() methods here: http://api.jquery.com/on/ http://api.jquery.com/off/ more info on learning about events http://learn.jquery.com/events/ does that make sense?
  24. Hello ... you could try any of the kill methods: _________________________________________________________________ kill() Kills the animation entirely or in part depending on the parameters. http://api.greensock.com/js/com/greensock/core/Animation.html#kill() //kill the entire animation: myAnimation.kill(); //kill only the "x" and "y" properties of the animation (all targets): myAnimation.kill({x:true, y:true}); //kill all parts of the animation related to the target "myObject" (if the tween has multiple targets, the others will not be affected): myAnimation.kill(null, myObject); //kill only the "x" and "y" properties of animations of the target "myObject": myAnimation.kill({x:true, y:true}, myObject); //kill only the "opacity" properties of animations of the targets "myObject1" and "myObject2": myAnimation.kill({opacity:true}, [myObject1, myObject2]); _________________________________________________________________ killAll() Kills all tweens and/or delayedCalls/callbacks, and/or timelines, optionally forcing them to completion first. http://api.greensock.com/js/com/greensock/TweenMax.html#killAll() //kill everything TweenMax.killAll(); //kill only tweens, but not delayedCalls or timelines TweenMax.killAll(false, true, false, false); //kill only delayedCalls TweenMax.killAll(false, false, true, false); _________________________________________________________________ killChildTweensOf() Kills all tweens of the children of a particular DOM element, optionally forcing them to completion first. http://api.greensock.com/js/com/greensock/TweenMax.html#killChildTweensOf() <div id="d1"> <div id="d2"> <img src="photo.jpg" id="image" /> </div> </div> <div id="d3"></div> TweenMax.to( document.getElementById("d2"), 1, {css:{left:100}}); TweenMax.to( document.getElementById("image"), 1, {css:{left:100}}); TweenMax.to( document.getElementById("d3"), 1, {css:{left:100}}); //only kills the first 2 tweens because those targets are child elements of the "d1" DOM element. TweenMax.killChildTweensOf( document.getElementById("d1") ); _________________________________________________________________ killTweensOf() Kills all the tweens (or specific tweening properties) of a particular object or the delayedCalls to a particular function. http://api.greensock.com/js/com/greensock/TweenMax.html#killTweensOf() TweenMax.killTweensOf(myObject); TweenMax.killTweensOf(myObject, {opacity:true, x:true}); _________________________________________________________________ you could use any of the above GSAP methods to stop the animation which.. or kills the animation entirely or in part depending on the parameters and what method you use
  25. have you tried setting paused to true in your TimelineMax instance http://api.greensock.com/js/com/greensock/core/Animation.html#paused() have you tried using the same on() method for the mouseleave instead of the shorthand mouseleave() method var hoverEffect = new TimelineMax({paused:true}); $('div').on('mouseenter', function(){ hoverEffect.add( TweenMax.to($(this), 0.2, {top:"-=20px",ease:Quad.easeIn}) ); hoverEffect.play(); }).on.('mouseleave', function(){ hoverEffect.add( TweenMax.to((this), 0.2, {top:"+=20px",ease:Quad.easeOut}) ); hoverEffect.play(); }); also its best to give use delegated events.. so where you have the div selector you would use one of its parents and put the div. I cant see your markup but something like this: var hoverEffect = new TimelineMax({paused:true}); $('body').on('mouseenter', 'div', function(){ hoverEffect.add( TweenMax.to($(this), 0.2, {top:"-=20px",ease:Quad.easeIn}) ); hoverEffect.play(); }).on.('mouseleave', 'div', function(){ hoverEffect.add( TweenMax.to($(this), 0.2, {top:"+=20px",ease:Quad.easeOut}) ); hoverEffect.play(); }); 'body' would be one of div's parents in this case also maybe some of the great minds here might have a better idea about having the TimelineMax() instance outside of your event handler
×
×
  • Create New...