ScrollMagic
ScrollMagic copied to clipboard
Is it possible to scroll at same time for left column and Right Column in Div..?
I have try with below code and spent too much time but I think it seems not feasible though let me know your feedback regarding the same with below code.
HTML Code:-
<div class="container-fluid">
<div class="row m-0">
<div class="col-xs-2 col-sm-3 col-md-3 col-lg-3">
<div class="Sticktitle">
<span class="Title">Lorem Ipsum</span>
<h2 class="Desc">Lorem Ipsum Lorem Ipsum</h2>
<p class="Point">Lorem</p>
</div>
</div>
<div class="col-xs-10 col-sm-7 col-md-6 col-lg-9">
<div class="desc">
<img src="images/image-one.jpg" class="img-fluid"/>
<div class="Section">
<p class="Title">Beer</p>
<div class="Para">
<p>
Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
</p>
<a href="#" class="offer" role="button" aria-pressed="true">Lorem Ipsum</a>
<a href="#" class="offer" role="button" aria-pressed="true">Lorem Ipsum
Lorem Ipsum</a>
<br />
<a href="#" class="offer" role="button" aria-pressed="true">Lorem Ipsum Lorem
Ipsum</a>
<a href="#" class="offer" role="button" aria-pressed="true">Lorem Ipsum</a>
</div>
</div>
</div>
</div>
</div>
</div>
This Code is working for Left Column Based Element - Sticktitle
new ScrollMagic.Scene({
triggerElement: '.container-fluid',
duration: 1150,
triggerHook: 0
})
.setPin(".Sticktitle", {
pushFollowers: false
})
// .addIndicators()
.addTo(controller)
This Code is not working for Right Column Based Element Properly - img-fluid
new ScrollMagic.Scene({
triggerElement: '.container-fluid',
duration: 1150,
triggerHook: 0
})
.setPin(".img-fluid", {
pushFollowers: false
})
// .addIndicators()
.addTo(controller)
It would be glad if I can hear something asap.