Jump to content
Search Community

create one page site

proweb1991 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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? 

Link to comment
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??

Link to comment
Share on other sites

  • 2 months later...

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

Link to comment
Share on other sites

 

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

  • Like 1
Link to comment
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:

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,

  • Like 2
Link to comment
Share on other sites

  • 6 months later...

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.

 

  • Like 2
Link to comment
Share on other sites

  • 2 months later...

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.
×
×
  • Create New...