03 Greensock scrollTo in a div example

In this example below you will see how to do a 03 Greensock scrollTo in a div example with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Manfred Kempener, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Manfred Kempener ©
  • HTML
  • CSS
  • JavaScript
    	<div class="more">
		<h2>MORE</h2>
		<nav class="menu">
			<ul>
				<li id="blue" >Blue Point</li>
				<li id="black" >Black Point</li>
				<li id="green" >Green Point</li>
				<li id="yellow" >Yellow Point</li>
			</ul>
		</nav>				
	</div>

<div id="circle" class="header">
  <div class="space"></div>   <!--  !!!  just some space to scroll with a special easing -->
  <h2 class="circle01">BLUE CIRCLE</h2>
  <h2 class="circle02">BLACK CIRCLE</h2>
  <h2 class="circle03">GREEN CIRCLE</h2>
  <h2 class="circle04">YELLOW CIRCLE</h2>
  <div class="space"></div>     <!--  !!!  just some space to scroll -->
</div>

<div id="rect" class="header">
   <!-- <div class="space"></div>   !!!  just some space to scroll with a special easing -->
  <div class="inner">
    <h2 class="rect01">BLUE RECT</h2>
    <h2 class="rect02">BLACK RECT</h2>
    <h2 class="rect03">GREEN RECT</h2>
    <h2 class="rect04">YELLOW RECT</h2>
  </div>
  <!--<div class="space"></div>     <!--  !!!  just some space to scroll -->
</div>

<div id="AllContent">
  <p id="content01" class="content">BLUE BLUE BLUE BLUE BLUE BLUE </p>
  <p id="content02" class="content">BLACK BLACK BLACK BLACK BLACK</p>
  <p id="content03" class="content">GREEN GREEN GREEN GREEN GREEN </p>
  <p id="content04" class="content">YELLOW YELLOW YELLOW YELLOW YELLOW</p>
</div>

/*Downloaded from https://www.codeseek.co/mikeK/03-greensock-scrollto-in-a-div-example-ZKyRbz */
    .more {
  position: relative;
  width: 135px;
  height: 200px;
  margin: 20px 0 0 20px;
  cursor: pointer;
}

.more h2 {
  font-size: 20px;
  margin: 0;
}

.menu {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 10px;
  visibility: hidden;
}

ul {
  padding: 0;
  margin: 0;
}

.menu li {
  display: block;
  padding: 6px 30px 6px 0px;
  font-size: 18px;
  font-weight: 300;
}

.menu li:hover {
  color: red;
}

#circle{margin-bottom: 20px;}

.header {
  position: relative;
  text-align: center;
  margin-left: 20px;
  width: 220px;
  height: 45px;
  overflow: hidden;
  border: 1px solid red;
}

.header h2 {
  height: 40px;
  margin: 10px 0 10px 0;   /* corresponding with 'offsetY' in the tween */
}
.space {
  height: 100px;
}

#AllContent p{
  position: absolute;
  width: 220px;
  margin-left: 20px;
  visibility:hidden;
}

#rect{
  margin-left:170px;
  margin-top: 95px;
  position:relative;
  top:0;
}
.inner{
  position:relative;
  top:0; 
}


/*Downloaded from https://www.codeseek.co/mikeK/03-greensock-scrollto-in-a-div-example-ZKyRbz */
    //=========== Menu =================================
	var menu = new TimelineMax({paused:true});
	menu.to(".menu", 0.3, {height: 'inherit', autoAlpha: 1}, 0 )

	$('.more h2').mouseenter(function(){
		menu.play().timeScale(1);
		});
	  
	$('.more').mouseleave(function(){
		menu.reverse().timeScale(3);
	});	

//====================================
//  see: https://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/
//====================================

TweenLite.set("#circle", {scrollTo:{y:".circle01", offsetY:10}}); // set to the first section if wannted
//TweenLite.set("#rect .inner", {scrollTo:{y:".rect01", offsetY:10}}); // set to the first section if wannted
TweenLite.set("#content01", {autoAlpha:1}); // set to the first content if wannted

TweenLite.set("#rect", {rotation:90, transformOrigin:"50% 50%"}); // xxxxxxxxxxxx

$(".menu li").each(function(index, element){
    $(this).click(function(){
      TweenLite.to("#circle", 1.5, {scrollTo:{y:".circle0" + (index+1), offsetY:10}, ease: Elastic.easeOut.config(1, 0.5)});
      
      TweenLite.to("#rect .inner", 0, {y:"0px"}); // first set to 0
      TweenLite.to("#rect .inner", 1.5, {y:"-50" * (index) + "px", ease: Elastic.easeOut.config(1, 0.5)}); // than to the related position
      
      
      TweenLite.to(".content", 0, {autoAlpha:0});  // all fading out
      TweenLite.to("#content0" + (index+1), 1, {autoAlpha:1 });  // only the clicked fade in
    })
  }) 
		
    
   

Comments