Fire complete animation at once within ScrollTrigger with scrub

[nevanthegreat]

Hello Club Green Sock!

 

I was reading about the common Scroll Trigger mistakes  looking for a solution to this question. I think may be going about this the wrong way, but...

 

I have a timeline

 

      let hardwareTimeLine = gsap.timeline({
        scrollTrigger: {
          trigger: ".centering-container",
          scrub: true,
          pin: true,
          pinSpacing: true,
          start: "top",
          end: "150%"
        }
      });

      hardwareTimeLine
        .from(".hero-header", {})
        .fromTo(".animated-header", {autoAlpha: 1, top: "29%"}, {autoAlpha: 0, top: "27%"})
        .fromTo(".scaling-container", {duration: 1, scaleX: 1.6, scaleY: 1.6, transformOrigin: "50% 50% 0", backgroundPosition: "center"}, 
          {duration: 1, scaleX: .6, scaleY: .6, transformOrigin: "50% 50% 0", backgroundPosition: "center"}, "<")
        .fromTo(".screen-inner-1", {duration: .5, transform: "translateX(0)"}, {duration: .5, transform: "translateX(-103%)"})
        .fromTo(".screen-inner-2", {duration: .5, transform: "translateX(103%)"}, {duration: .5, transform: "translateX(0)"}, "<")
        .from(".icons-tray", {y: 150, autoAlpha: 0});

and I was wondering if there was a way to put a tween inside the timeline that is attached to the Scroll Trigger at the very end of my last ".from", if that makes sense?

 

I tried

.tweenTo()

but that didn't seem to give the effect I am searching for.

 

For example (see my codepen, you may need to look it at on full screen) I would like the grey box (".icons-tray") to tween up on it's own and only be started by the scroll trigger.

 

Can anyone point me in the right direction of the way to approach this effect or have a working demo that shows this?

 

Thank you so much!!!

See the Pen zYqVOLz by EvanScorpion (@EvanScorpion) on CodePen.

[ZachSaucier]

Hey nevan. There's a couple of ways you can do that:

1. Move the animation for ".icons-tray" to be standalone then attach it to an additional ScrollTrigger. Then you need to calculate where it should start.
2. Still have the animation be standalone but use the ScrollTrigger's onUpdate callback along with its .progress to tell when the standalone animation should play. This is probably the easier of the two options. I demonstrate this below:

See the Pen eYZwOwR?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

FYI you asked a good question so I edited the title so that hopefully people can find this post more easily  

[nevanthegreat]

2 minutes ago, ZachSaucier said:

Hey nevan. There's a couple of ways you can do that:

1. Move the animation for ".icons-tray" to be standalone then attach it to an additional ScrollTrigger. Then you need to calculate where it should start.
2. Still have the animation be standalone but use the ScrollTrigger's onUpdate callback along with its .progress to tell when the standalone animation should play. This is probably the easier of the two options. I demonstrate this below:

 

See the Pen

See the Pen eYZwOwR?editors=0010 by GreenSock (@GreenSock) on CodePen.

by GreenSock (@GreenSock) on CodePen

 

 

FYI you asked a good question so I edited the title so that hopefully people can find this post more easily  

THANK YOU SO MUCH ZACH!! This is EXACTLY what I need. This is going to be my finest work of art when it's done. I can't wait to share it with you guys.

[nevanthegreat]

On 9/30/2020 at 3:12 PM, ZachSaucier said:

Hey nevan. There's a couple of ways you can do that:

1. Move the animation for ".icons-tray" to be standalone then attach it to an additional ScrollTrigger. Then you need to calculate where it should start.
2. Still have the animation be standalone but use the ScrollTrigger's onUpdate callback along with its .progress to tell when the standalone animation should play. This is probably the easier of the two options. I demonstrate this below:

 

 

 

FYI you asked a good question so I edited the title so that hopefully people can find this post more easily  

Hey Zach sorry to bug you again. My goal with this is to make it into a slider with progress dots and caret's etc etc. I am wondering what's the proper way to attach multiple elements to the progress (much like the icons tray). Such that as the tray slides up, the caret's slide in and the dots slide down.

 

I was trying to attach the tweens to the if statement you set up like this:

onUpdate: self => {
  console.log(self.progress)
  if(self.progress > 0.8) {
    treyAnim.play();
    caretAnimLeft.play();
  } else {
    treyAnim.reverse();
    caretAnimLeft.reverse();
  }
}

const treyAnim = gsap.from(".icons-tray", { y: 50, autoAlpha: 0, paused: true });
const caretAnimLeft = gsap.from([caret-class], { x: 50, autoAlpha: 0, paused: true});

It's definitely not the right way to do it because it causes some whacky things to happen

Can you point me in the right direction for this effect?

[ZachSaucier]

More if statements isn't a bad way to go about doing it. The only thing I see explicitly wrong in the code that you gave is the target for your caretAnimLeft tween. [caret-class] isn't valid JS.

 

Perhaps it'd be helpful if you made a minimal demo for us to look at.