create one page site

[proweb1991 2 Likes (Newbie)]

hi 

how can use scrollTo plugin  to scroll section by section like this onepage website? http://le-mugs.com/

 

can anyone help me?? 

 

[GreenSock 8,117 Likes (Superhero)]

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? 

[proweb1991 2 Likes (Newbie)]

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

[kreendurron 3 Likes (Newbie)]

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:

See the Pen ryBrLY by kreendurron (@kreendurron) on CodePen

 

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

[kreendurron 3 Likes (Newbie)]

 

I believe this is the answer you are looking for:

See the Pen ryBrLY by kreendurron (@kreendurron) on CodePen

 

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

[jh-thank-you 50 Likes (Contributor)]

I found this GSAP Slideshow CodePen to be very helpful with this:

 

See the Pen kDvmC by bassta (@bassta) on CodePen

 

Hope that helps.

 

All the best

[kreendurron 3 Likes (Newbie)]

I found this GSAP Slideshow CodePen to be very helpful with this:

 

See the Pen kDvmC by bassta (@bassta) on CodePen

 

Hope that helps.

 

All the best

 

I hadn't seen this. Very helpful.

[jh-thank-you 50 Likes (Contributor)]

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:

See the Pen aJbVwY by jh-thank-you (@jh-thank-you) on CodePen

 

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

 

All the best,

[Jenny 0 Likes (Newbie)]

Anyway to make this work with touch devices? 

[Carl 9,066 Likes (Superhero)]

Hi Jenny,

 

Welcome to the GreenSock forums. 

Can you please elaborate on your question.

I tested the

See the Pen aJbVwY by jh-thank-you (@jh-thank-you) on CodePen

and it worked fine on my iPhone. I was able to tap the circles and navigate to the proper slide.

 

 

[Jenny 0 Likes (Newbie)]

Is there a way to way to make it draggable? A

[jh-thank-you 50 Likes (Contributor)]

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/

See the Pen ylwoz?editors=1111 by foleyatwork (@foleyatwork) on CodePen

 

A bit newer:

https://blog.madewithenvy.com/build-your-own-touch-slider-with-hammerjs-af99665d2869

See the Pen ABFnd by jtangelder (@jtangelder) on CodePen

 

 

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.

 

[jh-thank-you 50 Likes (Contributor)]

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