Smooth background color change

[maxvia]

import React, {useEffect, useRef} from "react"
import SEO from "../components/seo"
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

//Homepage components 

import Banner from '../components/homepage/Banner'
import IntroductionText from '../components/homepage/introduction/IntroductionText'
import IntroductionSlider from '../components/homepage/introduction/IntroductionSlider'
import HorizontalCarousel from '../components/homepage/HorizontalCarousel'
import Rooms from '../components/homepage/rooms/Rooms'
import Activities from '../components/homepage/activities/Activities'
import Spa from '../components/homepage/spa/spa'
import Instagram from '../components/homepage/instagram/InstagramGallery'




const IndexPage = () => {

  let roomsContainer = useRef(null)
  let spaContainer = useRef(null)
  let mainContainer = useRef(null)

  useEffect( () => {
    gsap.registerPlugin(ScrollTrigger)
      
    //spa 
    gsap.fromTo(mainContainer, {backgroundColor: 'white'}, {
      duration: 3, backgroundColor: '#899781', ease:"linear", 
        scrollTrigger: {
          trigger: spaContainer,
          // markers:true,
          start:"top 50%", //when top of herman passes 75% viewport height
          end:"bottom 0%", //when bottom of herman passes 25% viewport height
          
               //events: onEnter onLeave onEnterBack onLeaveBack
          toggleActions:"play pause play none"
              //options: play, pause, resume, reset, restart, complete, reverse,none
        }
    })
    
      //rooms
      gsap.fromTo(mainContainer, {backgroundColor: 'white'}, {
        duration: 3, backgroundColor: '#fcefee', ease:"linear", 
          scrollTrigger: {
            trigger: roomsContainer,
            // markers:true,
            start:"top 50%", //when top of herman passes 75% viewport height
            end:"bottom 0%", //when bottom of herman passes 25% viewport height
            
                 //events: onEnter onLeave onEnterBack onLeaveBack
            toggleActions:"play reset restart none"
                //options: play, pause, resume, reset, restart, complete, reverse,none
          }
      })  

  })

    return (
      <div 
        ref={el => mainContainer = el}
      >
        <SEO title="Home" />
        <Banner/>
        <IntroductionText />
        <IntroductionSlider />
        <div 
          ref={el => roomsContainer = el}>
          <Rooms /> 
        </div>
        <div
          ref={el => spaContainer = el}>
          <Spa />
        </div>
        <Activities />
        <section>
          <Instagram />
        </section>
        <div>This is last</div>
      </div>
    )
  }

export default IndexPage

Hi Guys,

 

I am trying to have my app background color change depending or where I am in my app. I tried to play with the "play pause resume etc..." features however I dont seem to get it. 

I mostly have problems when I enter back the divs that doesnt make it smooth at all. Seems like features are overriding. 

Any advice on how you would do it to make is as smooth as possible? 

 

Thank you! 

[akapowl]

 

Hey @maxvia

 

You are using 'restart' for the onEnterBack in your toggleActions, so when you scrolled back up, the backgroundColor would tween from white to #fcefee again. What you probably mean instead is a 'reverse'. But from reading in other posts on backgroundColor changes, I can tell, that even then it would be problematic to handle the backgroundColor-change with a setup like this.

 

Instead, you could/should setup individual tweens in the callbacks, like in this scenario

 

See the Pen d3c666ab441f15a8ea0da4a57535ea49 by akapowl (@akapowl) on CodePen

 

Give it a try, and let us know, if this works out for you.

 

[maxvia]

works great! thanks!