unable to use startAt in fromTo

[denverCoder9]

Hi guys, I'm probably doing something wrong but quick question.

I want property backgroundPositionY to have delay and start a bit later but property opacity to work normal 0-100%

So basically I want it to start fading out with opacity and somewhere in beetween at 50% to start moving its position

here's the code that works so far

 

    gsap.fromTo(
      element.querySelector(".moon-bg2"),
      {
        opacity: 0,
        backgroundPositionY: "50%"
      },
      {
        opacity: 1,
        backgroundPositionY: "100%",
        scrollTrigger: {
          trigger: element.querySelector(".sec-1"),
          start: "top top",
          end: "center center",
          markers: false,
          scrub: true
        }
      }
    );

and here is what I tried to do:

 

    gsap.fromTo(
      element.querySelector(".moon-bg2"),
      {
        opacity: 0,
        backgroundPositionY: "50%"
      },
      {
        opacity: 1,
        startAt: {y: "300px", backgroundPositionY: "100%"}, // <<--- this this here
        scrollTrigger: {
          trigger: element.querySelector(".sec-1"),
          start: "top top",
          end: "center center",
          markers: false,
          scrub: true
        }
      }
    );

so if anyone wants to take a look I would be very tankful, 

do tell me if you need more info

 

[Carl]

Hi and welcome to the GreenSock forums,

 

This sounds like a great use for a simple timeline with 2 tweens:

• 1 that fades the element 
• 1 that moves the element (or bg position) and starts later

 

See the Pen zYZEdjj?editors=1010 by snorkltv (@snorkltv) on CodePen

 

If you need help with timelines and sequencing please see: 

 

If you need more help please provide a minimal demo.