Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nevanthegreat

Fire complete animation at once within ScrollTrigger with scrub

Recommended Posts

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

Link to comment
Share on other sites

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 :) 

  • Like 3
Link to comment
Share on other sites

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. :)

  • Like 1
Link to comment
Share on other sites

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 :P

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×