.panel.panel1
.inner
%h1 <span>maybe</span><span>you should</span><span>consider</span><span>scrolling</span>
.panel.panel2
.inner
%h1 <span>powered by</span><span>svg filters</span><span>& gsap</span><span>& tornis</span>
%svg{ :version => "1.1", :xmlns => "http://www.w3.org/2000/svg"}
%defs
%filter#wave1
%feturbulence#turbulence{:basefrequency => "0.003 0.004", :numoctaves => "1", :result => "noise", :seed => "13"}
%fedisplacementmap#displacement{:in => "SourceGraphic", :in2 => "noise", :scale => "0"}
%svg{ :version => "1.1", :xmlns => "http://www.w3.org/2000/svg"}
%defs
%filter#wave2
%feturbulence#turbulence{:basefrequency => "0.004 0.004", :numoctaves => "1", :result => "noise", :seed => "13"}
%fedisplacementmap#displacement{:in => "SourceGraphic", :in2 => "noise", :scale => "0"}
View Compiled
body{
background:#222;
svg{
position:absolute;
width:0;
height:0;
}
.panel{
display:flex;
position:relative;
justify-content:center;
align-items:center;
height:100vh;
width:100vw;
margin:0px;
overflow:hidden;
background:#222;
.inner{
position:absolute;
width:100%;
height:100%;
background:radial-gradient(circle at center, transparent, transparent 250px, #222 250px, #222 260px, #E4CB07 260px);
z-index:9;
}
h1{
filter:url(#wave1);
margin:0;
transform-origin:bottom;
text-align:center;
line-height:0.85;
padding:200px;
color:#fff;
font-family:"Shrikhand";
position:absolute;
font-weight:100;
span{
display:inline-block;
clear:both;
width:100%;
font-size:5.5vmin;
transform:translateX(1.5vmin);
margin-top:-0.5vmin;
margin-bottom:0.5vmin;
&:nth-of-type(even){
font-size:6.5vmin;
transform:translateX(-1.5vmin);
}
}
}
&.panel2{
background:#fff;
.inner{
background:radial-gradient(circle at center, transparent, transparent 250px, #FFF 250px, #FFF 260px, #E4CB07 260px);
}
h1{
filter:url(#wave2);
transform-origin:top;
color:#222;
}
}
}
}
View Compiled
const { watchViewport } = tornis;
$text2 = ('.panel2 h1');
$text1 = ('.panel1 h1');
$inner1 = ('.panel1 .inner');
$inner2 = ('.panel2 .inner');
$filter1 = $("#wave1 #displacement");
$filter2 = $("#wave2 #displacement");
$distance = $('.panel2 h1').offset().top,
$window = $(window);
$elHeight = ($('.panel2 h1').height() * 2);
const updateValues = ({ scroll }) => {
if (scroll.changed) {
$scaleOffset = (scroll.top / 3);
$scaleOffset2 = (($scaleOffset/100) + 1);
$scaleOffset3 = (((window.innerHeight + 0) - scroll.top) / 3);
$scaleOffset4 = (($scaleOffset3/100) + 1);
TweenMax.to($filter1, 0, { ease: Expo.easeOut, attr: { scale: $scaleOffset } });
TweenMax.to($inner1, 0, { ease: Elastic.easeOut.config(1, 0.3), css: { transform: "scale("+$scaleOffset2+") translateY(" + ($scaleOffset * -0.75) + "px)" } })
TweenMax.to($text1, 0, { ease: Elastic.easeOut.config(1, 0.3), css: { transform: "translateX(" + ($scaleOffset / -2) + "px) translateY(" + ($scaleOffset * 0.75) + "px) scaleY("+$scaleOffset2+")" } });
if ( $window.scrollTop() < ($distance - ((window.innerHeight/2) - $elHeight)) ) {
TweenMax.to($filter2, 0, { ease: Expo.easeOut, attr: { scale: $scaleOffset3 } });
TweenMax.to($inner2, 0, { ease: Elastic.easeOut.config(1, 0.3), css: { transform: "scale("+$scaleOffset4+") translateY(" + ($scaleOffset3 * 0.75) + "px)" } })
TweenMax.to($text2, 0, { ease: Elastic.easeOut.config(1, 0.3), css: { transform: "translateX(" + ($scaleOffset3 / -2) + "px) translateY(" + ($scaleOffset3 * 0.75) + "px) scaleY("+$scaleOffset4+")" } });
}else{
TweenMax.to($filter2, 2, { ease: Elastic.easeOut.config(1, 0.3), attr: { scale: 0 } });
TweenMax.to($text2, 2, { ease: Elastic.easeOut.config(1, 0.3), css: { transform: "translateX(0) translateY(0) scaleY(1)" } });
}
}
};
watchViewport(updateValues);
This Pen doesn't use any external CSS resources.