Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kovsky

Noob question here

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

Share this post


Link to post
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. 

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

 

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

Thank you for your help guys, its impressive Mikel, exactly what i needed, it will be a good start to get a better undestanding of GSAP.
Just to figure out how to convert this to my React. Thanks again guys ❤️ 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×