Jump to content
Search Community

ScrollTo plugin plus ScrollMagic - smooth scroll to/from section

Tasty 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

Hello ! :D

Sooo, I'm trying to play a little with ScrollTo plugin and ScrollMagic.js my goal is to achieve smooth scroll to the bottom of the footer (that works) 
and then (after the user scrolls once up on the footer element) go back to the view where top of the footer is right at the bottom of the viewport.


Problems I encountered:

Scrolling works only once and only in one direction - usually ScrollMagic reverses all animations etc.so after scrolling back up from the bottom of the footer It would be lovely to achieve smooth scrolling in both sides and always when user is navigating through the website - not only once :)

I bet it's possible, and that I do something terribly stupid ^_^ 

Can you guys please help and give me some hits how to work this out? Maybe it's not possible to do this with ScrollTo and ScrollMagic but they are not a must.

Any help will be more than welcome !  

See the Pen jAjoqN by Dikus (@Dikus) on CodePen

Link to comment
Share on other sites

Hello Patryk D&D, and Welcome to the GreenSock Forum!

 

Sorry to hear your having trouble. Even though ScrollMagic is made with GSAP, ScrollMagic is not made by GSAP. ScrollMagic is made by Jan Paepke:

 

https://github.com/janpaepke

 

Since ScrollMagic is a scrolling animation management tool. It seems your issue has to do more about how to setup, trigger, or use ScrollMagic, instead of a specific question in relation to using the GSAP API.

 

Here is a link that might help you get an answer with your ScrollMagic on its git ISSUES page:

 

https://github.com/janpaepke/ScrollMagic/issues

http://scrollmagic.io/docs/animation.GSAP.html

 

Maybe someone here can help you with your this ScrollMagic question, since there are some users who also use ScrollMagic to control their animation. But let us know if you have any questions in regards to the GSAP API, we are more than willing to help you with that!

 

Happy Tweening! :)

  • Like 3
Link to comment
Share on other sites

Hi Patryk D&D :)

 

I have a couple thoughts for you.

 

I wouldn't recommend using scrollTo in your tweens with Scroll Magic. The reason being that I think it's quite jarring for the user. They are manually scrolling down the page, hit an invisible trigger and suddenly the scroll bar goes into auto pilot mode and heads for the bottom of the page. The other problem is if you're manually scrolling and hit the trigger, you'll see a tiny little animation as the tween starts, but since you're scrolling manually, the scrollTo() will be immediately killed.  If you do want to do that, you'll have to set autoKill to false like this:

scrollFull.to(window, 1, {scrollTo:{y:"#three", autoKill:false}});

The reverse problem you described is another reason I wouldn't recommend using scrollTo in the triggered tweens. If you hit the trigger and scroll to section three and then scroll back up, what's the reverse of the window scrolling to section three? There really isn't one so this is problematic and not really the way Scroll Magic was meant to be used.

 

My recommendation would be to place section3 (which is acting as your footer) inside section 2 and position it 100% off the bottom with section 2's overflow set to hidden. Then when section 2 hits the top of the window you can animate the blue section to the top. 

 

See the Pen OXKJQR by PointC (@PointC) on CodePen

 

You can certainly use scrollTo and Scroll Magic together, but generally scrollTo is used for navigating up and down the page to specific points. You'll see many sites with a series of circles or dots representing each section and stacked vertically on one side of the page. Those are especially nice for longer pages.

 

That's my 2 cents worth for you. Hopefully that helps a little bit.

 

Happy tweening and scrolling.

:)

  • Like 5
Link to comment
Share on other sites

Thanks Jonathan and PointC!

With your help I was able to make something close to the desired effect, tho I think ScrollMagic isn't the right library for that ^_^
I tried your suggestion Craig, but I already have so much elements on the site that I had to gave up - my DOM is dynamic and loads after certain scroll position, I would have to plan this better earlier - but nice cheat :D

Anyway, GSAP is the solution !

I just need to make my sections with specific height and capture the scroll event on each element - it's not the perfect way and it's not possible to scroll through the site like I wanted, but it's close ;p

Anyway it's a fast way of creating kinda "one scroll section navigation" - and the sections don't have to be 100%  so maybe someone will find this useful.
 

See the Pen 1f85d2788d7d49f84e3a32d97a4bef91 by Dikus (@Dikus) on CodePen



Thanks once more! 
Happy everything :D



P.S

By the way, it it possible to use scrollTo with something like this : TweenLite.to(window, 1, { scrollTo: '+=526' });
To scroll  let's say 526px from the current position? I tried to use it but it does not work ;p It does not show any error either

  • Like 2
Link to comment
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.
×
×
  • Create New...