Jump to content
Search Community

Noob question here

Kovsky 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

Hi guys,
I am learning GSAP and Scroll magic for a day now, and i am really stuck at the moment ?, i have been lurkin all around the web to get a solution but found nothing.

The problem seems simple maybe you might help.

I am trying to reproduce the animation here --> http://akinsparker.com/

For the moment i just have this --> https://the-ramen-noob.netlify.com/index2

The thing i am struggling with is when i put a duration at 52% on my scene, if i do one scroll (on 1920 screen), its cool, i go to the next scene, but if i do a "big scroll", its just scroll to the bottom or the page.

But if i go there http://akinsparker.com/ no matter the "size" of my scroll, i just go to the next scene. 
Bonus point : why do i have to put 52% to go to next scene on a big screen.

Thank you all for your help, it's really apreciated ?
Have a great weekend

See the Pen wvwRryG by barbgegrasse (@barbgegrasse) on CodePen

Link to comment
Share on other sites

Hey Kovsky and welcome to the forums.

 

For behavior like this, you need to replace the browser's default scroll behavior. Instead of basing where to scroll off of how hard the user scrolls, you need to detect which direction the user is scrolling in and animate a set amount once you know which direction the user is scrolling. 

 

You could code this sort of functionality yourself, but it's likely better to use something that someone else has already written in order to fix a lot of cross-device bugs that you are likely to run into. fullPage.js is one option. 

Link to comment
Share on other sites

Hi,
Thank you for the  nice welcome ?

Thats a sad answer.... i have already seen the fullpage plugin, but i can't see a way to animate 2sections in one scene like on the example. 
Anyway, thank you for your concern. I will keep my research and keep you updated.

Link to comment
Share on other sites

You're essentially building a slideshow. So the logic is.

 

if(slideDown && slideAnimations[index + 1]) {

  slideAnimation(index++);

} else if(slideUp && index >= 1) {

  slideAnimation(index--);

}

 

Whatever you want can go in the side animation, whether it's two parts or many. I'm betting that library has an event you could plug into to animate additional sections.

  • Like 1
Link to comment
Share on other sites

Thank you for your reply Zach but It's not a slider i have tried the slider "full page" as mentionned above.
https://the-ramen-noob.netlify.com/index3/

And the problem is the slider.... with full page, the animation doesnt cover the previous one

 

my best shot is still https://the-ramen-noob.netlify.com/index2/

 

with gsap and scrollmagic i just need to prevent scrolling

 

Link to comment
Share on other sites

19 hours ago, Kovsky said:

It's not a slider i have tried the slider "full page"

It is essentially a fullpage slider.

 

19 hours ago, Kovsky said:

CodePen works a lot better for this sort of thing since it is much easier for us to fork and make changes to.

 

Hopefully Mikel's solution works for you!

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