Jump to content
Search Community

Button That Scrolls to an anchor

kreendurron test
Moderator Tag

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:

<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 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:

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-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?

Thanks.

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.
×
×
  • Create New...