Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="header-section">Header section here</div>
<div class="intro-section">Intro section here - please scroll down</div>

<div class="container-wrap">
	<div class="container">
		
		<div class="panels-container">

			<div class="cir-panel clearfix">
				<div class="animated-svg">
					<svg xmlns="http://www.w3.org/2000/svg" width="431px" height="431px" viewBox="0 0 431 431">
						<path class="arrow one" d="M227.444,19.315c103.099,6.171,184.803,91.655,184.803,196.204"/>
						<path class="arrow two" d="M411.875,227.702c-6.297,102.883-91.813,184.378-196.381,184.378"/>
						<path class="arrow three" d="M202.917,411.685C100.113,405.207,18.74,319.857,18.74,215.519"/>
						<path class="arrow four" d="M19.09,203.701c6.117-103.055,91.711-184.743,196.403-184.743"/>

						<polyline class="arrowhead one" points="396.19,200.372 412.15,215.874 428,200.04 "/>
						<polyline class="arrowhead two" points="230.712,396.221 215.195,412.166 231.045,428 "/>
						<polyline class="arrowhead three" points="34.81,230.656 18.85,215.154 3,230.988 "/>
						<polyline class="arrowhead four" points="200.399,34.779 215.916,18.834 200.066,3 "/>

						<defs>
							<linearGradient id="theGradient" x1="0%" y1="0%" x2="0%" y2="100%">
								<stop offset="100%" stop-color="#FFFFFF"/>
								<stop offset="100%" stop-color="#00716D"/>
							</linearGradient>
						</defs>
						<path fill="url(#theGradient)" d="M297.556,155.911c-0.009-0.008-0.016-0.018-0.022-0.027c-1.604-2.202-3.294-4.339-5.072-6.414l-0.056-0.069 c-36.725-42.764-101.197-47.685-143.999-10.992c-40.099,34.375-47.33,93.633-16.673,136.628c0.035,0.053,0.073,0.106,0.115,0.159 c0.718,1.001,1.454,1.988,2.21,2.961c0.061,0.08,0.12,0.161,0.182,0.24c0.395,0.508,0.801,1.012,1.202,1.511 c0.033,0.038,0.064,0.076,0.091,0.114c0.422,0.518,0.845,1.028,1.274,1.537c0.006,0.008,0.013,0.014,0.018,0.022 c16.072,19.082,38.593,31.612,63.294,35.213c1.646,0.342,3.319,0.542,4.998,0.6c3.223,0.307,6.49,0.474,9.793,0.474 c29.758,0.031,58.043-12.94,77.422-35.503c0.035-0.04,0.068-0.081,0.1-0.12c1.813-2.113,3.54-4.3,5.183-6.561 c0-0.01,0.01-0.015,0.015-0.022c25.886-35.733,25.856-84.039-0.075-119.74L297.556,155.911L297.556,155.911z M200.765,122.14 c-11.371,8.485-21.145,23.553-27.584,42.597c-10.318-2.527-20.291-6.294-29.701-11.219 C158.243,136.599,178.547,125.478,200.765,122.14L200.765,122.14z M138.165,160.172c10.355,5.372,21.34,9.431,32.701,12.084 c-3.471,12.716-5.403,25.804-5.754,38.981h-44.922c0.867-18.41,7.116-36.161,17.976-51.06L138.165,160.172L138.165,160.172z M138.083,271.376c-10.992-15.13-17.233-33.182-17.932-51.864h44.907c0.202,13.444,2.07,26.813,5.563,39.798 c-11.307,2.655-22.238,6.71-32.54,12.07L138.083,271.376z M143.242,277.881c9.39-4.89,19.337-8.63,29.623-11.139 c6.155,18.564,15.447,33.502,26.06,42.485C177.291,305.541,157.608,294.462,143.242,277.881L143.242,277.881z M210.229,308.663 c-12.404-9.336-22.628-24.721-29.133-43.749c9.607-1.844,19.353-2.865,29.133-3.053V308.663z M210.229,254.312 c-10.544,0.195-21.053,1.275-31.415,3.23c-3.396-12.398-5.209-25.174-5.4-38.025h36.814v34.795H210.229z M210.229,211.244h-36.757 c0.366-12.587,2.304-25.08,5.768-37.188c10.225,1.904,20.59,2.956,30.989,3.146V211.244z M210.229,169.641 c-9.596-0.207-19.158-1.217-28.584-3.02c6.521-18.307,16.52-33.115,28.584-42.197V169.641z M291.245,159.624 c11.108,15.008,17.506,32.974,18.381,51.619h-46.904c-0.286-13.142-2.17-26.201-5.609-38.889 C268.997,169.622,280.474,165.342,291.245,159.624L291.245,159.624z M286.014,153.159c-9.842,5.231-20.311,9.188-31.154,11.778 c-6.32-18.936-15.899-34.075-26.812-42.937c22.432,3.121,43.001,14.176,57.969,31.158H286.014z M218.507,123.969 c11.922,9.351,21.76,24.34,28.104,42.757c-9.272,1.742-18.671,2.718-28.104,2.918V123.969z M218.507,177.194 c10.202-0.206,20.37-1.245,30.402-3.103c3.348,12.111,5.181,24.589,5.461,37.15h-35.862L218.507,177.194z M218.507,219.516h35.862 c-0.281,12.81-2.184,25.534-5.662,37.867c-9.967-1.832-20.066-2.854-30.198-3.059L218.507,219.516z M218.507,306.79v-44.902 c9.34,0.222,18.645,1.206,27.824,2.941c-6.349,18.052-16.07,32.744-27.823,41.958L218.507,306.79z M227.003,309.815 c11.485-8.556,21.352-23.829,27.793-43.135c10.853,2.62,21.326,6.619,31.161,11.899c-15.203,17.217-36.157,28.319-58.952,31.234 L227.003,309.815z M291.323,271.938c-10.803-5.745-22.318-10.041-34.246-12.778c3.478-12.937,5.372-26.247,5.642-39.639h46.939 c-0.707,18.913-7.095,37.175-18.334,52.41L291.323,271.938z"/>
					</svg>
				</div>

				<div class="text-section one">
					<h2>WHAT IS THE CIRCULAR ECONOMY?</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non enim vulputate, ullamcorper nisi sed, varius sem. Quisque non scelerisque leo, sed semper nunc. Aliquam rutrum, lectus ac facilisis porttitor, neque dui pretium metus, bibendum aliquam turpis magna ut diam. Mauris finibus venenatis nisl id sodales.</p>
				</div>

				<div class="text-section two">
					<h2>LOGISTICS</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non enim vulputate, ullamcorper nisi sed, varius sem. Quisque non scelerisque leo, sed semper nunc. Aliquam rutrum, lectus ac facilisis porttitor, neque dui pretium metus, bibendum aliquam turpis magna ut diam. Mauris finibus venenatis nisl id sodales.</p>
					<p>Sed aliquet felis sed tortor convallis tempor nec quis nunc. Donec faucibus, nibh nec egestas eleifend, eros nibh rhoncus nibh, quis iaculis ante risus sed risus. Pellentesque feugiat leo eget lacus scelerisque finibus. Morbi libero tellus, sodales et ante ac, lobortis ultrices nibh. Fusce porttitor ut magna at pulvinar.</p>
				</div>

				<div class="text-section three">
					<h2>RECYCLING</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non enim vulputate, ullamcorper nisi sed, varius sem. Quisque non scelerisque leo, sed semper nunc. Aliquam rutrum, lectus ac facilisis porttitor, neque dui pretium metus, bibendum aliquam turpis magna ut diam. Mauris finibus venenatis nisl id sodales.</p>
					<p>Sed aliquet felis sed tortor convallis tempor nec quis nunc. Donec faucibus, nibh nec egestas eleifend, eros nibh rhoncus nibh, quis iaculis ante risus sed risus. Pellentesque feugiat leo eget lacus scelerisque finibus. Morbi libero tellus, sodales et ante ac, lobortis ultrices nibh. Fusce porttitor ut magna at pulvinar.</p>
				</div>

				<div class="text-section four">
					<h2>REJUVENATON</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non enim vulputate, ullamcorper nisi sed, varius sem. Quisque non scelerisque leo, sed semper nunc. Aliquam rutrum, lectus ac facilisis porttitor, neque dui pretium metus, bibendum aliquam turpis magna ut diam. Mauris finibus venenatis nisl id sodales.</p>
					<p>Sed aliquet felis sed tortor convallis tempor nec quis nunc. Donec faucibus, nibh nec egestas eleifend, eros nibh rhoncus nibh, quis iaculis ante risus sed risus. Pellentesque feugiat leo eget lacus scelerisque finibus. Morbi libero tellus, sodales et ante ac, lobortis ultrices nibh. Fusce porttitor ut magna at pulvinar.</p>
				</div>

				<div class="text-section five">
					<h2>RESALE</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non enim vulputate, ullamcorper nisi sed, varius sem. Quisque non scelerisque leo, sed semper nunc. Aliquam rutrum, lectus ac facilisis porttitor, neque dui pretium metus, bibendum aliquam turpis magna ut diam. Mauris finibus venenatis nisl id sodales.</p>
					<p>Sed aliquet felis sed tortor convallis tempor nec quis nunc. Donec faucibus, nibh nec egestas eleifend, eros nibh rhoncus nibh, quis iaculis ante risus sed risus. Pellentesque feugiat leo eget lacus scelerisque finibus. Morbi libero tellus, sodales et ante ac, lobortis ultrices nibh. Fusce porttitor ut magna at pulvinar.</p>
				</div>

				<div class="text-section six">
					<h2>THAT'S THE CIRCULAR ECONOMY</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non enim vulputate, ullamcorper nisi sed, varius sem. Quisque non scelerisque leo, sed semper nunc. Aliquam rutrum, lectus ac facilisis porttitor, neque dui pretium metus, bibendum aliquam turpis magna ut diam. Mauris finibus venenatis nisl id sodales.</p>
					<p>Sed aliquet felis sed tortor convallis tempor nec quis nunc. Donec faucibus, nibh nec egestas eleifend, eros nibh rhoncus nibh, quis iaculis ante risus sed risus. Pellentesque feugiat leo eget lacus scelerisque finibus. Morbi libero tellus, sodales et ante ac, lobortis ultrices nibh. Fusce porttitor ut magna at pulvinar.</p>
				</div>
			</div>
			
			<div class="clear"></div>
		</div>

		<div style="margin:1000px 0;">a</div>
	</div><!-- end .container -->
