I am using ScrollMagic's section wipes to fade one panel into the next on scroll, this works perfect but I was wondering if it is possible to snap to the next panel while scrolling (now if you stop scrolling you are half faded between the two panels).
I know I could use fullpage.js since they offer exactly that effect but I rather don't add another library to my already heavy javascript loaded website and i'm wondering if I could not get that same effect with ScrollMagic.
var controller = new ScrollMagic.Controller();
var wipeAnimation1 = new TimelineMax()
.fromTo(".panel2", 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone})
.fromTo(".panel3", 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone})
.fromTo(".panel4", 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone});
new ScrollMagic.Scene({
triggerElement: "#slider",
triggerHook: 0,
duration: "100%"
})
.setPin("#slider")
.setTween(wipeAnimation1)
.addTo(controller);
* {
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
}
#spacer {
width:100%;
height:100%;
text-align:center;
}
#slider {
width: 100%;
height: 100%;
color:#ffffff;
text-align:center;
}
.panel {
height: 100%;
width: 100%;
position: absolute;
}
.panel1 { background:#000000; }
.panel2 { background:#222222; }
.panel3 { background:#444444; }
.panel4 { background:#666666; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<div id="spacer">spacer</div>
<div id="slider">
<section class="panel panel1">
<b>ONE</b>
</section>
<section class="panel panel2">
<b>TWO</b>
</section>
<section class="panel panel3">
<b>THREE</b>
</section>
<section class="panel panel4">
<b>FOUR</b>
</section>
</div>
<div id="spacer">spacer</div>
So Jan Paepke from ScrollMagic helped to come up with a solution. It basically comes down to unlinking the animation from the scroll and to initiate/animate each panel by itself working with triggers.
var controller = new ScrollMagic.Controller();
new ScrollMagic.Scene({
triggerElement: "#slider",
triggerHook: 0,
duration: "700%"
})
.setPin("#slider")
.addTo(controller);
var panels = [
{
trigger: '#trigger2',
name: '.panel2'
},
{
trigger: '#trigger3',
name: '.panel3'
},
{
trigger: '#trigger4',
name: '.panel4'
}
]
for (var i=0; i<panels.length; i++) {
var panel = panels[i];
new ScrollMagic.Scene({
triggerElement: panel.trigger,
triggerHook: 0
})
.setTween(new TimelineMax()
.fromTo(panel.name, 1, {x: "0%", autoAlpha: 0}, {y: "0%", autoAlpha: 1, ease: Linear.easeNone}))
.addTo(controller);
}
* {
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
}
#spacer {
width:100%;
height:100%;
}
#trigger2 {
position: absolute;
top: 100vh;
}
#trigger3 {
position: absolute;
top: 300vh;
}
#trigger4 {
position: absolute;
top: 500vh;
}
#sliderwrapper {
position: relative;
height: auto;
}
#slider {
width: 100%;
height: 100%;
color:#ffffff;
}
.panel {
height: 100vh;
width: 100%;
position:absolute;
}
.panel1 { background:#000000; }
.panel2 { background:#222222; }
.panel3 { background:#444444; }
.panel4 { background:#666666; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<div id="spacer"></div>
<div id="sliderwrapper">
<div id="slider">
<section class="panel panel1">
<b>ONE</b>
</section>
<section class="panel panel2">
<b>TWO</b>
</section>
<section class="panel panel3">
<b>THREE</b>
</section>
<section class="panel panel4">
<b>FOUR</b>
</section>
</div>
<div id="trigger2"></div>
<div id="trigger3"></div>
<div id="trigger4"></div>
</div>
<div id="spacer"></div>
Related
I have 2 pictures.
<div class="work-default-row">
<img class="img1" src="/files/ourWork/titleImages/img1.jpg"/>
<img class="img2" src="/files/ourWork/titleImages/img2.jpg"/>
</div>
In CSS
.work-default-row {
position:relative;
}
.img1 {
width:100%;
height:400px;
}
.img2 {
position:absolute;
top:0px;
left:3000px;
width:100%;
height:400px;
}
and JavaScript
$(".work-default-row").hover(function(){
$(".img2", this).stop().animate({left:"0"},{queue:false,duration:200});
}, function() {
$(".img2", this).stop().animate({left:"3000px"},
{queue:false,duration:200});
});
It "works", on hover, the second image just came from nowhere and overlays the first image. But this solution is HORRIBLE.(The position of img1 is in the middle of page, So I can see how the img2 come from right through whole page and in resolution bigger than 3000px, user is able to see the second image)
Please, can somebody help me and tell me how can i make this images change effective?
If you have the width of the container you can set it to hide anything outside of it with.
#container_id{
overflow:hidden;
}
It looks like your using the work-default-view as your container.
Try this.
$(".slider").hover(
function() {
$(".slider-inner", this)
.stop()
.animate({ left: "0" }, { queue: false, duration: 200 });
},
function() {
$(".slider-inner", this)
.stop()
.animate({ left: "-100vw" }, { queue: false, duration: 200 });
}
);
.slider{
overflow: hidden;
}
.slider-inner {
width: 200vw;
position: relative;
display: flex;
flex-direction: row;
overflow:hidden;
}
img{
width: 100vw;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div class="slider-inner">
<img src="https://images.unsplash.com/photo-1538291397218-01e8830ddc68?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fd07afd311ed4a74d0eed33089be01bb&auto=format&fit=crop&w=500&q=60" />
<img src="https://images.unsplash.com/photo-1538306196939-82f33cccacad?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c3ebd64083bb95f0b27c5d222b0f170&auto=format&fit=crop&w=500&q=60" />
</div>
</div>
Try changing width of img2 instead of left.
$(".work-default-row").hover(function() {
$(".img2", this).stop().animate({
width: "100%"
}, {
queue: false,
duration: 200
});
}, function() {
$(".img2", this).stop().animate({
width: "0"
}, {
queue: false,
duration: 200
});
});
.work-default-row {
position: relative;
}
.img1 {
width: 100%;
height: 400px;
}
.img2 {
position: absolute;
top: 0px;
width: 0;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work-default-row">
<img class="img1" src="https://picsum.photos/200" />
<img class="img2" src="https://picsum.photos/200" />
</div>
Trying to use ScrollMagic with fullpage.js - I have searched and only found that it is suggested to use scrollBar: true or autoScrolling: false to enable jQuery positioning or offsets, however, upon responsive (which turns the page into a normal scrolling site), the position still remains at that (0,0) position.
This seems a bit confusing, as in my mind, if I say:
autoScrolling: true,
but
responsiveWidth: 991
and, via the documentation:
A normal scroll (autoScrolling:false) will be used under the defined width in pixels ... For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.
So why wouldn't my $('.fp-section').position() work after checking for Responsive in afterResponsive(isResponsive)?
example:
Codepen
jQuery('#main').fullpage({
//Navigation
lockAnchors: false,
navigation: true,
navigationPosition: 'left',
showActiveTooltip: false,
slidesNavigation: false,
//Scrolling
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: false,
fitToSectionDelay: null,
scrollBar: false,
easingcss3: 'ease',
scrollHorizontally: true,
offsetSections: false,
resetSliders: false,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
bigSectionsDestination: 'top',
dragAndMove: 'fingersonly',
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: false,
//Design
sectionsColor: ['#ccc', 'black', '#ccc'],
responsiveWidth: 991,
//Custom selectors
sectionSelector: '.section',
lazyLoading: true,
afterResponsive: function(isResponsive) {
var scene = [];
var parallaxTween = [];
var box = jQuery('.moveme');
var parallax = new TimelineMax();
var controller = new ScrollMagic.Controller({
globalSceneOptions: {
triggerHook: .5,
duration: window.innerHeight + 50
}
});
for (var i = 0; i < box.length; i++) {
var yPer = -100;
var yEnd = 100;
//reset scene on responsive
if (scene[i])
scene[i].destroy(true);
parallaxTween[i] = null;
scene[i] = null;
console.log(box.closest('.section').position());
parallaxTween[i] = parallax.fromTo(jQuery('.container').eq(i), 1, {
yPercent: yPer
}, {
yPercent: yEnd,
ease: Linear.easeNone
}, 0);
scene[i] = new ScrollMagic.Scene({
triggerElement: jQuery(box[i]).closest('.section'),
})
.setTween(parallaxTween[i])
.addIndicators()
.addTo(controller);
}
}
});
.section {
position: relative;
}
.container {
position: absolute;
background: blue;
color: white;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.moveme {
margin: 0;
line-height: 100px;
text-align: center;
}
<main class="site-main fullpage-wrapper" id="main" role="main" style="height: 100%; position: relative; transform: translate3d(0px, 0px, 0px); transition: none;">
<div class="section">
<div class="container">
<p class="moveme">i should move
<p>
</div>
</div>
<div class="section">
<div class="container">
<p class="moveme">i should move
<p>
</div>
</div>
<div class="section">
<div class="container">
<p class="moveme">i should move
<p>
</div>
</div>
</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/jquery.ScrollMagic.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1295227/animation.gsap.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1295227/debug.addIndicators.js'></script>
I am creating a simple animation banner type thing that just displays a few strings and an image. I had it working then I changed some variable names around and can't seem to find why it is not working.
https://jsfiddle.net/06uto8av/3/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animate</title>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 200%;
}
#container {
width: 700px;
height: 400px;
background-color: black;
margin: 40px auto;
position: relative;
overflow: hidden;
opacity: 0;
}
.quote {
font-size: 3em;
font-weight: bold;
position: absolute;
width: 600px;
text-align: center;
top: 60px;
left: 0px;
color: crimson;
text-shadow: 3px 3px 8px rgba(0,0,0,0.5);
}
#img {
top: 60px;
}
img {
position: relative;
width:620px;
bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div class="quote" id="quote1">Thirsty?</div>
<div class="quote" id="quote2">Love beer?</div>
<div class="quote" id="quote3">Well look no further!</div>
<div class="quote" id="quote4">Come on down to...</div>
<div class="quote" id="quote5">Steve's Bar!</div>
<div class="quote" id="img"><img src="img/stevebar.jpg" alt="steve bar"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TimelineLite.min.js"></script>
<script>
var idContainer = document.getElementById("container");
var idQuote1 = document.getElementById("quote1");
var idQuote2 = document.getElementById("quote2");
var idQuote3 = document.getElementById("quote3");
var idQuote4 = document.getElementById("quote4");
var idQuote5 = document.getElementById("quote5");
var idImg = document.getElementById("img");
var tl1 = new TimelineLite();
tl1.to(idContainer,1,{opacity:1})
.from(idQuote1, 1, {x: 600, skewX:-30, ease:Bounce.easeOut} )
.to(idQuote1, 1, {delay: 1, x: 1000, ease:Back.easeIn }, )
.from(idQuote2, 1, {x: -700, ease:Elastic.easeOut } )
.to(idQuote2 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote3, 1, {scale:0,ease:Back.easeOut } )
.to(idQuote3, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote4, 1, {delay:1.5, scale:8, opacity:0 } )
.to(idQuote4, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote5, 1, {x: -700, ease:Back.easeOut },)
.to(idQuote5, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idImg, 1, {scale: 0, opacity: 0, ease:Back.easeOut},"-=0.5");
</script>
</body>
</html>
You're missing a comma ;) see: https://jsfiddle.net/0Le94gsL/
tl1.to(idContainer,1,{opacity:1})
.from(idQuote1, 1, {x: 600, skewX:-30, ease:Bounce.easeOut} )
.to(idQuote1, 1, {delay: 1, x: 1000, ease:Back.easeIn }, )
.from(idQuote2, 1, {x: -700, ease:Elastic.easeOut } )
.to(idQuote2, 1, {delay: 1, x: 1000, ease:Back.easeIn }) // You needed a comma here just after idQuote2
.from(idQuote3, 1, {scale:0,ease:Back.easeOut } )
.to(idQuote3, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote4, 1, {delay:1.5, scale:8, opacity:0 } )
.to(idQuote4, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idQuote5, 1, {x: -700, ease:Back.easeOut },)
.to(idQuote5, 1, {delay: 1, x: 1000, ease:Back.easeIn })
.from(idImg, 1, {scale: 0, opacity: 0, ease:Back.easeOut},"-=0.5");
I was learning JQuery on my own and yesterday night I stumbled upon a doubt and am stuck since then.
simple: I need the animation to repeat on loop. but it is not working, can you please help me out? I have tried setInterval, it is not working.
The fiddle is: https://jsfiddle.net/8v5feL9u/
$(document).ready(function(){
//window.setInterval(function(){
$(".img1").css({display:''});
$(".img1").animate({bottom: '300px', opacity: '1'}, 2000, function(){
$(".img1").fadeOut(700);
$(".img1").css({display:'none', bottom: '', opacity:'0'});
$(".img2").css({display:''});
$(".img2").animate({top: '300px', opacity: '1'}, 2000, function(){
$(".img2").fadeOut(700);
$(".img2").css({display:'none', top: '', opacity:'0'});
$(".img3").css({display:''});
$(".img3").animate({bottom: '300px', opacity: '1'}, 2000, function(){
$(".img3").fadeOut(700);
$(".img3").css({display:'none', bottom: '', opacity:'0'})
$(".img4").css({display:''});
$(".img4").animate({top: '300px', opacity: '1'}, 2000, function(){
$(".img4").fadeOut(700);
$(".img4").css({display:'none', top: '', opacity:'0'});
});
});
});
});
//});
});
thank you so much.
You can wrap your animation in a function and then call that function recursively in the last "animation complete" callback on the most nested part of the animation.
function doAnimation() {
$('.animate')
.hide()
.fadeIn(1000, function() {
$(this).fadeOut(1000, function() {
// recursively call our function in the inner-most animation callback
doAnimation();
});
})
}
// start out initial loop
doAnimation();
.animate {
padding: 30px;
background: cornflowerblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate">animate me</div>
Without re-writing entire piece, you can provide a name for and call the function passed to .ready() within last nested .animate() callback function
$(function fn() {
$(".img1").css({
display: ''
});
$(".img1").animate({
bottom: '300px',
opacity: '1'
}, 2000, function() {
$(".img1").fadeOut(700);
$(".img1").css({
display: 'none',
bottom: '',
opacity: '0'
});
$(".img2").css({
display: ''
});
$(".img2").animate({
top: '300px',
opacity: '1'
}, 2000, function() {
$(".img2").fadeOut(700);
$(".img2").css({
display: 'none',
top: '',
opacity: '0'
});
$(".img3").css({
display: ''
});
$(".img3").animate({
bottom: '300px',
opacity: '1'
}, 2000, function() {
$(".img3").fadeOut(700);
$(".img3").css({
display: 'none',
bottom: '',
opacity: '0'
})
$(".img4").css({
display: ''
});
$(".img4").animate({
top: '300px',
opacity: '1'
}, 2000, function() {
$(".img4").fadeOut(700);
$(".img4").css({
display: 'none',
top: '',
opacity: '0'
});
// call `fn` again here
fn()
});
});
});
});
});
.bckgrnd {
width: 100vw;
height: 100vh;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- this is the end of the head tag-->
<!--this is the start of the body tag-->
<body>
<div class="bckgrnd w3-center w3-grey" style="position:absolute; z-index:-1">
<img src="https://s1.postimg.org/a51sj109n/image1.jpg" class="w3-image img1" style="width:100vw; height:148vh; margin-bottom: -48vh; position: fixed; left: 0px; opacity: 0;">
<img src="https://s1.postimg.org/57o7xwyaj/image2.jpg" class="w3-image img2" style="width:100vw; height:148vh; margin-top: -48vh; left: 0px; display:none; position:fixed; opacity: 0">
<img src="https://s1.postimg.org/k4woyxbiz/image3.jpg" class="w3-image img3" style="width:100vw; height:148vh; margin-bottom: -48vh; left:0px; position:fixed; display:none; opacity: 0">
<img src="https://s1.postimg.org/a8vlza5qz/image4.jpg" class="w3-image img4" style="width:100vw; height:148vh; margin-top: -48vh; left:0px; display:none; position: fixed; opacity: 0">
</div>
<div class="w3-container w3-black w3-center" style="z-index:1000 !important">
<h1>Hi how are you</h1>
</div>
I am having difficulty converting this working greensock animation into an angular animation. Can anyone suggest how I can do this? This was going to be tied to an angular modal wizard so this does need to be an angular animation.
I was hoping to add an animation class to the html that could be used by the javascript. I don't care if it is addClass/removeClass, enter/leave, etc. I have tried a few times and I am having difficulty coming up with a fairly simple solution.
function percentToPixel(perc) {
return ($(".stepNavContainer").outerWidth() / 100) * parseFloat(perc);
}
var cursor = document.getElementById('cursor'),
step1 = document.getElementById('joinModalNavStep1'),
step2 = document.getElementById('joinModalNavStep2'),
step3 = document.getElementById('joinModalNavStep3'),
step4 = document.getElementById('joinModalNavStep4'),
step5 = document.getElementById('joinModalNavStep5');
TweenMax.set(cursor, {
x: percentToPixel("0") + "px",
xPercent: -50,
yPercent: -50
});
TweenMax.set(step1, {
x: percentToPixel("0") + "px",
xPercent: -50,
yPercent: -50
});
TweenMax.set(step2, {
x: percentToPixel("25") + "px",
xPercent: -50,
yPercent: -50
});
TweenMax.set(step3, {
x: percentToPixel("50") + "px",
xPercent: -50,
yPercent: -50
});
TweenMax.set(step4, {
x: percentToPixel("75") + "px",
xPercent: -50,
yPercent: -50
});
TweenMax.set(step5, {
x: percentToPixel("100") + "px",
xPercent: -50,
yPercent: -50
});
var tlStepNavAnimation = new TimelineMax({
paused: true
});
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("0") + "px",
xPercent: -50,
yPercent: -50,
ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("25") + "px",
xPercent: -50,
yPercent: -50,
ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("50") + "px",
xPercent: -50,
yPercent: -50,
ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("75") + "px",
xPercent: -50,
yPercent: -50,
ease: Back.easeInOut
});
tlStepNavAnimation.addPause();
tlStepNavAnimation.to(cursor, 1, {
x: percentToPixel("100") + "px",
xPercent: -50,
yPercent: -50,
ease: Back.easeInOut
});
$("#nextBtn").on("click", navigateToNextStep);
$("#previousBtn").on("click", navigateToPreviousStep);
function navigateToNextStep() {
tlStepNavAnimation.play();
}
function navigateToPreviousStep() {
tlStepNavAnimation.reverse();
}
html,
body {
overflow: hidden;
}
body {
background-color: white;
margin: 0;
padding: 0;
}
.stepNavContainer {
position: relative;
height: 50px;
width: 50%;
left: 25%;
border: 1px solid red;
}
.circle {
display: block;
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
}
#cursor {
display: block;
position: absolute;
width: 50px;
height: 50px;
background: #c32026;
border-radius: 50%;
}
.step {
background: #999999;
}
.btn {
width: 100px;
height: 50px;
border: 1px solid black;
}
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="previousBtn" class="btn">
<span>Previous</span>
</div>
<div id="nextBtn" class="btn">
<span>Next</span>
</div>
<div class="stepNavContainer">
<span id="joinModalNavStep1" class="circle step"></span>
<span id="joinModalNavStep2" class="circle step"></span>
<span id="joinModalNavStep3" class="circle step"></span>
<span id="joinModalNavStep4" class="circle step"></span>
<span id="joinModalNavStep5" class="circle step"></span>
<span id="cursor" class="circle"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="script.js"></script>
</body>
</html>