Jump to content
Search Community

jh-thank-you

Plus
  • Posts

    102
  • Joined

  • Last visited

About jh-thank-you

Recent Profile Visitors

3,347 profile views

jh-thank-you's Achievements

52

Reputation

1

Community Answers

  1. 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. 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. 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. 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. Thought I would share this. Note the sheet size limitations. https://github.com/mattdesl/lwjgl-basics/wiki/LibGDX-Textures
  6. 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. 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. 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. Here is the updated Slideshow using GSAP
  10. 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. 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. 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. 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. 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. 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
×
×
  • Create New...