jh-thank-you

SimplyGreen
  • Content count

    101
  • Joined

  • Last visited

Community Reputation

46 Newbie

About jh-thank-you

  • Rank
    Advanced Member

Recent Profile Visitors

1,111 profile views
  1. create one page site

    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
  2. create one page site

    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.
  3. Animate a large sequence of png's

    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.
  4. Animate a large sequence of png's

    Thought I would share this. Note the sheet size limitations. https://github.com/mattdesl/lwjgl-basics/wiki/LibGDX-Textures
  5. VueJS and GSAP - Making Components

    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.
  6. VueJS and GSAP - Making Components

    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
  7. VueJS and GSAP - Making Components

    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:
  8. Scrollmagic Setup in Webpack 2

    Here is the updated Slideshow using GSAP
  9. Scrollmagic Setup in Webpack 2

    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.
  10. VueJS and GSAP - Making Components

    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 ).
  11. VueJS and GSAP - Making Components

    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.
  12. VueJS and GSAP - Making Components

    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
  13. VueJS and GSAP - Making Components

    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
  14. VueJS and GSAP - Making Components

    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
  15. VueJS and GSAP - Making Components

    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