Jump to content
GreenSock

feyberho

please help me how to move to an achor with scrolltrigger and make senction infinity scroll

Go to solution Solved by OSUblake,

Recommended Posts

sorry im very new in gsap. so i want anyone to help me with my request

1. make my linked menu move to a section

2. make my codepen tobe an infinity scroll

See the Pen qBPYZdw by feyberho (@feyberho) on CodePen

Link to comment
Share on other sites

Hey there!

 

The scrollTrigger demos page is a great place to start looking. ☺️

https://greensock.com/st-demos

 

Here's an infinite scroll example - 

See the Pen WNQmvPK by kdbkapsere (@kdbkapsere) on CodePen

 

And here's an example showing how to use the scrollTo plugin to navigate to a section

See the Pen bGVjLwG?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Thanks 1
Link to comment
Share on other sites

Posted (edited)

thank you @Cassie for quick response.

and im sorry that i cannot understand all the code of gsap. i mean i just see on code pan and just copy paste it in my codding panel. 😅

 

but let me see first about scrollTo plugin you gave..

 

ok my bad. its already working well after i change gsap version to the newest.

See the Pen qBPYZdw by feyberho (@feyberho) on CodePen

 

 

Edited by feyberho
test the code she gave
Link to comment
Share on other sites

no idea after try this solution. its seems my code not work or i confuse to put the right code. 

so i try to make my website works using this reference https://www.ssk.com/

Link to comment
Share on other sites

Hey @feyberho,

 

I'm afraid it's out of the scope of these forums to provide complete copy-paste solutions. We're happy to help you learn though.

If you're new to GSAP, try to start from scratch rather than copy and pasting, write your own code and break it down one little bit at a time, make sure you understand what each bit is doing.

If you have a specific question about something you've tried to understand, we're here to help. The docs are very thorough and there are also videos to explain things if you learn better from videos than reading.

Link to comment
Share on other sites

No one, not even very experienced developers look at a brand new API or library and immediately understand it. It takes time to read, question, research and learn.

If you put that time in I think you'll find it enjoyable. Good luck!

Link to comment
Share on other sites

1 minute ago, Cassie said:

Hey @feyberho,

 

I'm afraid it's out of the scope of these forums to provide complete copy-paste solutions. We're happy to help you learn though.

If you're new to GSAP, try to start from scratch rather than copy and pasting, write your own code and break it down one little bit at a time, make sure you understand what each bit is doing.

If you have a specific question about something you've tried to understand, we're here to help. The docs are very thorough and there are also videos to explain things if you learn better from videos than reading.

alright then @Cassie thanks for reply me so fast. btw, where can i found the explanation video? please mention the link. 

Link to comment
Share on other sites

What would you like an explanation video on? There are a lot of them on different topics.

 

Here's the getting started article - that has a video.
 

 

There's also a video at the top of the scrollTrigger docs

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

There's no video for scrollTo but if you have any questions we're here!

https://greensock.com/docs/v3/Plugins/ScrollToPlugin

Link to comment
Share on other sites

And here's a demo that loops like the site you referenced.

 

See the Pen XWeJXVz by GreenSock (@GreenSock) on CodePen

 

 

Link to comment
Share on other sites

47 minutes ago, Cassie said:

What would you like an explanation video on? There are a lot of them on different topics.

 

Here's the getting started article - that has a video.
 

 

There's also a video at the top of the scrollTrigger docs

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

There's no video for scrollTo but if you have any questions we're here!

https://greensock.com/docs/v3/Plugins/ScrollToPlugin

just finished watching all the video you mention. also i think  i can understand little bit about gsap. but i have to rewatch the video more and more.

thank you so much @Cassie

  • Like 1
Link to comment
Share on other sites

46 minutes ago, OSUblake said:

And here's a demo that loops like the site you referenced.

 

 

 

 

 

wow @OSUblake this is really helpful. but i think when i set menu link its not working. hehe. thank you so much sir

  • Like 1
Link to comment
Share on other sites

@OSUblake Pardon me sir, but i'm difficult to link my section. can you give me the example from this reference how to move to another section with href or scrollToPlugin?

See the Pen XWeJXVz by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

It doesn't look like you added anything to demo. Give it a shot. It's should be no different than the examples on the ScrollToPlugin docs.

 

  • Haha 1
Link to comment
Share on other sites

On 1/4/2022 at 11:30 PM, OSUblake said:

It doesn't look like you added anything to demo. Give it a shot. It's should be no different than the examples on the ScrollToPlugin docs.

 

sorry for late reply @OSUblake here the mini-demo i just added scroll to plugin follow trought the scrollTo Puglin with button. any advice to make it to be menu not by button but by <a> / href link? i mean i want to force the section going to a section with scrollToPlugin with just Href="#sectionid"

please se my mini demo:  it worked but in random direction when it clicked.

See the Pen qBPYZdw by feyberho (@feyberho) on CodePen

Link to comment
Share on other sites

1 hour ago, feyberho said:

sorry for late reply @OSUblake here the mini-demo i just added scroll to plugin follow trought the scrollTo Puglin with button. any advice to make it to be menu not by button but by <a> / href link? i mean i want to force the section going to a section with scrollToPlugin with just Href="#sectionid"

please se my mini demo:  it worked but in random direction when it clicked.

 

 

 

i want the when i clicked the Section 1 it moved like this codepen but just in ScrollToPlugin function:

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

Link to comment
Share on other sites

  • Solution

I would probably make each section a separate part of a timeline, and placed using labels. Then you scroll to a spot in that timeline using labelToScroll.

 

See the Pen GRMGPBz by GreenSock (@GreenSock) on CodePen

 

 

 

  • Like 1
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.
×