</div><!-- end .container-wrapper -->
              
            
!

CSS

              
                .header-section{
  width: 100%;
  height: 350px;
  background: #F1F1F1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.intro-section{
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  background: #FAFAFA;
}

.container-wrap{
  padding-top: 65px;
}


.panels-container .cir-panel .text-section.two{
  transform: translateY(0px);
}

.panels-container .cir-panel {
    background: transparent url('https://tfrg.devweb.site/wp-content/themes/tfrgroup/assets/images/circular-economy-bg.svg') no-repeat;
}
              
            
!

JS

              
                gsap.registerPlugin(ScrollTrigger, DrawSVGPlugin);


const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".container-wrap",
    toggleActions: 'restart pause reverse pause',
    start: "top top",
    scrub: true,
    duration: 10,
    markers: true,
    pin: true,
  }
});

tl.to(".text-section.one", {x: 0, y: 0, autoAlpha: 0})
tl.to(".text-section.two", {x: 0, y: 0, autoAlpha: 1})
tl.from(".arrow.one", {drawSVG: 0, ease: 'sine'})
tl.from(".arrowhead.one", {drawSVG: 0, ease: 'sine'})

tl.to(".text-section.two", {x: 0, y: 0, autoAlpha: 0})
tl.to(".text-section.three", {x: 0, y: 0, autoAlpha: 1})
tl.from(".arrow.two", {drawSVG: 0, ease: 'sine'}, "-=0.6")
tl.from(".arrowhead.two", {drawSVG: 0, ease: 'sine'})

tl.to(".text-section.three", {x: 0, y: 0, autoAlpha: 0})
tl.to(".text-section.four", {x: 0, y: 0, autoAlpha: 1})
tl.from(".arrow.three", {drawSVG: 0, ease: 'sine'})
tl.from(".arrowhead.three", {drawSVG: 0, ease: 'sine'})

tl.to(".text-section.four", {x: 0, y: 0, autoAlpha: 0})
tl.to(".text-section.five", {x: 0, y: 0, autoAlpha: 1})
tl.from(".arrow.four", {drawSVG: 0, ease: 'sine'})
tl.from(".arrowhead.four", {drawSVG: 0, ease: 'sine'})

tl.to('#theGradient stop', 2, {attr: { offset: '0%' }, ease: 'sine'})



              
            
!
999px

Console