@Sahil
i tried to reacreate, but i dont get the part where he uses the parameters. because i have just single classes and dont have any div's. only one div.
When i use a paramter i get the "undefined" error. and when i create a var assign the classes etc. the animation doesn't play.
I took the master timeline out of the function so it is globally accessible. Do i need to use the parameters?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="ad.size" content="width=300,height=600">
<meta name="author" content="treeonline.nl">
<title>htmlanimatie</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<Style>
body{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#animation {
width: 300px;
height: 600px;
border:solid black 1px;
margin:0 auto;
background-image: url("images/bannerleeg.png");
overflow:hidden;
position: relative;
}
.tekst1{
font-size:26px;
color:#283354;
font-family:sans-serif;
font-weight: 400;
position: absolute;
top:45px;
padding:10px;
text-align: left;
left:14px;
}
.tekst2{
font-size:26px;
color:#283354;
font-family:sans-serif;
font-weight: 400;
position: absolute;
top:45px;
padding:10px;
text-align: left;
left:14px;
}
.tekst3{
font-size:26px;
color:#283354;
font-family:sans-serif;
font-weight: 400;
position: absolute;
top:45px;
padding:10px;
text-align: left;
left:14px;
}
.wplogo{
width:100px;
height:100px;
position: absolute;
top:270px;
left:93px;
}
.wpdash {
width:220px;
height:127px;
position: absolute;
top:258px;
left:33px;
}
.theme {
width:220px;
height:127px;
position: absolute;
top:258px;
left:33px;
}
#button {
background:#f87200;
color:white;
font-size:19px;
font-family: arial;
top:525px;
left:67px;
text-align: center;
text-decoration: none;
position:absolute;
border-radius:10px;
padding:12px;
}
.gradient{
background: #9af600; /* Old browsers */
background: -moz-linear-gradient(top, #f69f00 0%, #a0fd00 50%, #90e700 51%, #a0fe00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9af600), color-stop(50%,#a0fd00), color-stop(51%,#90e700), color-stop(100%,#a0fe00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f69f00 0%,#a0fd00 50%,#90e700 51%,#a0fe00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f69f00 0%,#a0fd00 50%,#90e700 51%,#a0fe00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f69f00 0%,#a0fd00 50%,#90e700 51%,#a0fe00 100%); /* IE10+ */
background: linear-gradient(to bottom, #f69f00 0%,#a0fd00 50%,#90e700 51%,#a0fe00 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9af600', endColorstr='#a0fe00',GradientType=0 ); /* IE6-9 */
}
.buttons {
display:inline;
position: relative;
left:635px;
margin-left: 7px;
}
</style>
</head>
<body>
<div id="animation">
<div id="tekstwrapper">
<p class="tekst1 panel1"><strong>U wilt wordpress leren maar heeft <br> weinig tijd?</strong></p>
<p class="tekst2 panel2"><strong>Leer wordpress in uw eigen tempo.</strong></p>
<p class="tekst3 panel3"><strong>3-Daagse Wordpress cursus op locaties in heel Nederland</strong></p>
<img class="wplogo panel1" src="images/wp.png"/>
<img class="wpdash panel2" src="images/wpdash.jpg"/>
<img class="theme panel3" src="images/theme.jpg"/>
</div>
<a href="https/www.google.nl" target="_blank" id="button" class="gradient"><strong>Meer informatie</strong></a>
</div>
<div id="controls">
<button id="play" class="buttons">play</button>
<button id="pause" class="buttons">pause</button>
<button id="reverse" class="buttons">reverse</button>
<button id="resume" class="buttons">resume</button>
<button id="restart" class="buttons">restart</button>
</div>
<script>
var tekst1 = document.getElementsByClassName(".tekst1"),
tekst2 = document.getElementsByClassName(".tekst2"),
tekst3 = document.getElementsByClassName(".tekst3"),
wplogo = document.getElementsByClassName(".wplogo"),
wpdash = document.getElementsByClassName(".wpdash"),
theme = document.getElementsByClassName(".theme"),
button = document.getElementsByClassName(".button")
var button = document.getElementById("button");
//Button controls for playback rewind etc ------------------------------------------
var play = document.getElementsByClassName("play"); // play button
var pause = document.getElementsByClassName("pause"); // pause button
var reverse = document.getElementsByClassName("reverse"); // reverse button
var resume = document.getElementsByClassName("resume"); // resume button
var restart = document.getElementsByClassName("restart"); // restart button
function timelineone(one){
var tl = new TimelineMax();
tl.add("intro")
tl.from(".tekst1",0.6,{x:250,ease:Back.easeOut},"intro")
tl.add("bouncedelay","-=0.6")
tl.add("introout","+=2")
tl.to(".tekst1",0.2,{autoAlpha:0},"introout")
tl.from(".wplogo",1.2,{scale:0,autoAlpha:0,ease:Elastic.easeOut},"bouncedelay")
tl.to(".wplogo",0.3,{autoAlpha:0},"introout")
return tl;
}
function timelinetwo(){
var tl = new TimelineMax();
tl.add("intro")
tl.from(".tekst2",0.6,{x:400,ease:Back.easeOut},"intro")
tl.add("introdelay", "-=0.6")
tl.add("wpdashout", "+=2")
tl.to(".tekst2",0.3,{autoAlpha:0},"wpdashout")
tl.fromTo(".wpdash", 0.6, { clip:"rect(125px 300px 0px 0px)"}, { clip:"rect(0px 300px 250px 0px)"},"introdelay")
tl.to(".wpdash",0.3,{scale:0},"wpdashout")
return tl;
}
function timelinethree(){
var tl = new TimelineMax();
tl.add("intro")
tl.from(".tekst3",0.6,{x:400,ease:Back.easeOut},"intro")
tl.add("introdelay", "-=0.6")
tl.fromTo(".theme", 0.6, { clip:"rect(125px 300px 0px 0px)"}, { clip:"rect(0px 300px 250px 0px)"},"introdelay")
tl.add(TweenMax.to(button, 0.6, {boxShadow:"0px 0px 20px 2px #f69f00", repeat:4,repeatDelay:0.4, yoyo:true},"-=0.8"))
return tl;
}
var master = new TimelineMax({
repeat: 0, // infinite repeat
repeatDelay: 4 // you can set a delay if you want
});
master.add(timelineone())
master.add(timelinetwo(),"-=0.4")
master.add(timelinethree(),"-=0.4")
master.timeScale(0.8);
var button = document.getElementById("button");
button.addEventListener("mouseover", onHoverOver);
button.addEventListener("mouseout", onHoverOut);
function onHoverOver(e){
TweenMax.fromTo( button, 0.6, { boxShadow:"0px 0px 0px 0px orange"}, {boxShadow:"0px 0px 20px 2px #f69f00", repeat:-1, yoyo:true});
}
function onHoverOut(e){
TweenMax.to( button, 0.2, {boxShadow:"0px 0px 0px 0px #f69f00"});
}
/*
//button control
play.click(function(){
master.play();
});
pause.click(function(){
master.pause();
});
reverse.click(function(){
master.reverse();
});
restart.click(function(){
master.restart();
});
resume.click(function(){
master.resume();
});
*/
</script>
</body>
</html>
