Scrollmagic GSAP

[dhiraj0641]

After each screen changes, background colour should change . I mean back-ground colour of thr images should changes. Using TimelineMax how to see change that.

Please see the site here : https://dhiraj10111995.github.io/scroll_screen/

[m3g4p0p]

Hi @dhiraj0641, this could be done using setClassToggle() – e.g.

/* Better avoid ID selectors though
as they  have a very high specifity */
#phone-floater-container.scene-02 {
  background: blue;
}

#phone-floater-container.scene-03 {
  background: red;
}

new ScrollMagic.Scene({
  triggerElement: '#phone-floater-container',
  triggerHook: 0,
  offset: 450,
  duration: '0'
})
  .setTween(getMobileSlide02Tl())
  .setClassToggle('#phone-floater-container', 'scene-02')
  .addIndicators()
  .addTo(controller)

new ScrollMagic.Scene({
  triggerElement: '#phone-floater-container',
  triggerHook: 0,
  offset: 1250,
  duration: '0'
})
  .setTween(getMobileSlide03Tl())
  .setClassToggle('#phone-floater-container', 'scene-03')
  .addIndicators()
  .addTo(controller)