Hello,
GSAP is a wonderful achievement!
In below given code, if you observe the css left property eg in IE11 dev Tools of #text2, you'll notice it jumps to 100% from 600% and only then decreases to 90%. I expected a smooth transition from 600% to 90%. Reversing (using superscrollorama), the 90% increase to 100% and remain there. It appears the initial offsetLeft is not recorded.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>gsap_left_issue</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.superscrollorama.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/plugins/CSSPlugin.min.js"></script>
<style type="text/css">
html, body
{
height: 100%;
font-size: 1px;
}
body
{
margin: 0;
}
#timeline
{
position: absolute;
top: 0;
right: 0;
height: 2500px;
width: 100px;
}
#limiter
{
position: fixed;
height: 100%;
width: 100%;
overflow: hidden;
}
#stage
{
position: relative;
max-width: 1920px;
height: 100%;
margin: auto;
}
.vwrapper
{
position: absolute;
top: 50%;
left: 0;
width: 100%;
}
#stage hr
{
position: relative;
top: 50%;
}
#timeline hr
{
margin-top: 100px;
}
a
{
display: block;
position: absolute;
}
.vegcontainer /* for everything above screen min-width of 1024px */
{
width: 12.64%;
float: left;
position: relative;
}
@media screen and (min-width: 1681px)
{
#vegs
{
position: absolute;
margin-top: -15.65%;
left: 22.1%;
width: 100%;
}
}
.veg
{
width: 100%; /* default width of img in container is not 100% ! (default margin is 0) */
/*margin-left: 0;*/ /* > 0 lets (IE11) break line due to margin of img (!) not covered in expanding parent */
}
.vegcontainer
{
opacity: 0;
position: relative;
}
.text
{
font: 16px "Arial Narrow";
color: grey;
position: absolute;
}
.text h1
{
font-size: 32px;
}
#text2
{
font-size: 16rem;
width: 20%;
top: 15%;
left: 600%;
}
.text h2
{
font-size: 28rem;
}
</style>
</head>
<body>
<div id="timeline"></div>
<div id="limiter">
<div id="stage">
<div class="vwrapper">
<div id="vegs">
<div id="veg1" class="vegcontainer">
<img class="veg" width="120" height="400" src="" alt="image" />
<div id="text2" class="text">
<h2>text</h2>
<p>text</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var dests = {
veg1 : {
scenes : [
{
css : {opacity: 1},
duration : .3,
delay : 350,
syncd: 0
},
{
css : {left: "19%", ease: "Back.easeOut"},
duration : .3,
delay : 750,
syncd: 600
}
]
},
text2 : {
scenes : [
{
css : {left: "90%", ease: "Back.easeOut", easeParams: [0.7]},
duration : .3,
delay : 750,
syncd: 800
}
]
}
};
var controller = $.superscrollorama({
triggerAtCenter: true,
playoutAnimations: true,
reverse: true
});
function getElem(id)
{
var elem = document.getElementById(id);
return elem;
}
for(var a in dests)
{
var b = dests[a].scenes;
for(var e=0; e<b.length; e++)
{
var s = b[e];
var t = TweenLite.to(getElem(a), s.duration, s.css);
controller.addTween(s.delay, t, s.syncd);
}
}
</script>
</html>
Can this be fixed (or is the overflowing offsetLeft somehow not attainable) ?
Merry Christmas!
