I have bugs with Scroll Magic, I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PageScroll Test</title>
<!--<link rel="stylesheet" href="style.css">-->
<style>
.content {
width: 600px;
margin: 0 auto;
}
.block-news {
background: rgba(255, 255, 255, 1);
/*margin-top: -100%;*/
opacity: 1;
}
.news {
background: rgba(0, 0, 0, 0);
z-index: 10;
position: relative;
padding-top: 0 !important;
background: #ffffff;
}
</style>
</head>
<body>
<div class="content">
<div class="block-news"><h1>ONE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequuntur est facilis inventore iste
maiores nostrum sunt ullam, velit! At autem cum cumque debitis eos excepturi itaque iure laboriosam maxime
molestiae necessitatibus neque nihil, obcaecati odio pariatur, quam ratione sequi, sint. Ab aliquid aperiam
architecto asperiores assumenda at consequuntur corporis delectus distinctio doloremque, ducimus eos esse
eum expedita fugiat harum impedit in, labore laborum magnam neque non officia pariatur quis quisquam saepe
tempore temporibus ullam vel voluptatibus? Consequuntur deleniti dicta dolorem eligendi eum facilis fugiat
illo molestias obcaecati, odit omnis optio pariatur praesentium quod repellendus reprehenderit, ullam ut.
Assumenda at autem, blanditiis commodi debitis dolorem ea error facilis fuga fugiat harum hic, illum ipsum
iste iure nam natus odio omnis pariatur placeat quae soluta temporibus veniam? Animi aperiam aspernatur
consectetur cum cumque, cupiditate est illum inventore ipsum iste laudantium libero nam non odit provident
quae quidem quod rem tempora voluptates!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci commodi consequatur, dignissimos dolor
hic ipsum nostrum odit optio provident quaerat quas quasi quibusdam quis quisquam ratione velit veniam?
Autem, rem, voluptatem? Alias animi aperiam corporis dignissimos dolore ea eligendi error esse excepturi
illo iste iure iusto labore laudantium necessitatibus nemo obcaecati officia optio, quae rem, rerum sunt
tenetur unde velit voluptatem voluptatibus voluptatum. Accusamus accusantium ad at commodi consequuntur
corporis cupiditate dolorem doloremque ducimus ea et explicabo incidunt itaque laudantium, nobis pariatur
perspiciatis, quae quaerat quod rem repellat reprehenderit sequi vitae! Aliquam commodi, cupiditate dolorem
expedita labore laborum maxime nulla placeat possimus quaerat quos reiciendis, saepe soluta tenetur ut! A ad
aspernatur at aut consectetur consequuntur cum dolore doloremque, et eum, excepturi, facere impedit iste
iure libero nobis numquam odio provident qui quia reiciendis sint sit tempora tempore totam velit veniam
voluptatibus? Earum eius quod reiciendis suscipit ut voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad aspernatur autem deleniti, dolor est iure
iusto nisi repellat rerum? At et officia repellendus sunt voluptates. Labore minus nemo, nisi numquam omnis
quod ut. Accusamus asperiores aut commodi dolor, et iste laborum necessitatibus nobis pariatur quaerat
ratione ullam vero voluptates. Alias consequuntur cupiditate dicta, eveniet explicabo iste laboriosam,
laudantium nihil nostrum numquam obcaecati sint tempora temporibus. Ab adipisci atque commodi consequatur
deleniti ducimus expedita explicabo fuga hic itaque, magni maiores neque obcaecati porro quibusdam quis
sequi sit vero. Architecto, debitis distinctio dolor dolore doloribus hic inventore ipsa, provident rem
reprehenderit sapiente sequi, sint! Alias asperiores aut eligendi, eum ex illo laudantium molestias mollitia
numquam repudiandae soluta sunt ullam ut. Accusantium consequatur delectus facere ipsa labore magni
molestiae nemo nesciunt, nobis non optio quam quo reiciendis, saepe similique vel voluptatum. Aliquid amet
consectetur deserunt dignissimos doloribus ducimus fugiat incidunt, perferendis ratione.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad aspernatur autem deleniti, dolor est iure
iusto nisi repellat rerum? At et officia repellendus sunt voluptates. Labore minus nemo, nisi numquam omnis
quod ut. Accusamus asperiores aut commodi dolor, et iste laborum necessitatibus nobis pariatur quaerat
ratione ullam vero voluptates. Alias consequuntur cupiditate dicta, eveniet explicabo iste laboriosam,
laudantium nihil nostrum numquam obcaecati sint tempora temporibus. Ab adipisci atque commodi consequatur
deleniti ducimus expedita explicabo fuga hic itaque, magni maiores neque obcaecati porro quibusdam quis
sequi sit vero. Architecto, debitis distinctio dolor dolore doloribus hic inventore ipsa, provident rem
reprehenderit sapiente sequi, sint! Alias asperiores aut eligendi, eum ex illo laudantium molestias mollitia
numquam repudiandae soluta sunt ullam ut. Accusantium consequatur delectus facere ipsa labore magni
molestiae nemo nesciunt, nobis non optio quam quo reiciendis, saepe similique vel voluptatum. Aliquid amet
consectetur deserunt dignissimos doloribus ducimus fugiat incidunt, perferendis ratione.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad aspernatur autem deleniti, dolor est iure
iusto nisi repellat rerum? At et officia repellendus sunt voluptates. Labore minus nemo, nisi numquam omnis
quod ut. Accusamus asperiores aut commodi dolor, et iste laborum necessitatibus nobis pariatur quaerat
ratione ullam vero voluptates. Alias consequuntur cupiditate dicta, eveniet explicabo iste laboriosam,
laudantium nihil nostrum numquam obcaecati sint tempora temporibus. Ab adipisci atque commodi consequatur
deleniti ducimus expedita explicabo fuga hic itaque, magni maiores neque obcaecati porro quibusdam quis
sequi sit vero. Architecto, debitis distinctio dolor dolore doloribus hic inventore ipsa, provident rem
reprehenderit sapiente sequi, sint! Alias asperiores aut eligendi, eum ex illo laudantium molestias mollitia
numquam repudiandae soluta sunt ullam ut. Accusantium consequatur delectus facere ipsa labore magni
molestiae nemo nesciunt, nobis non optio quam quo reiciendis, saepe similique vel voluptatum. Aliquid amet
consectetur deserunt dignissimos doloribus ducimus fugiat incidunt, perferendis ratione.</p>
<hr>
</div>
<div class="block-news"><h1>ONE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequuntur est facilis inventore iste
maiores nostrum sunt ullam, velit! At autem cum cumque debitis eos excepturi itaque iure laboriosam maxime
molestiae necessitatibus neque nihil, obcaecati odio pariatur, quam ratione sequi, sint. Ab aliquid aperiam
architecto asperiores assumenda at consequuntur corporis delectus distinctio doloremque, ducimus eos esse
eum expedita fugiat harum impedit in, labore laborum magnam neque non officia pariatur quis quisquam saepe
tempore temporibus ullam vel voluptatibus? Consequuntur deleniti dicta dolorem eligendi eum facilis fugiat
illo molestias obcaecati, odit omnis optio pariatur praesentium quod repellendus reprehenderit, ullam ut.
Assumenda at autem, blanditiis commodi debitis dolorem ea error facilis fuga fugiat harum hic, illum ipsum
iste iure nam natus odio omnis pariatur placeat quae soluta temporibus veniam? Animi aperiam aspernatur
consectetur cum cumque, cupiditate est illum inventore ipsum iste laudantium libero nam non odit provident
quae quidem quod rem tempora voluptates!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci commodi consequatur, dignissimos dolor
hic ipsum nostrum odit optio provident quaerat quas quasi quibusdam quis quisquam ratione velit veniam?
Autem, rem, voluptatem? Alias animi aperiam corporis dignissimos dolore ea eligendi error esse excepturi
illo iste iure iusto labore laudantium necessitatibus nemo obcaecati officia optio, quae rem, rerum sunt
tenetur unde velit voluptatem voluptatibus voluptatum. Accusamus accusantium ad at commodi consequuntur
corporis cupiditate dolorem doloremque ducimus ea et explicabo incidunt itaque laudantium, nobis pariatur
perspiciatis, quae quaerat quod rem repellat reprehenderit sequi vitae! Aliquam commodi, cupiditate dolorem
expedita labore laborum maxime nulla placeat possimus quaerat quos reiciendis, saepe soluta tenetur ut! A ad
aspernatur at aut consectetur consequuntur cum dolore doloremque, et eum, excepturi, facere impedit iste
iure libero nobis numquam odio provident qui quia reiciendis sint sit tempora tempore totam velit veniam
voluptatibus? Earum eius quod reiciendis suscipit ut voluptate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad aspernatur autem deleniti, dolor est iure
iusto nisi repellat rerum? At et officia repellendus sunt voluptates. Labore minus nemo, nisi numquam omnis
quod ut. Accusamus asperiores aut commodi dolor, et iste laborum necessitatibus nobis pariatur quaerat
ratione ullam vero voluptates. Alias consequuntur cupiditate dicta, eveniet explicabo iste laboriosam,
laudantium nihil nostrum numquam obcaecati sint tempora temporibus. Ab adipisci atque commodi consequatur
deleniti ducimus expedita explicabo fuga hic itaque, magni maiores neque obcaecati porro quibusdam quis
sequi sit vero. Architecto, debitis distinctio dolor dolore doloribus hic inventore ipsa, provident rem
reprehenderit sapiente sequi, sint! Alias asperiores aut eligendi, eum ex illo laudantium molestias mollitia
numquam repudiandae soluta sunt ullam ut. Accusantium consequatur delectus facere ipsa labore magni
molestiae nemo nesciunt, nobis non optio quam quo reiciendis, saepe similique vel voluptatum. Aliquid amet
consectetur deserunt dignissimos doloribus ducimus fugiat incidunt, perferendis ratione.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad aspernatur autem deleniti, dolor est iure
iusto nisi repellat rerum? At et officia repellendus sunt voluptates. Labore minus nemo, nisi numquam omnis
quod ut. Accusamus asperiores aut commodi dolor, et iste laborum necessitatibus nobis pariatur quaerat
ratione ullam vero voluptates. Alias consequuntur cupiditate dicta, eveniet explicabo iste laboriosam,
laudantium nihil nostrum numquam obcaecati sint tempora temporibus. Ab adipisci atque commodi consequatur
deleniti ducimus expedita explicabo fuga hic itaque, magni maiores neque obcaecati porro quibusdam quis
sequi sit vero. Architecto, debitis distinctio dolor dolore doloribus hic inventore ipsa, provident rem
reprehenderit sapiente sequi, sint! Alias asperiores aut eligendi, eum ex illo laudantium molestias mollitia
numquam repudiandae soluta sunt ullam ut. Accusantium consequatur delectus facere ipsa labore magni
molestiae nemo nesciunt, nobis non optio quam quo reiciendis, saepe similique vel voluptatum. Aliquid amet
consectetur deserunt dignissimos doloribus ducimus fugiat incidunt, perferendis ratione.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad aspernatur autem deleniti, dolor est iure
iusto nisi repellat rerum? At et officia repellendus sunt voluptates. Labore minus nemo, nisi numquam omnis
quod ut. Accusamus asperiores aut commodi dolor, et iste laborum necessitatibus nobis pariatur quaerat
ratione ullam vero voluptates. Alias consequuntur cupiditate dicta, eveniet explicabo iste laboriosam,
laudantium nihil nostrum numquam obcaecati sint tempora temporibus. Ab adipisci atque commodi consequatur
deleniti ducimus expedita explicabo fuga hic itaque, magni maiores neque obcaecati porro quibusdam quis
sequi sit vero. Architecto, debitis distinctio dolor dolore doloribus hic inventore ipsa, provident rem
reprehenderit sapiente sequi, sint! Alias asperiores aut eligendi, eum ex illo laudantium molestias mollitia
numquam repudiandae soluta sunt ullam ut. Accusantium consequatur delectus facere ipsa labore magni
molestiae nemo nesciunt, nobis non optio quam quo reiciendis, saepe similique vel voluptatum. Aliquid amet
consectetur deserunt dignissimos doloribus ducimus fugiat incidunt, perferendis ratione.</p>
<hr>
</div>
</div>
<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/1.20.2/TweenMax.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src="animation.gsap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script>
var controller = new ScrollMagic.Controller();
var processing;
$(document).scroll(function (e) {
if (processing)
return false;
if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.9) {
processing = true;
$.post('test.php', function (data) {
$('.content').html('<div class="block-news">' + data + '</div>');
$('.content .block-news').each(function () {
var $this = $(this);
var tween = TweenMax.from($(this), 1, {backgroundColor: "rgba(0,0,0,1)", opacity: 0, ease: Ease.easeNone});
var scene = new ScrollMagic.Scene({
triggerElement: this,
duration: '50%',
offset: 100 + "%"
})
.on("enter", function (e) {
$(this).css("z-index", "5");
})
.on("leave", function (e) {
$(this).css("z-index", "9")
})
.setPin(this , {pushFollowers: 0})
.setTween(tween)
.addTo(controller)
.addIndicators();
});
processing = false;
});
}
});
$('.block-news').each(function () {
var $this = $(this);
var tween = TweenMax.from($(this), 1, {backgroundColor: "rgba(0,0,0,1)", opacity: 0, ease: Ease.easeNone});
var scene = new ScrollMagic.Scene({
triggerElement: this,
duration: 70 + "%",
offset: 100 + "%"
})
.on("enter", function (e) {
$(this).css("z-index", "5");
})
.on("leave", function (e) {
$(this).css("z-index", "9")
})
.setPin(this)
.setTween(tween)
.addTo(controller)
.addIndicators();
});
</script>
</body>
</html>When i scroll down full height of document, load new div with data via $.post request from another document or PHP file I Need to Pin ajax loaded div with scrollmagic plugin, when user scroll up full height of this div, unpined it, and Pin next.
DEMO: http://185.154.52.186/
Please Help!
</div>
