Jump to content
Search Community

Sliding Window

Matej Kočevar test
Moderator Tag

Recommended Posts

Hi guys!

 

I'm working on my first GSAP animation and wonder if there is a way to achieve the following moves with the green window and four red articles from my Codepen example while scrolling down:

  1. Window slides in from the left side of the screen and lands on article1. Article1 is now inside the window.
  2. Window stays on article1 and expands to article2. Both article1 and article2 are now inside the window.
  3. Window shrinks and leaves article1. Only article2 is now inside the window.
  4. Window stays on article2 and expands to article3. Both article2 and article3 are now inside the window.
  5. Repeat steps  2. and 3. till the end
  6. At the end, window slides out of the screen from article4.

 

So far, I managed to make the window move across the screen, but how would I make it stop and expand for each article? Should I call a new gsap.to() for each article?

 

Thank you for any help.

See the Pen KKzMxWg by matejkocevar (@matejkocevar) on CodePen

Link to comment
Share on other sites

Hey Matej and welcome to the GreenSock forums.

 

I think it would help you if you completely forgot about ScrollTrigger while creating your animations. You can easily add it in once you have created the animations the way you want them to be. 

 

1 hour ago, Matej Kočevar said:

how would I make it stop and expand for each article? Should I call a new gsap.to() for each article?

Yes, you will need to create a new tweens for each animation for each box. There are really only two animations per box you need to consider:

  1. Animate the green "window" to the start position of a particular box, also animating the width to fit just that box if need be.
  2. If there's a next box, animate the green window's width to include the next box also.

Then you do the above for each box. With logic like that, it's a great use case for using a loop! I talk more extensively about doing so in my article on animating efficiently which I highly recommend.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 2 months later...

Hey, I'm back with a new question.

 

Right now, on the Codepen above, scrolling controls the whole animation, both moving and resizing the window. Meaning you can stop scrolling at any time and the window would stop at its current position.

 

What I'd like to achieve is an animation where scrolling only selects the one next or previous box and then the window is resized by itself. That way, when you stop scrolling, the window frames only one of the boxes and is not stuck somewhere in between.

 

How would I achieve that?

Link to comment
Share on other sites

Sounds like you need to use ScrollTrigger's snapping functionality. You can read more about it in the ScrollTrigger docs. Most likely it'd be easiest to replace the tweens with staggers that you have with a loop and actual tweens instead. That way it's easier to place labels. But you could do it while using your current tweens if you calculated where the labels should go yourself (based on the duration and timings). 

  • Thanks 1
Link to comment
Share on other sites

  • 2 weeks later...

Thanks for the snapping tip.

 

Quote

replace the tweens with staggers that you have with a loop and actual tweens instead

I'm not sure what do you mean by that - I already have a loop, what would be the difference between old tweens with staggers and the new actual tweens?

 

So far I put labels on tweens that are collapsing the window and snapping seems to work fine:

See the Pen BazVjvN by matejkocevar (@matejkocevar) on CodePen

 

Questions:

  1. I wish the window would snap to the next box a bit sooner, but if I've set snapTo: "labels", that can't be manipulated?
     
  2. When I enable snap in ScrollTrigger, I get the console warn below, is there a way to fix it?
"Invalid property" "scrollBehavior" "set to" "auto" "Missing plugin? gsap.registerPlugin()"
Link to comment
Share on other sites

5 hours ago, Matej Kočevar said:

I already have a loop, what would be the difference between old tweens with staggers and the new actual tweens?

I think I was misunderstanding your original approach.

 

5 hours ago, Matej Kočevar said:

When I enable snap in ScrollTrigger, I get the console warn below, is there a way to fix it?

I'm not following. You have snap: "labels" on your ScrollTrigger and I don't see any warning. How do I recreate the issue?

 

5 hours ago, Matej Kočevar said:

I wish the window would snap to the next box a bit sooner, but if I've set snapTo: "labels", that can't be manipulated?

You can change the snapping duration and easing by using the object form as covered in the docs. Is that what you're asking?

Link to comment
Share on other sites

4 minutes ago, ZachSaucier said:

How do I recreate the issue?

Just found out the warning appears only in Safari.

 

16 minutes ago, ZachSaucier said:

Is that what you're asking?

Right now, you have to scroll the green window all the way to the farthest edge of the next box to make the snap happen. I'd like to cut that distance in half.

When reading the docs you mentioned, I thought this could be only possible with an array (eg.  snapTo: [0, 0.1, 0.5, 0.8, 1]), so I wouldn't be able to use the "labels" value (snapTo: "labels"). Is that correct?

Link to comment
Share on other sites

34 minutes ago, Matej Kočevar said:

Right now, you have to scroll the green window all the way to the farthest edge of the next box to make the snap happen. I'd like to cut that distance in half. ... I thought this could be only possible with an array (eg.  snapTo: [0, 0.1, 0.5, 0.8, 1]), so I wouldn't be able to use the "labels" value (snapTo: "labels"). Is that correct?

The only thing that the labels or array values are doing is setting the end snap position. ScrollTrigger just snaps to the closest value when the user stops scrolling. What it sounds like you're wanting is to customize that logic so that ScrollTrigger doesn't just snap to the closest value. Instead you'd like it to be more likely to snap to the next label than the previous one.

 

The only way to do that sort of thing using ScrollTrigger's snapping object is to change the proportions of the durations and the easings of your tweens in your timelines. For example something like this:

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

 

With that being said, you could use a custom snap function to not be limited in that way but it takes a little more setup:

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

  • Like 1
  • Thanks 1
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.
×
×
  • Create New...