Jump to content

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


  • Posts

  • Joined

  • Last visited

JMischka's Achievements


Newbie (1/14)



  1. I've found a number of examples each a bit different. I'm wondering about best practices. I've NPM installed GSAP and included it into my JavaScript file like so: import ( TweenMax, Expo, CSSPlugin, ScrollToPlugin } from "gsap/all"; const plugins = [ScrollToPlugin, CSSPlugin]; Works perfectly. I'm very happy. I'm now messing around with ScrollMagic and interested in including it into my project and wondering the best way. NPM install? And then add to my markup: import ScrollMagic from "scrollmagic"; import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap"; I'm looking for rules and best practices (not bloating my build.js file) and thoughts. Thanks!
  2. Hi Jack. Thanks again for getting back to me. So after days of trying out different ways of firing my event listeners and reading various posts all over the web I finally figured out the problem. As it turns out, it had nothing to do with Greensock or the scrollTo plugin. Good news! The issue is specifically an iOS Safari issue on iPhone X. Perhaps known by some (not by me) the issue was the location of where I had my button placed. It was in the lower corner of the viewport so that when it was ‘clicked’ the iPhone’s action bar (only in Safari) interfered with my handler function. The solution is frustratingly simple. Move the button from the bottom of the viewport, make sure to have { autoKill:false } set and everything should work as expected. At least it did in my case. From what I’ve read, place buttons that have functionality associated with them above the lower 10% of the viewport and one shouldn’t encounter any glitches. As I said, seemed to only happen with iPhones X. There are other workarounds that people have written about, but… This is simple. Hopefully, I’ve saved someone a few hours.
  3. Hi Jack. thanks for the response back. Let me prepare something and post to Codepen. Again, seems to only happen when I'm testing (through BrowserStack) for iPhones X. I set autoKill:false which corrected the issue in every other case except in this one test case scenario. It may be something else within my code (I'm not ruling that out) or simply a test quirk, but I'm racking my brain at the moment trying to figure it out. Thanks again, Jack for the reply back. It's much appreciated. When I have something up on a Codepen I'll drop a line again. :-).
  4. scrollTo plugin works great on desktop and in most mobile scenarios. However, I'm running into problems when testing for iPhones X (on BrowserStack). I have a restart button that scrolls the window back to the beginning. The problem I'm finding is on iPhones X when scrolling backwards the browser address and phone navigation icons appear/are revealed and it appears to halt the scrolling progress. I have autoKill:false set which corrects the issue in most cases, but for iPhones X it seems to not work. Any thoughts? function handleMobileRestart(e) { e.preventDefault(); function closeWindow() { dateWindowWrapper.classList.remove('open-window'); introCard.classList.remove('actify'); } TweenMax.to(window, 4, {scrollTo:{y:0, autoKill:false}, ease:Expo.easeOut}); setTimeout(closeWindow, 2000); }