CODEWITHSUNDEEP
javascriptanimationscrollmagic
Floriano
Floriano

Reputation: 93

pin element with scrollmagic related to div

I have created a simple animation with ScrollMagic: a wheel rotating while horizontally scrolling the page. The problem is that when scrolling the window page the animation appears smooth, while when scrolling just the div inside which the element is placed, the animations is quite "jerk".

I would like to hide the window scroll leaving just the div scroll, keeping the animation smooth.

Does anyone know why and how to solve this problem?

var controller = new ScrollMagic.Controller({
  vertical: false
});

var tween = TweenMax.to("#weel", 1, {
  rotation: 1080,
  ease: Linear.easeNone
});

var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 5000
  })
  .setTween(tween)
  .setPin("#weel", {
    pushFollowers: false
  })
  .addIndicators() // add indicators (requires plugin)
  .addTo(controller);

body {}

.weel img {
  width: 100px;
}

#scrolldiv {
  height: 500px;
  width: 5000px;
  background: url(bgterritorio.jpg);
  position: relative;
}

.scrollcontainer {
  overflow-x: scroll;
  white-space: nowrap;
  position: relative;
}

<div class="scrollcontainer">
  <div id="scrolldiv" class="scrolldiv">
    <div class="weel">
      <img id="weel" src="weel.png" alt="">
    </div>
  </div>
  <div id="trigger">
  </div>
</div>

Upvotes: 3

Views: 1990

Answers (1)

Floriano
Floriano

Reputation: 93

Solved! It was necessary tell ScrollMagic which container the animation is referred to. In my case, I just add:

container: '.scrollcontainer'

to the controller object

Upvotes: 1

Related Questions