proweb1991

create one page site

Recommended Posts

Welcome to the forums. Is there any way you could be a little more specific? We don't have the resources to provide free consulting for building a whole site like that, but if you've got a GSAP-specific question, we'd be happy to help. Are you asking how to scroll to a particular part of a web page using ScrollToPlugin? Do you have a particular element at that spot that you want to target or are you working with a numeric value representing the offset from the top of the page? 

Share this post


Link to post
Share on other sites

thanks ... 

but i want only scroll to part of this site

i want use scrollto plugin whene mousewheel scroll appear , display window scroll section by section ... 

i have many section and does not have certain class or id , because section create dynamically ...

how can use scrollto plugin for scroll amount of window height in each mousewheel scroll??

 

thanks??

Share this post


Link to post
Share on other sites

thanks ... 

but i want only scroll to part of this site

i want use scrollto plugin whene mousewheel scroll appear , display window scroll section by section ... 

i have many section and does not have certain class or id , because section create dynamically ...

how can use scrollto plugin for scroll amount of window height in each mousewheel scroll??

 

thanks??

 

 

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

Share this post


Link to post
Share on other sites

 

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..

 

 

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

  • Like 1

Share this post


Link to post
Share on other sites

Kreen,

 

I'm glad you found that example helpful.

 

 

ProWeb,

Looking under the hood of your reference site... you can see they are using ScrollMagic, parallax, responsiveslides etc in their JS.

 

Petr Tichy has several great blog posts (with CodePen examples) about working with GSAP and ScrollMagic https://ihatetomatoes.net/blog/

 

 

I have forked the GSAP example, moving (and styling) the nav to the right side of the browser window:

http://codepen.io/jh-thank-you/pen/aJbVwY

 

I hope that gets you going in the direction you are looking for.

 

All the best,

  • Like 1

Share this post


Link to post
Share on other sites

Hi Jenny,

 

Welcome to the GreenSock forums. 

Can you please elaborate on your question.

I tested the demo from js-thank-you and it worked fine on my iPhone. I was able to tap the circles and navigate to the proper slide.

 

 

  • Like 1

Share this post


Link to post
Share on other sites

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.

 

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.