Jump to content
Search Community

jh-thank-you

Plus

  • Posts

    102

  • Joined

  • Last visited

 Content Type 

Everything posted by jh-thank-you

1
2
3
...
5
Page 1 of 5  
  1. jh-thank-you
    This has been a very long time coming. I added swipe (touch events to this slideshow) it is based on the google dev's article: https://developers.google.com/web/fundamentals/design-and-ux/input/touch/ Note the code needs to be cleaned up and there are a few things I would need to do to make it DRY. For the sake of helping others here is the codepen: https://codepen.io/jh-thank-you/pen/arevVB?editors=0110
  2. jh-thank-you
    another more recent article/how-to: https://developers.google.com/web/fundamentals/design-and-ux/input/touch/ https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/input/touch/touch-demo-1.html
  3. jh-thank-you
    are you looking to add gesture trigger events (swipe etc)? a little google-fu... A bit old: https://css-tricks.com/the-javascript-behind-touch-friendly-sliders/ A bit newer: https://blog.madewithenvy.com/build-your-own-touch-slider-with-hammerjs-af99665d2869 if you are using jquery: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin Please note I did not spend a lot of time researching this... just a quick search to get you going in the right direction... hammer js and toushswipe both seem to have only minor info or doc updates in their commits... not sure if that is a tip that development has stalled or not, something to think about. I hope the links help.
  4. jh-thank-you
    I hope it helps others... I was trying to keep a fairly resolute sprite but hit this limitation... now rethinking my approach. Learning how to tie/sync together multiple sheets. I was trying to take advantage of image caching and go the sprite route vs. using an animated gif (I don't want to force a new download just to get the animation to play). https://circlecube.com/says/2010/12/cache-woes-how-to-force-an-image-to-refresh-or-load-fresh/ In case someone stumbles on this and really wants to force and image to re-download here you go: document.getElementById("image-id").style.backgroundImage = "url(/assets/img/image-id.gif?"+new Date().getTime()+")"; Thanks for commenting and liking.
  5. jh-thank-you
    Thought I would share this. Note the sheet size limitations. https://github.com/mattdesl/lwjgl-basics/wiki/LibGDX-Textures
  6. jh-thank-you
    Here is an updated Vue-GSAP - slideshow pen, it features: GSAP for the main transition. CSS Vue Transition classes for the Previous and Next Buttons. When you reach the end or the beginning of the show the the Previous or Next Button will fade out. You can also use the Left and Right arrow keys to cycle through the slides.
  7. jh-thank-you
    Below is a codepen of a basic Vue <transition-group> example: You could easily use Vue's JS hooks to animate the transitions instead of Vue's transition classes... this is where you would tap GSAP to take over: In your HTML/Vue Template within the <transition> element: // use v-bind:css="false" to tell Vue to ignore CSS trabsition classes and use JS hooks instead <transition v-on:enter="enter" v-on:after-enter="afterEnter" v-on:leave="leave" v-bind:css="false" > <component v-bind:is="currentSelect" class="current-slide"></component> </transition> in your JS/.vue component connect GSAP through Vue's JS hooks (functions/methods): methods: { enter(el, done) { const tl = new TimelineMax({ onComplete: done }) tl.set(el, { x: window.innerWidth * 1.5, scale: 0.8, transformOrigin: '50% 50%' }) tl.to(el, 0.5, { x: 0, ease: Power4.easeOut }); tl.to(el, 1, { scale: 1, ease: Power4.easeOut }); }, leave(el, done) { TweenMax.fromTo(el, 1, { autoAlpha: 1 }, { autoAlpha: 0, ease: Power4.easeOut, onComplete: done }); } }, // END methods
  8. jh-thank-you
    Just built my own version of a basic Vue Js with GSAP slideshow, see pen below. I am looking to add swipe and arrow key events to this in a Vue/state management way... I'm still getting my head wrapped around having data do the driving... If someone can point me towards a good example of how to bind these types of events the data/Vue way it would be much appreciated. I hope my pen and other links/info will help others. Inspired thinking by: Of course the GSAP Team! Tim Rijkse's example - see codepen link in the last post. Vue's doc https://vuejs.org/v2/guide/transitions.html#Transitioning-Between-Components. Christopher Wilson's Vue.js v2 Multi Option Toggle codepen:
  9. jh-thank-you
    Here is the updated Slideshow using GSAP
  10. jh-thank-you
    Jstafford, No worries, I've been busy myself. I hope your project is going well. I have a branch where basic Vue transitions with Vue CSS <transition> and <transition-group> classes have been added. https://github.com/jh-thank-you/webpack-w-gsap/tree/adding-animations I'm working on the slideshow conversion today (hopefully I will finish it today as well). I will share it when I'm done. Here is a good link Blake shared with me, it talks about Vue's CSS transition classes and Vue's Javascript hooks (which is where you can tap into/incorporate gsap): https://css-tricks.com/intro-to-vue-5-animations/ I know the examples below do not contain ScrollMagic but it will show you where you can connect ScrollMagic/GSAP in your Vue project (I hope they help you): Here is a basic pen I put together using Vue's CSS <transition-group>: Side Note: this is what I like about taking the time to share things with others... you never know how it comes back to you... by looking at the pen again I caught a mistake... I missed centering the nth-last-child(1) with {margin: 0;}... fixed it for the pen as well as my own site.. This is a nice simple, slideshow, example using Vue's JS hooks with GSAP: Not quite what I need for my own site but maybe it will help you.
  11. jh-thank-you
    Wanted to share this Vue JS Slideshow that was created by Tim Rijkse (Thanks Tim for sharing... you saved me hours of work... now If I could just fix this Chrome blur bug all would be right in the world ).
  12. jh-thank-you
    Basic transitions and animations added. Todo: Build gsap/vue slideshow. Add gsap animation for nav-buttons Add gsap animation for slideshow modal-button to slideshow transition. Replace some (maybe all CSS transitions) with Vue javascript hooks with gsap. Create a video player and or YouTube/Vimeo embed. Final phase: Upload all artwork / graphics / videos to new site! COMING SOON (hopefully). Here is the repo link:*https://github.com/jh-thank-you/webpack-w-gsap here is a live dev site:* http://hainis.net/dev/vue/ *Note: only Print/Advil, Print/Bayer, Print/Amex have modal content to load.
  13. jh-thank-you
    I finally have the Vue app at a point where I am starting to add transitions and animations: I am picking apart the CSS-Tricks Vue Series to see how they are triggering the GSAP animations. I am also wondering/thinking about rebuilding the jQuery version of the slideshow in a more Vue-like way. This is a deeper dive for me as I'm getting decent at being a parts changer (swapping out bits of code) but I have to be honest I have a lot to learn as far as javascript basics go. Here is the repo link: https://github.com/jh-thank-you/webpack-w-gsap Note: only Print/Advil, Print/Bayer, Print/Amex have modal content to load. All the best, Jim
  14. jh-thank-you
    SOLVED - Chrome bug when using mix-blend-mode: multiply; https://bugs.chromium.org/p/chromium/issues/detail?id=503638 Latest Chrome release breaks things... visibility issues with <modal-slideshow> content Dev Tools show everything is set properly but the DOM elements remain hidden. Any thought or suggestions on how to troubleshoot this would be very welcome/appreciated: https://files.gitter.im/vuejs/vue/g3ep/screencapture.gif
  15. jh-thank-you
    Updated all npm packages to the latest versions. Some minor code updates/cleanup. Starting to add transitions. Trying to setup eslint-plugin-vue (ISSUE - vue lint rules are not being applied beyond main.js entry point). SOLVED - See https://github.com/vuejs/eslint-plugin-vue/issues/64 https://github.com/jh-thank-you/webpack-w-gsap
  16. jh-thank-you
    Updates: Preference & Contact tab: Added logic for industry selects/checkboxes (Default and Select All). Thanks to Sven over at Gitter/Codepen (https://codepen.io/svevil/) Preference & Contact tab: CSS updates (media query tweaks) and repeating background image added. Preference & Contact tab: Added localStorage for selects/checkboxes - persistence across page loads. Preference & Contact tab: Added basic (Vue Transition) CSS animation for opening/closing tab/overlay. Password Modal: Added basic (Vue Transition) CSS animation for opening/closing the modal Added basic (Vue Transition) CSS animation between wrong password entered messages. Todo: Use GSAP to animate transitions vs. CSS. Add transitions from main menu to section pages. Add transition to modal-button (from modal-button to slide image). Add transition to locked modal-button when correct password is entered (hide password modal then transition from modal-button to slide image). Rebuild GSAP slideshow the Vue way (currently built with jQuery). Filter modal-buttons based on Industry Selects. Need to pass checkbox select Array to section page. DONE Need to figure out how to filter the current v-for="select in selectsArray" based on the checkbox array. DONE Thanks Sven for al your help with the filter! - https://github.com/svevil Add CSS animation for filter results DONE Updated the repo, here is the link: https://github.com/jh-thank-you/webpack-w-gsap
  17. jh-thank-you
    SOLVED Okay so npm scripting was the way to go... (http://www.marcusoft.net/2015/08/pre-and-post-hooks-for-npm-scripting.html also see https://docs.npmjs.com/misc/scripts) changed the package.json file added a "preinstall" script and then modified the production "build" script. Changed the package.json scripts so that ".metadata_never_index" file is added to the "node_modules" folder on npm install. Also updated the "build" script to add ".metadata_never_index" as well. ".metadata_never_index" this tells Mac OSX Spotlight application to NOT index the parent folder that contains the ".metadata_never_index" file. You can use the following terminal script to add ".metadata_never_index" to any "nodes_modules" and "bower_modules" located in the target directory - replace "/path/to/projects" with the path to the directory you wish the script to search through. Note: if the folders were already indexed by Spotlight adding ".metadata_never_index" to the root of the folder will not delete the previous index file; for that you will need to target the directory manually through Spotlight's Preference Pane/Privacy Settings (see attached photo). You will need need to add the folder to the privacy settings then close out of system preferences for it to take effect. This will remove the index file for that directory... you can then go back into the preference pane and remove the folder from the privacy list - now that the ".metadata_never_index" exists at the folder's root level Spotlight will know NOT to index it... this way you won't have a bunch of individual "node_modules" folders in your privacy list. Moving forward make sure to include the scripts provided above before you npm install otherwise Spotlight will index it automatically. find /path/to/projects -type d \( -name "node_modules" -o -name "bower_modules" \) -exec touch "{}/.metadata_never_index" \; "scripts": { "preinstall": "mkdir node_modules && touch node_modules/.metadata_never_index", "build": "rimraf dist && mkdir dist && touch dist/.metadata_never_index && cross-env NODE_ENV=production webpack --env production --progress --hide-modules", "dev": "nodemon --watch webpack.config.js --watch dev-server.js --exec \"cross-env NODE_ENV=development node --max_old_space_size=2048 dev-server.js --env development\"", "lint:js": "eslint src/ webpack.*.js --cache --ignore-path .gitignore file.js --format 'node_modules/eslint-friendly-formatter' -- --fix || true" }, See the full config here: I'm looking to make one more tweak to the config. Has anyone setup their config to automatically create a ".metadata_never_index" in the node_modules and dist folder? If so could you share the config so I can see how to set this up? Here is a link to a terminal command for Mac OSX to add this file after the folders exist: https://apple.stackexchange.com/questions/247019/prevent-spotlight-from-indexing-folders-with-a-certain-name here is the terminal command from that post: find /path/to/projects -type d \( -name "node_modules" -o -name "bower_modules" \) -exec touch "{}/.metadata_never_index" \; Feature Request for npm: npm/npm#15346Ember-CLI discussion: ember-cli/ember-cli#2338 Juho (webpack contributor) suggested a "git hook"... I've never set this up before... googling around now for info... any help/guidance or a good link/how-to would be very much appreciated. All the best.
  18. jh-thank-you
    SOLVED: the Hero-Image issue (thanks to Blake guiding me and jarring my brain) Solved by passing props via vue-router - IMPORTANT the Prop has to passed to the component's Parent (see comments in the section.vue file). Having a hard coded ID/data in the routes prop has some benefits vs dynamically changing the prop based on the eventBus data: Setting the ID of the parent element via routes, then binding the class value of the hero-image to the parent ID helped to simplify things. I was then able to remove the logic to set the class of hero-image divs during the created hook... Then I used more explicit CSS for the hero-image divs - set the base image and the animated Gif. Added benefit... now if someone bookmarks the page / comes directly to the page the proper images show since the class assignments don't rely on a click event! Whoo-hoo!... Okay that was lame but hopefully you are laughing with me. I have to DRY up the section.vue component code: I need to figure out how to load in the appropriate content based on the ID prop's value. Maybe a Dynamic Slot - similar to what I am doing in the modal-slideshow. Prior version (see git tag) each section was a separate .vue component that in turn loads a separate example-list file. Some useful links: https://router.vuejs.org/en/essentials/passing-props.html https://github.com/vuejs/vue-router/tree/dev/examples/route-props Todo: Dry up the section.vue component code (see notes above). DONE Add preference and contacts tab. DONE Create the password modal the Vue way. DONE Create Small Nav Menu. DONE Figure out filtering in Vue 2.0 (filters from 1.0 are deprecated) - Also Apply some kind of storage for across page load persistence. Add GSAP animations/transitions etc. Updated the repo, here is the link: https://github.com/jh-thank-you/webpack-w-gsap
  19. jh-thank-you
    I'm up to 32 likes! look out gents I'm catching up. Have a great day all.
  20. jh-thank-you
    Okay just for a bit of fun... Blake, as usual has gone way above and beyond... he's been helping me on the side through the message board. It struck me as I looked at the at the thread (sorry I can't attach an image - the system will not let me)... Next to Blake's name it shows 4,252 Likes (Excellent) and there next to my name is 30 Likes (Excellent) So here is a proposal to change the rating comment OSUblake 4,252 Likes (Supercalifragilisticexpialidocious) Have a great day ladies and gents. As always thanks for the help.
  21. jh-thank-you
    Thanks for the mention Blake. Jstafford if you are in the middle of setting webpack with GSAP have a look at the Config I posted over in this GSAP thread: It has code/vendor splitting set up for GSAP plugins and jquery. The Config is working well. As for the Vue JS project I'm still wiring things up the Vue way. The modal-slideshow. vue component is using GSAP but with jquery at the moment. Once I work out a few more things I will reach out to Blake/the GSAP team to figure out how to incorporate GSAP the Vue way... I will also look into if I can do everything without jquery. I'm just learning Vue, as I learn things the build will change but I have a lot of things sorted (see the README). Here is the repo link: https://github.com/jh-thank-you/webpack-w-gsap Feel free to reach out with questions, I will help with what I can but I am no where near the level of Blake, Dipscom and the rest of GSAP team. All the best, Jim
  22. jh-thank-you
    Updated the repo. https://github.com/jh-thank-you/webpack-w-gsap GSAP Animation (only modal-slideshow has GSAP animations applied but not in a Vue way - using jquery - Should I try and accomplish this without jquery?): Tweenlite CSSPlugin ScrollToPlugin Simplifying the Build: Cleaning up the CSS Cleaning up the HTML Nav Buttons Component: Vue-Router with routes for Print, Video, Outdoor and Online. Section and Hero Image Component: Each Section (Print, Video, Outdoor and Online) has duplicate code - need to research how to have the props update along with the corresponding examples-list dynamically based on the nav button clicked. Need/Trying to make this part DRY. Cleaned up CSS grid. Hero image data is passed in by an eventBus - ISSUE - the section nave/section button loads the Hero Image on second (or more) load of the section (for example: click on the PRINT Nav button the first time and the Hero Image will not load, close out and click on PRINT Nav button again and the Hero Image loads. Need to figure out why the eventBus data is not working on first load. I'm thinking this has to do with the hero-image.vue component registration not being detected before the data is updated. I tried moving the data update to mounted() vs. completed() but this did not solve this issue (based on a Vue forum suggestion). Modal Buttons Component: Section thumbnails will call up a Modal Overlay (not accomplished by a sub-route - sub-routes may be a better way - need to research). Event Bus passes modal-button ID to modal-slideshow which in turn calls in the appropriate component. Modal Slideshow Overlay Component: modal-slideshow listens for Event Bus change and loads the appropriate Vue Modal file. Solved having to make individual import statements and component registration for each modal's slideshow content - based on the Event Bus data - see the getModal() function in modal-slideshow.vue file. Preference & Contact Tab: Placeholder for now. Next Steps: Need to solve Hero Image Event Bus issue. Build out and wire up the password modal. Need to figure out how to alternately load the password modal for buttons that contain "locked" in the sector data (v-if approach?). In non-Vue version of site I'm using jquery .hasClass: if ($(this).hasClass("locked")) Need to solve how to sort visibility based on Vue filters ( filters based on the sector data applied to each modal-button). Apply localstorage to filter set. When all of the above is accomplished it will be time to incorporate GSAP for the the transitions etc.
  23. jh-thank-you
    Updated the repo. Solved having to make individual import statements and component registration for each modal's slideshow content - based on the Event Bus data - see the getModal() function in modal-slideshow.vue file. Here is a github repo: https://github.com/jh-thank-you/webpack-w-gsap Next steps: Build out a simplified webpackbin of the project. Figure out how to dynamically set the hero image for each section instead of hard coding it (currently the print section has a hard coded hero image). Need to wire up the preference/contact's tab the Vue way. Research/recreate the preference settings form that sets up the viewing preferences based on sectors/and/or classnames (need to figure out the Vue way of doing the form and having the preferences persist across page loads with local storage).
  24. jh-thank-you
    SOLVED - Thanks to Juho (Webpack Contributor) and Evan You (Vue Creator/Contributor) The GitHub Repo and the GSAP Webpack Config Post have been Updated. Note: Webpack Aliases are not being honored in Vue Template files despite being prefixed with a tilde ~. I have posted a reply to Evan You's commnent, hopefully he will reopen issue #814 and investigate further. The current build has a workaround but I am hoping to find out if it is the preferred way of handling the issue. Continuing on the Webpack hamster wheel... I have vue components loading into a slot dynamically but all the hard coded image links in the component are not being processed (neither the images or the links). I used Copy Webpack Plugin to get around this but I'm having issues with that too. Juho (one of the webpack contributors) was helping me sort the css path issue in the webpack config, he thinks there may be an issue with vue-loader. In any case, I posted in issues on vue-loader's github page. If/when I figure this out I will share the info. vue-loader's github page: https://github.com/vuejs/vue-loader/issues/814 There is an issue with using Copy Webpack Plugin, details found here: Here is a github repo: https://github.com/jh-thank-you/webpack-w-gsap
  25. jh-thank-you
    Updated the config to sort having the css file output to the assets/css folder, thanks to Juho (one of the webpack contributors). All dynamically loaded components and all programmatically created links and src files are processed and hashed correctly - see the update full config earlier in this thread/topic. Okay, one last tweak, I am looking to sort: How to get webpack and vue-loader (Juho thinks its a vue-loader issue) to process the images and hash resolve the links and image names for caching in dynamically loaded vue components. I will cross post this in a Vue GSAP thread I started as well (see below). Right now the above config is using Copy Webpack Plugin to copy over all of the images in the source folder. This gets the images I need but it doen't take advantage of hashtags and caching. Also, currently I have all the images being copied which results in duplicate files (the ones that webpack did process with hashes and the originals being copied over via the Copy Webpack Plugin). I can sort the duplicate issue by making a subdirectory called 'dynamic-img' in the image folder then resolving all the paths in the code to the new folder. Finally setting Copy Webpack Plugin to only copy this directory. I will test and update the config for everyone. Very odd behavior with Copy Webpack Plugin I need to research more... When I create the subdirectory it copies the files like I outlined above (lined through), but then it breaks the links and hashed files that are copied into the image folder. If i keep it the Copy Webpack Plugin settings to copy to { from: assets/img, to: assets/img } then all the links for all images work if I set it to just copy files from the subdirectory example { from: 'assets/img/dynamic-img', to: 'assets/img/dynamic-img' } then the links are broken. Here is a github repo (note it is set to Copy Webpack Plugin is set to assets/img which works but it is a hack): https://github.com/jh-thank-you/webpack-w-gsap I know this is not a specific GSAP deal but a lot of people using GSAP are using webpack so I hope what I am doing is useful. Thanks for reading/any help.
1
2
3
...
5
Page 1 of 5  
×
×
  • Create New...