Jump to content
Search Community

How to extend animation until after ScrollTrigger's end value has met scroller-end?

kanguyen-vn test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

Hi! I am very new to GSAP and have been exploring its ScrollTrigger library. This may be a very nooby question, but I am trying to recreate the hero design from this page: Reveal Studio. I feel like I am almost there; however, I don't know how to make it so that the animation goes until even after the hero section has ended like in the website. In other words, I want there to still be images floating upward after the end marker has met scroller-end. In my CodePen, the animation ends prematurely (vs. how I want it to) when the two markers meet, and there's basically an awkward silence as I wait for the hero section to finally go up ?.

 

Basically, I have 3 main questions:

 

  1. Am I even doing the right thing by using ScrollTrigger in this manner, or is there a much better way to accomplish this?
  2. If I am, how can I improve my current code?
  3. What is the optimal way to achieve the staggered effect in the linked website, if my method of changing the durations is not?

 

Sorry I didn't explain that the best, I'm still new to GSAP nomenclature. Please let me know if you need clarification on anything! Thank you all very much! Also, sorry if the answer to this problem already exists somewhere, I promise I tried my best to look around ?

See the Pen YzRPZLY by Kiet-Nguyen-the-looper (@Kiet-Nguyen-the-looper) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,

 

Thanks so much for the demo. It definitely helped me experiment with a solution.

 

One way of doing this is to have 2 separate ScrollTriggers. One that pins the hero section and another that animates the bars.

In order to do this I had to quickly reparent the bars in another div. I also messed around with some of the position values of the bars and durations slightly.

 

See the Pen RwqNVEX?editors=0100 by snorkltv (@snorkltv) on CodePen

 

I'm sure it could use some tweaking, but hopefully you see that a big advantage of this setup is that you can adjust the end position of the pinned hero so that it can detach independent of the bars animating and you can play with the values a bit.

 

Also, it will look better when the window is taller. In the vertically challenged embed above the effect gets a bit lost.

 

For this type of effect there is nothing wrong with using different durations for the bar animations. Someday you may want to look into ScrollSmoother which has some very handy parallax capabilities built in.

 

I'm calling this the Double ScrollTrigger Pin and Parallax. It may come to a CreativeCodingClub.com lesson someday soon ;)

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

So that is the fabled parallax effect! It's obvious I'm still very new to all of this ?. I wasn't able to look it up because I was associating parallax with something very particular, but this makes sense! Thanks so much @Carl, for the quick response too! One very minute thing is I don't know why in your CodePen the z-indices don't work quite right, although I applied this change to my actual project code and it works perfectly. Thank you anyway again!

  • Like 2
Link to comment
Share on other sites

Glad it helped and that it's working in your project.

I very quickly did the css/html changes just to illustrate how it could work using what you already had.

If I was to start from scratch I'd probably take more time making sure the css and layout made sense for what was needed for the animation effect, responsiveness, etc.

 

Unfortunately, I just don't have the time to chase down additional css issues.

 

 

 

 

Link to comment
Share on other sites

Oh no I wasn't requesting you to go through the code at all! Thank you again. I was just wondering if it was some kind of side effect I'd need to look into, which I might if I have time, but since it's working for my project, I'll just assume that it's not ?.

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