Jump to content


Button That Scrolls to an anchor

Go to solution Solved by PointC,

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

Link: http://higherskies.com/v2.1/


First time submitting to the forums.

Real quick want to say I'm loving GSAP.


If you follow the link provided, the page loads and I have a timeline controlled welcome text and continue button animate onto the screen.


What I'm trying to achieve is when I click the continue button it will then scroll to the next section of the page, the "Who We Are" section...

In my sidebar when I click on "Who We Are" button it smoothly scrolls to the appropriate Anchor tag.


How can I get the same result with the timeline function: continueBtn()


here is my timeline code:

	var introText = document.getElementById("introText");
	var introBtn = document.getElementById("introBtn");
	var welcomeText = document.getElementById("welcomeText");
	var logo = document.getElementById('logoBtn');
	var welcomeBtn = document.getElementById('welcomeBtn');
	var whoWeAreBtn = document.getElementById('whoWeAreBtn');
	var servicesBtn = document.getElementById('servicesBtn');
	var contactBtn = document.getElementById('contactBtn');
	var t1 = new TimelineLite();			
		ease: Expo.easeOut,delay:1},.25
		t1.to(welcomeText,1,{transformPerspective:800,rotationY:20,ease: Bounce.easeOut});
		transformOrigin:"left top",
		ease: Bounce.easeOut}
		function welcomeTextHover() {
		function welcomeTextHoverOut() {
		function continueBtn() {
			ease: Expo.easeOut}
			ease: Expo.easeOut}
	                // wait for animations to play out then scroll to next section.

Thanks for any help you can offer. I hope I was descriptive enough.



Link to comment
Share on other sites

Hi kreendurron  :)


Welcome to the GreenSock forum.


There's a lot of code to look at and your site is loading a lot of scripts so I'm not 100% sure what you're asking. I see you're loading a jQuery scrolly script as well as GSAP's scrollTo. Are you asking how to make something scroll with GSAP and scrollTo?


Here's a basic example of clicking a button and scrolling to a div:


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


I also noticed you were loading two versions of TweenMax. (lines 16 and 458) That may cause problems. I'd recommend loading the newest scripts for TweenMax and ScrollTo:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/plugins/ScrollToPlugin.min.js"></script>

If you have other questions about your project, could you please create a simplified demo so we're more easily able to troubleshoot the problem, edit your code and give you the best answers? Here's some info about creating a demo:




Happy tweening.


  • Like 1
Link to comment
Share on other sites

Thanks PointC,


I'll work on creating a codepen.


I ultimately want to get away from using the jquery.scrolly.js and make the move to just using GSAP.


I think what i'm needing to know may be in the codepen you posted above about clicking a button and scrolling to a div.

Unfortunately when i follow the link to the codepen you provided it says the page doesn't exist?


Can you try again?


Link to comment
Share on other sites

  • Solution

Whoops - my fault. The link is fixed now.


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


Happy tweening.


  • Like 1
Link to comment
Share on other sites

{scrollTo:"#box2", ease:Power4.easeInOut} <- that exactly what I was looking for! Thanks!

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