Button That Scrolls to an anchor

[kreendurron 3 Likes (Newbie)]

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

[PointC 8,599 Likes (Superhero)]

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.

[kreendurron 3 Likes (Newbie)]

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.

[PointC 8,599 Likes (Superhero)]

Whoops - my fault. The link is fixed now.

 

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

 

Happy tweening.

[kreendurron 3 Likes (Newbie)]

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

[PointC 8,599 Likes (Superhero)]

Glad to hear that's what you needed. Be sure to check out the scrollTo docs too:

 

https://greensock.com/docs/#/HTML5/Plugins/ScrollToPlugin/

 

You can do cool things like adding offsets or scrolling the content of divs. Pretty fun stuff.

 

Happy tweening.