Jonathan
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Jonathan
-
if you have a an example link I can test on some of my android devices, and see if I am seeing this behavior.. are you testing this on an actual android device? what mobile browsers are you testing on android? ill be glad to help test for you..
- 6 replies
-
- 1
-
-
- tweenmax
- timelinemax
- (and 4 more)
-
it depends how you have your site setup. - are your URL's only html (static pages) or php pages (dynamic pages) ? - was your site setup first so that without ajax or pushState, you could navigate to those pages, even without javascript? when Google crawls your page it doesn't run JavaScript, so if the links are pointing to an actual page, that already has that different page title, meta tag, and content.. than it will crawl that page just fine since its just a page. using ajax just intercepts the default action of the link and forces either the whole page or a fragment of that page to be loaded in without a page refresh. .. or unless your using hash tags to navigate from the url so really it depends if the pages are actual html pages on the server.. or if your dynamically creating the page with php. If your dynamically creating the page with php.. then you have do some extra work to detect if a link was clicked from a user which triggered the JavaScript ajax.. or if the link was followed through, from a web crawler like the google bot.. which would involve a check server side. Google bots don't crawl AJAX content, but Google proposed a scheme to crawl AJAX content. A good article from Google describing this practice using the hash (#) in your URL, is explained in this following link on Google developer docs : https://developers.google.com/webmasters/ajax-crawling/docs/learn-more?csw=1 Google recommends using the hash so its crawler knows its an Ajax URL. hope this helps..
-
hello .. I did notice in your code above.. your trying to set a css overflow property to 'none' .. 'none' is not a proper value for overflow. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow this is probably unrelated to your issue, but I thought it might help to use one of the accepted values: visible, hidden, scroll, auto also could you please provide an example or a codepen, jsfiddle example to better help you? thx
-
ok cool.. try adding a height value to line 513 in your stylesheet for .signIn rule. It is set to auto, and since your div is absolutely positioned, its best to always set a width and height since it is out of the document flow. Try like height: 130px; // you have this - line 513 .signIn { height: auto; } // try ading this - line 513 .signIn { height: 130px; } Also your head tag is missing the meta charset tag.. since i am seeing a html error thrown as well: The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. try adding the below tag right after the beginning head tag, <!DOCTYPE html> <html> <head> <!-- add this below beginning head tag --> <meta charset="utf-8"> <!-- add this below beginning head tag --> <title>Qi</title> <link rel="stylesheet" type="text/css" href="css/fonts.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> .... </body> </html> you can try to install Firebug extension for Firefox to help with debugging.. also when using Chromes inspector, and when you have the console tab selected .. make sure the bottom sub-tab is set to All i also noticed the close button 'x' doesnt work i hope this helps!
-
hello and welcome to the forums this seems like a css / javascript issue than a GSAP bug when i go to that page in Firefox and click the sign-in in the nav bar .. the console throws this error. TypeError: $target.offset(...) is undefined http://polypodhub.com/qi/js/jquery-1.10.2.min.js Line 5 you might want to check $target in your code and make sure its not undefined.. you could try to console.log() the position of the offset and see what it outputs.. also im seeing in the inline style of the sign-in and register div a display property without a value: <div class="signIn menuFont" style="display:;"> do you notice how the value is missing im actually unable to even see the background behavior due to the TypeError above and below, stopping the scripts TypeError: $target.offset(...) is undefined http://polypodhub.com/qi/masterpage.php Line 863 // issue is with this bit of code line 863 'scrollTop': $target.offset().top, chrome outputs the same error.. try outputting in the console to track down if its getting the offset() so you can see if you get the offset top and left $('a[href^="#"]').on('click', function (e) { e.preventDefault(); scrolling = true; var target = this.hash, $target = $(target); // output the values to the console to see what they are if(window.console) { console.log($target); console.log("offset top: " + $target.offset().top); console.log("offset left: " + $target.offset().left); } $('html, body').stop().animate({ 'scrollTop': $target.offset().top, // error line 'scrollLeft': $target.offset().left // error line }, 1500, 'easeOutExpo', function () { window.location.hash = target; scrolling = false; }); }); try that code and see what it outputs in the console.. and see if its not outputting undefined Chrome actually also outputs the same errors, but allows the sign-in box to slide down, but wont let you close the sign in box Chrome is also throwing this error for a script not being found GET http://polypodhub.com/qi/js/jquery-1.10.2.min.map 404 (Not Found) the file ends with .map and not .js
-
hello and welcome to the forums GSAP can handle transitions and animation, very well. whether its animating css or attributes or whatever.. As far as your link above, that type of page transitions, which are just basically animating to different div's positioned on the page. Regarding transitioning to urls.. this would be done using Ajax, to pull the content form that url into a div, and then transitioning that urls content in. or using HTML5's history.pushState: // this method takes (state object,page title, url) history.pushState({},"URL Page Title","URL-GOES-HERE"); but it depends if your browser supports it. http://caniuse.com/#search=pushstate Basically GSAP would handle the transitioning and animation, and either Ajax or HTML5's history.pushState would handle and bring in the page without having to reload a different url. Which you would then animate in and out as needed with GSAP. checkout these examples how GSAP handles animating: http://www.greensock.com/js/speed.html http://www.greensock.com/transitions/ http://www.greensock.com/jquery/ http://www.greensock.com/transitions/ http://www.greensock.com/css3/ http://www.greensock.com/get-started-js/ http://codepen.io/GreenSock
- 5 replies
-
- 2
-
-
- page links
- page transitions
- (and 2 more)
-
sorry i just figured it out and answered my own question: function test(){ console.log(this); // outputs $box element } var $box = $('#box'); TweenMax.delayedCall(2, test, null, $box); thanks
-
hello.. has anyone used the delayedCall() method with scope? I looked in the API but was seeing if anyone had an example they might want to share.. i was trying to pass an element to use for the scope of this in the function, but im probably missing something in how its implemented any help will be highly appreciated, thanks
-
this looks more like a browser bug and a css issue more than a GSAP issue. have you tried playing around with the css and adding z-index to the images parent div, and also maybe setting an initial transform property on your images, inside your css style sheet. img { transform: scale(1) rotate(0) translate3d(0,0,0); } also adding position:relative; to #page div you are currently using this viewport meta tag: <meta content="width=360, user-scalable=no" name="viewport"> have you tried testing with and without the above tag.. and/or using a different meta viewport tag with different content attribute values.. try removing it and see if you still have the issue to rule out any and everything maybe also setting an intial-scale. <meta name="viewport" content="initial-scale=1.0"> usually blurry images on android are caused by using css properties like position:fixed or z-index on certain elements with childs that have transforms.. see if any of that helps or if it is being caused by something else ..
-
hello and welcome to the forums.. I just tested your example on Samsung Galaxy S3 - Android version 4.1.2 - in stock browser and on mobile chrome, and did not see any blur.. it actually looks really sharp.. what is the phone and android version you are seeing this issue on?
-
Hello Jamie , the reason i advised having the window event in the DOM ready was so the DOM was ready before checking the window.load event. It could have been placed outside yes, but sometimes due to different browser inconsistencies, and other scripts loading in. Its perfectly acceptable for the window.load event to go inside the ready function to guarantee the window.load event fires after the DOM is ready, and not before.. since the jQuery ready function, in some instances, will sometimes fire before all images have been loaded. Also and like you said, the window.load event will fire immediately once the ready handler is run if all images have loaded. Sometimes you want to put all your code in one ready handler, instead of having them be separate.. So i understand your point Jamie, and thank you very much for pointing that out
-
hello, and welcome to the forums.. maybe your images are not fully loaded, even though the DOM is ready.. have you tried adding a window.load event? // check when DOM is ready $(document).ready(function(){ // check when all images, links and assets have been loaded $(window).on('load',function(){ // place code here console.log('window loaded'); }); console.log('DOM ready'); }); let us know if that helped when you test again?
-
what is the build and rom used on your HTC?
-
I tested on samsung galaxy s3 android 4.1.2 .. on stock browser, google chrome mobile, Firefox mobile, and dolphin, and did not see the behavior described.. The animations looked more smooth in the android stock browser, than in chrome.. I will do some other tests, but am not sure this is a GSAP issue but more of some time of browser bug or something else.. you mentioned that it worked on an htc cynaogen.. is the HTC you tested on, a non-rooted, stock rom?.. the reason I ask.. is because if your using a phone that is rooted and has a custom rom, it might have some bugs and not be a good test bed to get an accurate browser rendering.. if so you might want to do some more tests on a htc with stock rom, non rooted, and stock rom android 4.2.2 if the phone you tested on is stock rom and doesn't have a custom rom than I will try to test on a htc android 4.2.2 at work..
-
hello.. it would be nice if you provide a link so we can test and see if we see the same thing your are seeing to better help you! thx
-
also just a side note.. i noticed that your page does not declare a charset: <meta charset="utf-8"> that would go right below the first starting head tag.. because chrome was throwing this error: The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. also it looks like another error due to missing image: "NetworkError: 404 Not Found - http://bcdesignsit.com/clients/Images/dropShadow.png" this might be unrelated, but it might be good to correct those issues. you can find these same errors by using the code inspector in Chrome, or Firefox, as well as what Jamie had suggested about IE code inspector..
-
no worries.. what is the version of Chrome you are using? do you have the latest version of Chrome installed.. updates? what OS are you using? i tested on PC Windows 7 , latest Chrome Version 29.0.1547.76 m Im seeing the: '5 level program' animate.. '3 tracks to choose from' boxes animate 'to learn more' circle animates so im not sure why its not animating unless some else can see what your seeing.. or those elements i saw animating at the bottom are not the elements you mean?
-
hmmm.. as stated on page 1, i suggested it had to probably be something with :nth-child() since it is not supported in IE8.. http://forums.greensock.com/topic/8308-compatible-with-ie8/?view=findpost&p=32207 Plus that lone comma that jamiejefferson had pointed out to you. http://forums.greensock.com/topic/8308-compatible-with-ie8/?view=findpost&p=32269 for future reference... you can use this site to check browser compatibility: http://caniuse.com/#search=%3Anth-child http://caniuse.com/ also i believe IE8 would understand even when using GSAP or jQuery.. in your code // you were or are using this $(".stepInfographic .sf_colsIn.sf_2cols_1in_50 .sfContentBlock ul li:nth-child(5)"); // you could try this - the n is a formula that selects every 5th element $(".sf_colsIn.sf_2cols_1in_50 .sfContentBlock ul li:nth-child(5n)"); // or just use eq instead $(".sf_colsIn.sf_2cols_1in_50 .sfContentBlock ul li").eq(2); You could try using jQuery eq() method instead of :nth-child() Also just a side note.. if you can, you might want to reduce the length of your selector, so you dont have such a long selector rule when targeting elements.. an ID would be faster than a class.. http://jsperf.com/id-vs-class-selector-829892 But i am still curious since GSAP should be able to work with :nth-child() selectors, even though :nth-child() is not supported in IE8? so this is very weird! I do know that sometimes IE8, when using jQuery, has issues with :nth-child(n), but when you have the (NUMBERn) it tricks it into selecting every element of the number amount.. for example :nth-child(3n) .. this would work in IE8, maybe buggy in some builds. ... so that is weird too.. that is why IE8 is the bane of my existence As far as chrome issue...You might have to be more specific on what animation in chrome, since im not sure what animation at the bottom of the page your referring to? thx
-
hello.. welcome to the forums .. you would use something like this: var $box = $('div'), other = "hello!", tl = new TimelineMax({ paused:true, onCompleteParams: ["{self}", $box, other], onComplete: function(t,b,o){ console.log(t); // self = timeline instance console.log(; // box element to do stuff with console.log(o); // outputs "hello!" var myID = b.attr('id'); // gets id of b, which is $box } }); tl.add( TweenMax.to($box, 3, {css:{autoAlpha:1}}, "mylabel" ); tl.play(); if you go to the docs and scroll down, and review the special properties.. there you will find callbacks, like onComplete, onStart, etc .. you would use onCompleteParams, onStartParams, etc ... http://api.greensock.com/js/com/greensock/TimelineMax.html you pass your variables through the onCompleteParams which will make those variables available within the callback function. onComplete : Function - A function that should be called when the timeline has completed onCompleteParams : Array - An Array of parameters to pass the onComplete function. For example, new TimelineMax({onComplete:myFunction, onCompleteParams:["param1", "param2"]}); To self-reference the timeline instance itself in one of the parameters, use "{self}", like: onCompleteParams:["{self}", "param2"] passing a timeline instance to use the timeline.progress(): var $box = $('div'); tl = new TimelineMax({paused:true}); tl.add ( TweenMax.to($box, 3, { ease: Linear.easeNone, onUpdateParams: ["{self}",$box], onUpdate: function(t,{ var wp = t.progress(); // gets the current timeline progress on each update TweenMax.set(b,{scale:wp}); } }), "mylabel" ); tl.play(); hope this helps
-
Reset and and stop All Tweens (TweenMax and TimelineMax)
Jonathan replied to CrisCaducoy's topic in GSAP
Hey Carl.. when you use the exportRoot() method.. when using and exporting into another timeline, are the initial values reset to when the timeline was first created? thx -
No worries... here are some links to some good examples for learning GSAP.. http://www.greensock.com/jump-start-js/ http://www.greensock.com/get-started-js/ the docs which are a great tool for learning the api: http://api.greensock.com/js/ here is the GreenSock codepen examples for some cool code examples to learn from: http://codepen.io/GreenSock hope it helps
-
Reset and and stop All Tweens (TweenMax and TimelineMax)
Jonathan replied to CrisCaducoy's topic in GSAP
hello and welcome to the forums have you tried after using the kill methods to clearProps? ... go to the below link and scroll down to clearProps to read about it: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html also maybe something like this: var targetElement = document.getElementById("targetElement"); TweenMax.killAll(false,true,fasle); TweenMax.set(targetElement, {clearProps:"all"}); // or you can use "autoAlpha" as the value for clearProps -
$(b1).click(function(){ TweenLite.to(s1, 1, {zIndex:500, scale:1, left:"0px", top:"0px", force3d:true, ease:Power2.easeOut}); TweenLite.to(s2, 1, {zIndex:300, scale:0.82581, left:"-85px", top:"31px", force3d:true, ease:Power2.easeOut}); TweenLite.to(s3, 1, {zIndex:100, scale:0.72651, left:"-160px", top:"51px", force3d:true, ease:Power2.easeOut}); TweenLite.to(s4, 1, {zIndex:100, scale:0.72651, left:"280px", top:"51px", force3d:true, ease:Power2.easeOut}); TweenLite.to(s5, 1, {zIndex:300, scale:0.82581, left:"162px", top:"31px", force3d:true, ease:Power2.easeOut}); return false; }); i haven't tested the above but you can get the idea... Also adding the force3d:true so it forces GSAP to use 3d transforms - Matrix3d instead of just Matrix. But you will need to include the CSSplugin js or use TweenMax js which includes it. you could also take away the position:absoulte property and just move it to your stylesheet. you wouldnt need to tween that since it will always be absolute. Also have you looked into animating the x and y property instead of left and top.. which should make the animation flow better using transforms instead of positioning. You could maybe look into adding the z property when the slide is pushed back. You would have to play around with it to use x and y. I created your code into a jsfiddle, from your one above: http://jsfiddle.net/SjJLQ/14/ its using TweenMax instead of TweenLite.. so it includes the CSSplugin js so you can use force3d:true
-
Welcome to the forums, If you look at the below link you will find an example that the mighty Carl Schoof has made on how to use GSAP. http://codepen.io/GreenSock/pen/kqAfn You will see how that code is separated into JavaScript, CSS and HTML. And if you click the Share button you can download his example and look at the files locally on your computer, and see how the file are setup. http://codepen.io/GreenSock/share/zip/kqAfn And if you look at other examples on the GreenSock Codepen you will see more examples from the great Jack and Carl.. Also some learning examples on the site: http://www.greensock.com/learning/ You can use any code editor, like brackets, notepad++, or dreamweaver, etc... to write the code yourself. Or you could check out html5maker.com for a GUI drag and drop interface, but it is limited. I prefer to write it from scratch so you can have more control of what you create. I hope this helps.
-
i dont know this will help but in the MasterTrainer.js is using a window load event.. for IE8 its best to use : window.load = function(){ // code would go here }; I dont know if that would help .. but you could test if you still get that error with the above window.load.. Im not sure, but maybe IE8 is not firing the window load event properly since it does have issues with the jQuery window object $(window). I have had issues with IE8 not loading the assets right and them being ready to use Also you could add a DOM ready event handler around the window.load so your also checking when the DOM is ready $(document).ready(){ window.load = function(){ // code would go here }; }); Just a thought .. do some tests and see if using the window.load event and the DOM ready help in your tests in IE8.. this way you can see if that might be causing any issues..