04 Greensock scrollTo in a div example

In this example below you will see how to do a 04 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="inner">
    <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>    
</div>

<div id="rect" class="header">
  <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>

<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/04-greensock-scrollto-in-a-div-example-oWeNgd */
    .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: 50px;   /*   corresponding with line-height: 50px; */
  overflow: hidden;
  border: 1px solid red;
}

.header h2 {
  line-height: 50px;
  margin: 0;
}

#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/04-greensock-scrollto-in-a-div-example-oWeNgd */
    //=========== 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("#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(){
      
      var currentContent = "#content0" + (index+1),
          header = new TimelineMax({paused:true}),
          content = new TimelineMax({paused:true});
      
      content.to(".content", 0, {autoAlpha:0})    // all fading out
        .to(currentContent, 0.5, {autoAlpha:1 }, 0.5);  // only the clicked fade in - 0.5 sec later
            
      header.to(".inner", 1.5, {y:"-50" * (index) + "px", ease: Elastic.easeOut.config(1, 0.5)}); 
      
      header.play();
      content.play();

    })
  }) 
		
    
   

Comments