Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
kreendurron

Button That Scrolls to an anchor

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:

<script>
	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();			
		t1.staggerFrom([introText,logo,welcomeBtn,whoWeAreBtn,servicesBtn,contactBtn],0.25,{
		x:950,
		opacity:0,
		ease: Expo.easeOut,delay:1},.25
		);
		
		t1.to(welcomeText,.02,{transformPerspective:800});
		t1.to(welcomeText,1,{transformPerspective:800,rotationY:20,ease: Bounce.easeOut});
			
		t1.from(introBtn,.75,{
		rotationX:-90,
		transformOrigin:"left top",
		ease: Bounce.easeOut}
		);
			
		function welcomeTextHover() {
			t1.to(welcomeText,.75,{rotationY:0,overwrite:"all"});
		}
		
		function welcomeTextHoverOut() {
			t1.to(welcomeText,.75,{rotationY:20,overwrite:"all"});
		}
		
		function continueBtn() {
			t1.to(introBtn,.25,{
			x:-900,
			ease: Expo.easeOut}
			);
			t1.to(introText,.25,{
			x:900,
			autoAlpha:0,
			ease: Expo.easeOut}
			);
	                // wait for animations to play out then scroll to next section.
		}
		
	</script>	

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

 

~Nick

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

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Happy tweening.

:)

  • Like 1
Link to post
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?

Thanks.

Link to post
Share on other sites

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

  • Like 2
Link to post
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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×