Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Posts

  • Joined

  • Last visited

Everything posted by jh-thank-you

  1. Yeti Launch linke here: UPDATE the Google cached page still loads and the download link still works for the Mac version: This is the download link from the google cached page: http://dhbhdrzi4tiry.cloudfront.net/yetilaunch.dmg
  2. Blake, You are keeping late hours, just like me, thanks for the quick reply! I did try the babel route as outlined here: https://github.com/zurb/foundation-sites/wiki/Upgrading-to-Foundation-6.2 After I did that I started to received other errors... across all browsers... so I reverted back since iOS is the only problem without babel... maybe I did the update wrong (I will try again). I should mention the error only shows in Safari iOS, all other browsers come back clean... (my old android is another story....) I even have this working on an Windows 8 phone... I'm looking for the Yeti Launch Page now... will report back with a link (if not I could send you a dropbox link with the installer). While researching this I came across several posts that Zurb is getting ready to come out with v2 of Yeti with AngularJS 2 support... not sure why they would take the link down. UPDATE the Google cached page still loads and the download link still works for the Mac version: http://webcache.googleusercontent.com/search?q=cache:0WdQZa0pXScJ:foundation.zurb.com/develop/yeti-launch+&cd=1&hl=en&ct=clnk&gl=us Thanks again Blake, your help is much appreciated. PS I poster over at Zurb and Emailed the Developer that created that utility that is part of Foundation's core.
  3. GSAP Community, Thanks for taking the time to view this post and for any help you may provide. I know this is not a specifically a GSAP issue but I'm hoping that someone else may have experienced this problem and found a solution. I have spent the better part of two days trying all kinds of potential fixes. I have tried setting Autoprefixer to work with iOS >= 7, trying different versions of Jquery with different versions of Zurb... the issue arises when you update to Foundation v6.2.x and above. I have tried several version of Jquery v 2.1.4 and above in conjunction with Foundation. Here is the breakdown: Yeti Compiled Version with Issues: Note I'm hiding certain elements with CSS, then using GSAP to show them/set their initial position rotation etc. This helped to keep things form popping on screen and then popping again into their initial positions... it gives GSAP time to load then display everything (this note is more for other newbies like me - Thanks to Blake and Dipscom for showing me this!). This website has been compiled/bundled with Zurb's Yeti Launch (ISSUE GSAP - display properties not being applied): http://herous.org/dev-zurb-yeti/ Screenshot of the website on iOS simulator (shows GSAP display properties not being applied): http://herous.org/dev-zurb-yeti/assets/img/zurb-yeti-complied-ios-sim.png Image of the error code in Safari dev tools (it's part of the SASS complied distribution of Foundation): http://herous.org/dev-zurb-yeti/assets/img/ios-unepected-token.png I'm not sure is this error is what is causing the issue with the images (an older version of Foundation that still has this media query function works without issue). image of gulp file settings: http://herous.org/dev-zurb-yeti/assets/img/foundation-gulp-file-processing-order.png Image of Autoprefixer processing order: http://herous.org/dev-zurb-yeti/assets/img/updated-autoprefixer-default-settings.png Working (non-Yeti complied) version: This website has not been compiled with Yeti Launch - it is the simple CSS download everything option (has no issues that I know of): http://herous.org/dev-zurb/ Image of the nav elements properly showing in the corners: http://herous.org/dev-zurb/assets/img/zurb-NOT-yeti-complied-ios-sim.png Codepen that is working (stripped down non-Yeti Launch compiled only TweenMax, foundation, and jquery are loaded ): http://codepen.io/jh-thank-you/pen/gLwJPY I'm trying to use the latest and greatest of everything as well as take advantage of the way Yeti is setup to process/optimize the files for production (uglify, Autoprefixer, image optimization etc. - all handled through bower and gulp). Oh, I also set the gulp file to processes TweenMax before Jquery so it goes TweenMax /Jquery/Foundation (and support files)/custom Javascript. (For other Newbies) Note: I have a Yeti complied version of Foundation (v6.0.3) with jquery v2.1.4 and TweenMax v 1.19.0 working. Zurb has done a bunch of bug fixes etc. since v6.0.3 - also you can use the non SASS/Yeti compiled version (the CSS download) with the latest and greatest... hope that helps someone else out. I will reach out to the Zurb community as well as the developer of the plugin that is throwing the error - any finding I will cross post to help out others. Thanks again.
  4. http://herous.org/dev/index.html I added a small screen menu animation that kicks in at certain/screen sizes. // Determine which Landing Page Starts ========================= var launchLandingPage = window.matchMedia("(max-width: 500px), (max-height: 200px) and (max-width: 600px)"); if (launchLandingPage.matches) { // Launch smallLandingPage tlSmallLandingPage.play(); } else { // Launch mediumUpLandingPage tlSmallLandingPage.reverse(); } Working on the dynamically loaded page/section content next. Will keep you guys updated. Thanks again for all your help!!!!!
  5. Blake / Dipscom, I have things working but in a very long (not DRY) way. Dipscom my final version is a of a hybrid between your and Blake's approach (I used your array math for the paths and centering and Blake's timeline creation function and my media queries to determine scale/size). I have to read/learn more to get my head wrapped around the DRY approach. I understand the concept but what I'm in the process of learning is the javascript/jquery language itself. I can see how the information is being passed but what I need to learn are what are the options to work with... so much to learn... definitely in the infant stages of understanding it. I will clean things up and use placeholders images for a final codepen (this to help others who may be looking for this information). I will post that up in a few days. I will also update you guys on the next phase/stage. Thanks again gents, I hope you both are having a great weekend.
  6. Dipscom, Thank you very much for the effort you put it into this. Also, as Cyborg-Blake has done, thanks for being so generous with your patience and knowledge. I would gladly use either your or Blake's solution (far less code than I have used) but I was/am struggling to find a solution with the scale/alignment issue. It happens whether you scale it up or down. The animated Gif shows the issue in action back in post #29. Your latest codepen is having the same issue but now in reverse. See a Gif showing the issue in action here http://herous.org/gsap/2016-11-05-dipsom-codepen-2.gif (sorry for the link GSAP says I only 35kb left of attachments. I think there is a 500kb limit per thread). Also, it does not hold it's large scale size on window resize (it reverts to the initial scale) see here http://herous.org/gsap/2016-11-05-dipsom-codepen-3.gif Near as I can tell it's how GSAP stores the initial values for the start and end of a tween that causes the issue. I don't know how to force GSAP to update its current set of values before invoking a reverse play. This is a similar to an issue I read about in another GSAP forum thread. The only solution was to save the current state values, kill the tween then invoke a new tween. http://greensock.com/forums/topic/9670-tweenmax-updateto/. I tried this method but when I killed the tween none of the button events would work. I just discovered I now have the initial values issue happening on window resize with the reverse play for the other nav elements. Here is the scenario: - Click corner nav, it scales up to center stage. - Click center stage hero, it will scale back to the corner. - Select a different corner nav it scales to center stage... all works as expected. Vs. - Click corner nav, it scales up to center stage. - resize the window. - Click center stage hero, it will scale back to the corner. - Select a different corner nav - Now - the first selected corner nav will pop to center at initial scale and tween to the corner (and other wackiness). See animated gif here: http://herous.org/gsap/show-tween-return-position-issue.gif Website here: http://herous.org/dev/index.htm I'm guessing this is caused by the initial values being stored for each tween/timeline (I'm seeing in your code you made the //Flush tween - tween = null onComplete) i will give that a try and report back. If it that doesn't work I will make a simplified codepen and post it up. Update: solved this issue by calling the resize() function onReverseComplete (this flushes all the stored initial values) - all is well... off to try and solve the insertAdjacentHTML/dynamic loading of the section content. Thanks again. All the best.
  7. Blake, Thanks again for the new codepen. Yes, I saw how you and Dipscom were using the resize function and how your put your vars within it to have them update on resize. That part worked great, the scaling issue I was having is with the tweens/timelines that store both the starting and ending values. The array approach that you both used is great, but when GSAP grabs both values and stores them (then you resize the window) no matter what I did, the value that GSAP stored prior to resize is what it would use. I tried using an onComplete and a clearProps: "width, height" in hopes that it would help. I even tried an updateTo but nothing I did would work. The link I provide this morning has all the resize issues sorted. The code is nowhere near as clean and graceful as your and Dipscom's methods. Thanks. I'll keep you posted on my progress...
  8. Blake, Thank you for checking back in... I really appreciate the help... the wife is about ready to trade me in... I just worked through the night on this... I have things working but not in a DRY way. You and Dipscom came up with such short and sweet code to make things happen! I'm not there yet with my understanding of javascript to make that happen... when you know next to nothing it takes a looooonnnnng time to get up to speed as I'm learning even what the correct questions are to ask/search for. Sorry, I don't have a simplified Codepen... I have to get some sleep. Here is a link to a dev folder I threw up on the server http://herous.org/dev/index.html I'm having one issue. I'm trying to get the Hero animation to tween/fade out on the return/reverse. It works fine if you just load the page and don't resize the window... all of the corner nav hero animations fade in and fade out on forward/reverse. If you resize the window it doesn't work. Near as I can tell it has to do with the insertAdjacentHTML technique I'm using to load the Gifs. I'm seeing in the DOM that the insertAdjacentHTML is firing off multiple instances on resize. Since the initial is set to an opacity of 1 the element never has a chance to fade out. I tried: http://stackoverflow.com/questions/15291229/kill-function-after-click-event-javascript http://stackoverflow.com/questions/20719491/jquery-stop-event-after-running-once http://api.jquery.com/one/ I have to read more about Angular JS that you suggested etc. I think insertAdjacentHTML is going to limit what I can do (or make it more difficult than it should be). Would you suggest that I have all the GreenSock Javascript in one shot for all page sections or is it better to create modules and load only the custom js that is being used for the page/section selected? Should I convert the animate Gifs to animated sprite sheets? I'm thinking the sprite sheets would allow for more control I was looking at this https://www.codeandweb.com/sprite-sheet-maker?_cawex=2 Thanks again for the advice/help/guidance! I hope you have a great weekend!!
  9. As a test I forked Dipscom's original codepen - justing adding the media queries to his CSS. The scaling issue remains... Not sure how to have GreenSock to animate the hero nav element back to the corner at the new Media Query size (so it matches the scale of the other corner Nav elements). If you refresh the browser at the current window size the nav elements will all be reset at the correct size. Here is the codepen link http://codepen.io/jh-thank-you/pen/dpEYJd Recap for those jumping in at this point. To solve this I have tried: "tick" listeners etc. with functions for capturing and updating the window dimensions and setting the element size. Setting the CSS scale via GreenSock. Setting the CSS scale via CSS media Queries in the CSS document itself. Having a class added to the element onComplete. This works but there is a jarring pop as it's calculated/adjusted to the CSS, media query assigned, size. (I'm trying to get my head wrapped around the clear methods... maybe this is the key to the problem?). Here is an animated Gif showing the issue. Thanks for reading.
  10. Dipscom/Blake, I hope your week is going well. Here is a new codepen https://codepen.io/jh-thank-you/pen/zKXJLm I moved most of the media queries to the CSS (I also removed all queries and set the Hero Element scale to Dipscom's initial "65vw" - it made no difference). I sorted the placeholders for the animated Gifs and the Hover State for the Gifs (everything aligns, scales and centers together). The scaling issue remains. The initial hero image scale is correct but if you resize the window while the hero image is large, and centered and then click on it to trigger the reverse animation, it does not scale properly. It will either be too large or too small, dependent on if you resized the window up or down. The Hero nav element will scale back to the corner but the size will match the scale prior to the window resize. See the attached image. Thanks in advance for any help you may provide.
  11. Community, I hope everyone had a great weekend. I have a new codepen with some things sorted, here is the link http://codepen.io/jh-thank-you/pen/WGmRNZ Media queries for corner nav images scale based on screen size (uses whichever distance is smaller when comparing vw vs. vh) Hero image scales to whichever distance is smaller when comparing vw vs. vh. Added input field to show media queries are passing the right info to the CSS via a Javascript function and variable. ISSUES: The initial hero image scale is correct but on window resize the image does not scale properly - if the CSS is set directly in CSS it works, if the property is passed in by Javascript it does not work. Tried to force vw or vh based on adding a class to the image onComplete - the CSS gets set to the added class but the image still does not scale properly. Tried using a "tick" listener, like Blake had in one of his pens, to try and force a recalculation of the scale values (did not work). Another issue, if you click on the nav image and have it scale up, then change the window size, when the animation plays in reverse it does not go back to its original scale/size; OR, if you change the window size before clicking a nav image it will not scale to the proper size. ONLY when you initially load the page (and not make any window size changes) does everything scale animate/scale up and reverse animate to proper position and original scale/size as expected. I'm not sure where to go from here. I'm not getting any errors in the console but my logic must be wrong or I am missing how to make sure the the proper calculations are re-calculated on window resize. Is there a way to have have data recalculated without a screen redraw/refresh? I have an on resize window function working (as seen by the input field being passed the proper calculations on resize) but again, it doesn't have the image resize properly... If I refresh the window the proper calculations are made and applied. Thanks for reading and helping.
  12. Dipscom and Blake, I will try using the media queries in the CSS instead of in the Javascript. I will also add in Blake's update (didn't catch that in the last codepen). Once I get a few more things worked out I will post a new codepen. I will be out of the loop until early next week. I have a big project that just landed in my lap and I have a couple of heavy deadlines for Monday and Tuesday. It's a good thing to be busy with work but something has to give. Enjoy you week/weekend. All the best, Jim P.S. Is there a way to add a photo or video to a post? It seems that I need the file to be uploaded already to attach them, but I'm not seeing how I can upload the files to my account in the dashboard. Thanks.
  13. Dipscom, I came across a forum post that was talking about how GreenSock doesn't know what CSS is doing (not passing along the info/coordinates)... there was a discussion about having GreenSock set things this way it knows where everything is and can animate accordingly. Not having the images show properly in the last codepen was bothering me so I forked it and moved the images back into the divs via the html page rather than CSS background image. Using the CSS centering technique did the trick I had to update the CSS targeting the Nav image... /* ****************************************************** */ /* ****** Nav Maintain Image Aspect Ratio on Scale ****** */ /* ****************************************************** */ .media-type > img { max-width:100%; width:100%; height:auto; } #centerImg { position: absolute; max-width:100%; width:100%; height:auto; top: 50%; left: 50%; transform: translate(-50%, -50%); } For centering - other newbies look at https://www.w3.org/Style/Examples/007/center.en.html#hv3 and http://stackoverflow.com/questions/4888223/align-image-in-center-and-middle-within-div I just need to: sort the titles and get them to move in relation to their respective background image. I'm hoping this part can all be done in CSS (I will more than likely create a set of title images that are the same size the respective background image so I can get the alignment nailed down). Figure out how to get the media queries to recalculate/redraw the scale... from the input field I can see the variable is changing but GreenSock is not recalculating the size, it seems to be storing the initial calculation. Any idea what is going on? Do I need to set these with GreenSock/Javascript or should I use CSS for maintaining the scale based on screen size. What is the proper/preferred way? Getting closer... will report back soon. Thanks again!!!! Here is the current codepen link http://codepen.io/jh-thank-you/pen/dpQvjV
  14. Blake and Dipscom, Here is a new code pen: http://codepen.io/jh-thank-you/pen/GjYPPY It's a bit messy (...cough). I did spend a lot of time learning how to write the logic (I'm guessing at what I should call it) for the variable that is getting sent to the tween. I was able to sort the scale issue with this but I am stilling have issues with the media queries kicking in (I'm seeing that the number is being calculated on screen resize - I made a little data input field so you can see it in action). // Determine which is greater vw or vh var space = function() { if(vw < vh) { space = "vw";} else {space = "vh"}; }; space(); // several media queries to determine the percentage of the scale var mediaQuerySmall = window.matchMedia("(max-height: 200px)"); if (mediaQuerySmall.matches) { configScale = 20 }; // see codepen for full query list // Create a variable that will be passed to the CSS in the tween // It will also be passed to the DOM via an input field var configSize = configScale + space; var txt = document.getElementById("t1"); txt.value = '"' + configScale + space + '"'; (I had a tired smile on my face at 4 in the morning when this code actually worked!) Update: Spoke too soon, it works with the initial call but if I start off with a full desktop screen and try to reduce the window size it does not scale down. Not sure what the issue is... sometimes it works great, sometimes the hero image does not scale down or up on window resize. Sorry for the mess - I have images (animated gifs that load via a delay) - they overlay the base nav image in each corner. Right now they are a different size than the base images - I'm scaling them at a different size - I'm trying to maintain readability at smaller sizes but also keep them from getting too big in relation to the hero element on the larger window size. I'm guessing I could create 3 sets of images that are built the same size as the base image - it would make it easier to align and scale with the base image but it adds to page load and the amount of DOM calls. For the nav base images, It looks like I will need to set the padding and margins via media queries, but before I started doing that I wanted to share where I am at. You guys will certainly know of a cleaner more succinct way of approaching this. Dipscom's solution sets scale to 80vw and 80vh and width... I changed the width to a variable and passed that to the CSS in the tween... var configSizeLarge = configScale + 25 + space; and used this code to maintian the aspect ration within the div. Update: I'm going to change this... I will create a variable that will pass in a different value for each media query... 90vw on small, 65vw on medium, and 50vw on large. /* ****************************************************** */ /* ****** Nav Maintain Image Aspect Ratio on Scale ****** */ /* ****************************************************** */ .media-type > img { max-width:100%; width:100%; height:auto; } I'm not sure how to set the aspect ratio in Javascript so I went with what I know. Thanks for taking the time to read through all this. I hope I edged things along, I know it's not as elegant as your solutions but I'm learning.
  15. Gents, I hope all is well. Thank you for the updates. I'm learning a lot thanks to the both of you but I have to admit I'm in way over my head. I burned the midnight oil last night trying to get my head wrapped around this. I'm creating a codepen now... I'm working with Zurb's Yeti Launch... I have to sort the page partials and redo all the links... I will post something within the hour. Dipscom, your solution works great for the animation and setting the scaled up image size based on vw... Blake your version works great for maintaining aspect ratio of the images and it was easier for me to break out where I needed to make changes to load in my own custom images/sizes. Dipscom, I tried to make a variable that gets passed to the CSS based on media queries.... I have that part working... now I'm trying to figure out how to pass that to the CSS in the tween and still maintain the aspect ratio of the image to be scaled up or down. Found these - they may help with aspect ratio: https://blog.gannon.tv/2013/12/06/scale-edge-animate-stage-using-greensock/ http://sarahjustine.com/2013/04/08/create-scale-to-fit-projects-with-adobe-edge-animate/ also testing out this method for aspect ratio: http://greensock.com/forums/topic/11496-using-draggable-%E2%80%93-need-resizable-to-keep-aspect-aspect-ratio/ ...and yet another: http://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio ...will post a codepen link soon. Thanks!
  16. Blake, I'm missing something in your SVG example. I understand that the JS is appending the body element with mySvg, but how/where is it getting it from? I'm not seeing any external links listed in the codepen source to the SVG code. How is the var "hidden" and called up/appended? Ahh... missed this in the head "<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/svg-string.js"></script>" Thank you again for all your time and patience.
  17. Blake and Dipscom, Thank you, sorry for the delayed response. I will definitely look at the links and examples you provided. I'm in the process of of trying to pick apart Blake's last codepen... I have so much to learn... I'm in the early infant stages of understanding Javascript and at this point I feel like I have jumped into the deep end... anyways... Thank you gents, I will post back my findings. I REALLY appreciate the help!
  18. Thanks Blake, looking over and reading your links now... I will report back later. As for what I'm trying to build, it's a portfolio site for myself. I'm not sure if I would consider it a SAP at this point (maybe I should). Update: The SAP link you provided is an interesting read. My approach does seem to lean towards SAP. I was reading about techniques to deliver content on request vs on page load (unless needed). I'm trying to keep the pages light and hopefully have them load fairly fast. I was thinking AJAX or techniques like it would be a good solution. This seems like a practical approach for the way the way I thinking about structuring the site. Nav/Landing Page Print • Grid/thumbnail examples - selected example (full screen modal approach) Video/Broadcast • Grid/thumbnail examples - selected example (full screen modal approach) Outdoor • Grid/thumbnail examples - selected example (full screen modal approach) Online • Grid/thumbnail examples - selected example (full screen modal approach)
  19. Blake, No apologies necessary, you are being very gracious with you time and expertise. After spending time on the forum reading through the various posts it is clear that the GSAP team cares about the community and really goes above and beyond. That said, I joined the club and consider it money well spent to support such a great product/team. Thank you! In this codepen http://codepen.io/jh-thank-you/pen/ozrLOo I broke each timeline into its own function. I was able figure out how you were able to make the hero (center stage) element scale on window resize.I am trying a different method (vs your 200px) to calculate the space around a hero Nav element so that it scales to 65% of window width or window height. It works great on the initial scale but on window resize it is not adhering to 65%​. Is it possible to set a the CSS property of 65vw or 65vh onComplete? var x = -vw / 2; var y = -vh / 2; // var space = 200; var space = Math.min(vw * .35, vh * .35); var ratio = 1; The current problem I'm having is when you resize the window the other nav elements that animated off screen pop back into frame (not desired) To try and remedy this I have the non-selected Nav elements to animate offscreen and finally set the display to "none". So now even though they pop back into the corners no one can see them. I removed the reverse call on the hero element. I need to learn how to clear the initial function and set a new play on click which would play a new timeline that creates a new path back to each respective corner. I'm reading about onComplete, I think this may be the answer I need. My next step is to create a set of new timelines and tweens to create the reverse paths. I'm thinking this would force a new set of calculations for the path points (maybe I'm wrong with this thinking... not sure at this point). My last step will be to load an animated gif on top of the hero Nav element along with the respective section items (again I'm thinking onComplete applies here). By the way the responsive 3up and 2up grid examples you provided links to will work well for these section pages. Thanks!I'm thinking I should dynamically load the section content (either via Foundations's AJAX method as outlined in part 1 here http://zurb.com/university/lessons/ajaxing-dynamic-content-with-foundation and part 2 here http://zurb.com/university/lessons/dynamically-update-your-web-pages or to use ViaJs, talked about here http://stackoverflow.com/questions/17636528/how-do-i-load-an-html-page-in-a-div-using-javascript and on GitHub https://github.com/abdi0987/ViaJS The Foundation method is simpler and lighter but the ViaJs provides for native browser back button operation etc. Have you used either of these methods? Any preferences? Am I overthinking page weight and DOM calls? Finally, I have been keeping detailed notes on the process and providing links to other forum articles in hopes of helping out any other newbies like myself that may come across this thread... not sure if this is a desired practice. Thanks again for your help.
  20. Having issues when using jquery 2.1.4 and above (Zurb Foundation needs 2.1.4). Here is a codepen using v2.1.3 http://codepen.io/jh-thank-you/pen/ozrLOo This has corner nav using GSAP and jquery v2.1.3 - After a nav element is selected it will scale up and center in the window - If you resize the window the selected Nav element (now larger and centered in the window) will scale down with the window. - Need to work with Zurb Foundation v6.x which requires jquery v2.1.4 which is causing an issue - instead of the hero Nav element staying centered on window resize it pops to the corner where it originally started. See codepen link using jquery v2.1.4 Here is a codepen using v2.1.4 http://codepen.io/jh-thank-you/pen/QKVjJo Update: seems to be an issue with Zurb Foundation 6.x - a conflict... not sure where - there are no errors in the console.
  21. Okay, a little bit of sleep and hopefully some fresh thinking... Although not what I wanted: the reverse animations from what I can tell are being fired properly and the x and y placement/path calculations are correct... the thing is if I resize the window this change is not being adjusted for in the way the math is being calculated for x and y... it's basically using the stored value/amount from the previous finished state... which is why if I let things animate back to the corners before a window resize everything works as desired. All that said, my thinking is: instead of using the .reversed for .click I should just use a .from timeline/tween from the current position on each element to the corners of the browser window. I'm now reading the forums about how to ad a new click events to each element...this approach would require me adding four (4) more functions with a timeline that has 4 tweens for each Nav corner element in that function I will need to have a way to calculate the corner valuesor can I simply set this with something like "top: 0, left: 0," or use xPercent and yPercent as found here http://greensock.com/forums/topic/10106-xpercent-ypercent/ can I use xPercent and yPercent in a bezier path - can I use a mix of point types on the path, meaning can one point be a numeric value or variable or xPercent and yPercent? see https://greensock.com/docs/#/HTML5/GSAP/Plugins/BezierPlugin/ - Short answer - Yes."While it is most common to use x and y (or left and top) properties for Bezier tweens, you can use any properties (even ones that are function-based getters/setters)." am I right with this approach, or is there a cleaner way to accomplish this - (some kind of method to calculate the new corner coordinates)? Thanks for looking (even more for helping).
  22. Community, Okay... here is another codepen - http://codepen.io/jh-thank-you/pen/ozrLOo I have broken out each timeline into its own function based on which corner Nav element you select a different timeline will play. I have a progress() and reversed() added to each function with a var assigned for each. This seems to sort the issue of all the elements popping back to the corners (going back to the beginning of the timeline) on window resize. Where I am running into trouble is if I select a Nav corner and have it animate to center stage (then perform a window resize) I get the other nav elements (which animated off stage) popping back into the corners. Also, if I click on the center Nav element, to play the animation in reverse, the nav elements do not go back to the corners (or scale properly). So I solved one issue but created another set of issues. Note: if I click on the center stage Nav element and let it play in reverse to the corner and then resize the window the other corner Nav elements behave as expected. I haven't tried to sort the scale/size of the selected Nav element (based on a percentage of the browser window size yet - will try to set something like "65vw"). I'm trying to sort one thing at a time. UPDATE - Blake used "space = 200" for his calculation for the image size to be scaled up to... I'm trying to set scale based on a percentage vs a fixed pixel amount. The code below works to scale the image up to 65 percent of the initial window width or height but it doesn't recalculate properly when you resize the window. This seems to be the same issue, I guess, as the corner Nav elements with the initial value being referenced vs having a new number generated/referenced on window resize. (I'm trying to learn/understand kill vs clear etc. from the docs http://greensock.com/forums/topic/8917-all-the-methods-to-kill-a-tween/) var vw = $(window).width(); var vh = $(window).height(); var space = Math.min(vw * .35, vh * .35); // var space = 200; Thanks in advance for any help you may provide. PS - I'm thinking this GreeSock post may have the answer http://greensock.com/forums/topic/11188-how-to-update-tween-variable-on-window-resize/ also looking at http://greensock.com/forums/topic/9066-update-var-when-window-is-resized/
  23. Blake/Community, I have made some progress thanks to Blake's codepen and forum links (Thank you again Blake). Here is the codepen: http://codepen.io/jh-thank-you/pen/OREYEj I have three things I am trying to sort: 1 - Keep Animation/Placed Object where it is currently on window resize Blake's codepen had the ability to resize the window and the current animation or positioned elements remain at there current place/state (and scaled nicely/responsive). From what I can tell it is done through this bit of code: var progress = tl.progress(); var reversed = tl.reversed(); tl.seek(0).clear(); buildTimeline(progress, reversed); I'm thinking I need to nest - .add() - the timelines to be able to use Blake's approach. I tried to follow this thread ( http://greensock.com/forums/topic/8516-multiple-timelines-or-nested-timeline/) but I didn't have much success due to my lack of understanding how the function is being called (I have so much to learn).I can share code for this but I don't think it is anywhere near what it should be - so I stripped it out of the codepen. 2 - I'm trying to set media queries to adjust the scale and placement or the corner navigation elements - I am conditionally setting this through the queriesI am trying to keep the Nav elements in each corner at a readable size. I am applying scale to the element based on Blake's solution of scaling the object in the timeline. var mediaQuerySmall = window.matchMedia("(max-height: 200px)"); if (mediaQuerySmall.matches) { configScale = .22 }; TweenLite.set(print, { xPercent: -50, yPercent: -50, rotation: 15, scale: configScale }); http://greensock.com/forums/topic/11172-using-media-queries-in-tweenmax/ I'm having issues with the media queries being applied - sometimes the scale/size gets calculated properly sometimes it doesn't - sometimes a window refresh will force the calculations sometimes it will not (I tried looking at this thread - Sorry can't find my link/bookmark will update later ). I tried setting the queries both in CSS or in the Javascript (I remember another thread saying something about GSAP will not know when CSS changes something so it is better to have GSAP set things instead). I also tried setting a function for on load and resize based on this stackoverflow topic - http://stackoverflow.com/questions/1974788/combine-onload-and-onresize-jqueryNote: I commented this out in the javascript file - this way someone can see what I did wrong. 3 - After a corner Nav element is selected I want it to scale up to a size based on a percentage of the browser window width. I tried changing scale in the timeline to - width: "65vw" but this had no effect. Thank you in advance for any help you may provide.
  24. Blake, This is awesome surprise... I just got back in from teaching class and prepping for work tomorrow... I was going to call it quits for tonight as I have to get up early for work tomorrow. I 'm glad I decided to check the forum. This is perfect!!!! I will be sure to share the final product with you and the rest of the GreenSock Community/Team. It has been a slow process for me as I have so much to learn. From a design standpoint I know what I want to accomplish, it is a whole other story trying to sort the code to make it happen. Again, thank you! Have a great weekend.
  25. OSUblake, Thanks for the response, I will look over the links and report back. ....went down the rabbit hole with the first link... just saw your codepen (second link)... THANK YOU! Going through your code now and trying to figure out how to keep the image fixed to the corner on window resize like it was before... You have the centering spot on, it looks great!!!