superscrollorama and greensock animation not working
Question
<!DOCTYPE html>
<html>
<head>
<title>practice1</title>
<style>
.window{width:100%;height:700px;}
#window1{background:black; color:white;}
#window1>#x1>h1 {font-size:10px}
#window2{background:green; color:white;}
#window3{background:yellow; color:black;}
#window4{background:white; color:black;}
#window5{background:red; color:white;}
</style>
</head>
<body>
<div id="window1" class="window">
<div id="x1">
<h1>fade it</h1>
</div>
</div>
<div id="window2" class="window">
<div id="x2">
<h1>fade it</h1>
</div>
</div>
<div id="window3" class="window">
</div>
<div id="window4" class="window">
</div>
<div id="window5" class="window">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="TweenMax.min.js" type="text/javascript"></script>
<script src="jquery.superscrollorama.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var controller=$.superscrollorama();
TweenMax.to("x1",5,{fontSize:50px});
controller.addTween("#x2", 3, TweenMax.to("#x2", 3, {scale:2,color:blue}));
});
</script>
</body>
I was working on a website using superscrollorama but it did not work. So I decided to do a practice but still this simple code is not working. I have included everything in the above file, you just have to use greensock's TweenMax.min.js and jquery.superscrollorama.js to check the file. I am realy frustrated right know and I know that there is only minute mistake but can anyone help me figure out please. Thanking in advance.
1 answers
solution1
1 2014-03-06 19:16:02
Heyho!
Please note, that Superscrollorama has been superceeded by ScrollMagic: https://github.com/janpaepke/ScrollMagic
Nevertheless your mistake is in the parameters for addTween.
In the superscrollorama docu you can see this: .addTween(target, tween, duration, offset, reverse)
Your second parameter is 3, where it should be the tween...
This confusion with tween and superscrollorama parameters was actually one of the things that has been fixed with ScrollMagic.
So give it a shot! :)
regards,
Jan
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.