Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by kreendurron

  1. Okay.. I take it back. It's not just codepen... Removing <!DOCTYPE html> from the index... allows the page to scroll without resizing... http://higherskies.com/v2.3/ I've uploaded it to my test server... if I were to remove the <!DOCTYPE html> the scrolling would work just fine... obviously I can't just publish the page without the doctype...
  2. https://codepen.io/kreendurron/project/editor/AbBNmA/ I ended up finding out that it was simply a problem with me including the doctype in codepen. I removed it and it works fine now... *facepalm
  3. but even removing the yay sidbar script and css file out still has same effect in my full project, so i dont know..
  4. Then I was able to get it working without the yay.min.js sidebar functionality in this pen http://codepen.io/kreendurron/pen/mWJKMW
  5. I'm thinking it may have to do with a conflict with the yay.min.js sidebar... not sure yet. I'm getting exact same results in Brackets.io editor... I just uploaded to a codepen project to show what I'm seeing. This was the codepen that i've been trying to implement into my site: http://codepen.io/bassta/pen/kDvmC
  6. I'm at a loss here folks. lol Basically, if you check out the Codepen, and try to scroll up or down no scrolling occurs... If you manually resize the window then the scrolling magic happens. Has anyone encountered anything like this before? Thanks, Nick
  7. I’m working on a site that has full height sections. It is laid out as one big page with a few sections. The user has two options to navigate the site: They can use the mouse wheel to go back and forth to the next/previous “section”. They can quickly tween to which ever section they choose via the standard off-canvas menu on the side. Codpen Here: https://codepen.io/kreendurron/pen/ryBrLY/ The problem I'm having is that if you scroll the wheel quickly multiple mouse wheel events fire before the animation can complete its tween. This interferes with the next sections animations. You can see this in the console as shown in the attached screenshot. I hope someone can point me in the right direction as to how I can temporarily disable the mouse wheel until the entire animation has played out and is ready to accept another scroll wheel event. Thanks, Nicholas Brown
  8. I hadn't seen this. Very helpful.
  9. I found time and finished it... haha. It's working now. If you hover over the div sections and use the scrollwheel it will animate to the next/previous sections etc. Thanks, Nick Brown
  10. I believe this is the answer you are looking for: http://codepen.io/kreendurron/pen/ryBrLY I didn't have time to actually implement the timeline animations when you scroll, but the code is there for you to just fill in the functions. Hopefully it's commented well enough.. // TWEEN ON SCROLL WHEEL EVENT $('#box1').on('DOMMouseScroll mousewheel', function (e) { if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY //scroll down to box#2 console.log('Down to box#2'); } else { //scroll up log console.log('nothing to scroll Up to....'); } //prevent page fom natively scrolling return false; }); It basically fires a function based on the direction of your scroll while hovering over whatever element you attach it to. I just have it logging to console right now. So open your divtools and look in the console. This should work on all browsers. Hope that helps! Thanks, Nick Brown
  11. {scrollTo:"#box2", ease:Power4.easeInOut} <- that exactly what I was looking for! Thanks!
  12. Thanks PointC, I'll work on creating a codepen. I ultimately want to get away from using the jquery.scrolly.js and make the move to just using GSAP. I think what i'm needing to know may be in the codepen you posted above about clicking a button and scrolling to a div. Unfortunately when i follow the link to the codepen you provided it says the page doesn't exist? Can you try again? Thanks.
  13. Link: http://higherskies.com/v2.1/ First time submitting to the forums. Real quick want to say I'm loving GSAP. If you follow the link provided, the page loads and I have a timeline controlled welcome text and continue button animate onto the screen. What I'm trying to achieve is when I click the continue button it will then scroll to the next section of the page, the "Who We Are" section... In my sidebar when I click on "Who We Are" button it smoothly scrolls to the appropriate Anchor tag. How can I get the same result with the timeline function: continueBtn() here is my timeline code: <script> var introText = document.getElementById("introText"); var introBtn = document.getElementById("introBtn"); var welcomeText = document.getElementById("welcomeText"); var logo = document.getElementById('logoBtn'); var welcomeBtn = document.getElementById('welcomeBtn'); var whoWeAreBtn = document.getElementById('whoWeAreBtn'); var servicesBtn = document.getElementById('servicesBtn'); var contactBtn = document.getElementById('contactBtn'); var t1 = new TimelineLite(); t1.staggerFrom([introText,logo,welcomeBtn,whoWeAreBtn,servicesBtn,contactBtn],0.25,{ x:950, opacity:0, ease: Expo.easeOut,delay:1},.25 ); t1.to(welcomeText,.02,{transformPerspective:800}); t1.to(welcomeText,1,{transformPerspective:800,rotationY:20,ease: Bounce.easeOut}); t1.from(introBtn,.75,{ rotationX:-90, transformOrigin:"left top", ease: Bounce.easeOut} ); function welcomeTextHover() { t1.to(welcomeText,.75,{rotationY:0,overwrite:"all"}); } function welcomeTextHoverOut() { t1.to(welcomeText,.75,{rotationY:20,overwrite:"all"}); } function continueBtn() { t1.to(introBtn,.25,{ x:-900, ease: Expo.easeOut} ); t1.to(introText,.25,{ x:900, autoAlpha:0, ease: Expo.easeOut} ); // wait for animations to play out then scroll to next section. } </script> Thanks for any help you can offer. I hope I was descriptive enough. ~Nick