Jump to content
Search Community

ScrollTrigger SVG color change

xoxoxoxo test
Moderator Tag

Recommended Posts

Loving gsap so far!

 

I have an absolute position div which has nested svg. 

 

I'm trying to animate it's height to 0 simultaneously as I move the panel's Y position up. I had to play around with the duration of this because it needed to end earlier than the panel's Y position. It's not super accurate but you can see it jiggle a bit and if I change height or svgs I have to find the duration sweet spot.

The duration seems off on diff screen sizes*

Is there a way where I can make this accurate?

See the Pen poyVjYQ by nullhoooook (@nullhoooook) on CodePen

Link to comment
Share on other sites

 

Something like this seems to be working quite okay:

 

See the Pen 54147fe1b1036da4125c58b2712afc8d by akapowl (@akapowl) on CodePen

 

 

I took the logo-anim out of of the other tl and for whenever the section has a logo, a new ScrollTrigger with a new timeline is created for the logo, with its start based on the section's index and its end being after the amount of pixels equivalent to the logo-height has passed.

 

Does that make sense?

 

Also, I added invalidateOnRefresh: true and changed your start and end to be functional, so you have no troubles, when resizing.

 

Does this feel like what you wanted to achieve?

 

 

 

Edit:

 

Added another logo to that purple-section in the following pen, just to see if its alright. Seems to be working fine.

 

See the Pen 02fde0cc8a3ac5d9ea4c5fe457acfeec by akapowl (@akapowl) on CodePen

 

 

 

 

  • Like 3
Link to comment
Share on other sites

This works, yea!


A few questions I have:

1. Why do you need invalidateOnRefresh when ScrollTrigger automatically re-computes on resize?
2. I don't quite understand what the start function is doing. The index is useful in what way here?  isn't index the position in the array and not visually.

3. Why do we need another timeline and scrolltrigger? Is it not possible to utilize the previous one?

 

Link to comment
Share on other sites

9 hours ago, nullhook said:

Why do you need invalidateOnRefresh when ScrollTrigger automatically re-computes on resize?

 

This probably isn't neccessary for the first overall-ScrollTrigger, that handles the panels - but in my scenario, it is definitely neccessary for the individual logo-ScrollTriggers, because they are dependent on the window.innerHeight, they are being fed.

 

If you were not to invalidate and use those function-based values, they would always be handling stuff with the initial value, they had been given, so if you shrunk down the window for example, the whole 'timing' would be out of sync.

 

 

 

9 hours ago, nullhook said:

I don't quite understand what the start function is doing. The index is useful in what way here?

 

The ScrollTrigger that handles the .panels has its start and endpoint set, so it is active for the complete scroll-duration of your page.

 

To sync the individual ScrollTriggers up to each section, I utilize the index of the panel, that the logo is contained within.

 

start: () => 'top -' + (window.innerHeight * i)

 

basically says: 

 

"start this logo animation, when the top of my container is 'window.innerHeight * i' above the top of the window (out of viewport to the top)."

 

So the first logo-animation (for the logo in the first panel - which has the index of 0) starts after the window has been scrolled 'window.innerHeight * 0' = 0px - right at the start of scrolling.

 

The second logo-animation (for the logo in the second panel - which has the index of 1) starts after the window has been scrolled 'window.innerHeight * 1' = so when the second panel starts leaving the screen at the top and the third panel enters the screen at the bottom, and so forth...

 

 

 

 

9 hours ago, nullhook said:

Why do we need another timeline and scrolltrigger? Is it not possible to utilize the previous one?

 

You probably could, as you have come close to doing it in your initial demo, but I think, getting to the right timing would be way more difficult.

Also, doing it that way, you might end up animating a logo, that you would not want to animate later on.

 

 

Hope this helps.

Cheers.

 

 

  • Like 2
Link to comment
Share on other sites

Great explanation!


I'm having issues on this on my codebase.

I've done some debugging myself and happen to found out these:

1. The start of the first ScrollTrigger of logo starts with the end of the window.innerHeight — For ex, If my window height is 947px the start is 940 and end is 940+logoHeight. This seems weird, no?


2. If set pin: true on logo ScrollTrigger the top and end are correct but the animation doesn't work as expected and original pinning of the container is all screwed. Also, the top now starts with 0.001 and not exactly 0 (this is if I set pin: true). What's with the odd .001 value?

 

3. If I change the first ScrollTrigger's (the container one) end to "+=400%" or any number, the top and end of logo ScrollTrigger also has a side effect on this — For ex, if my window height is 947px the start is 3788.001

4. I tried setting the start string manual like this: start: () => 'top -0' and still my logo's ScrollTrigger start value is 947 and end is 940+logoHeight

 

Edit: Seems like the second ScrollTrigger picks up the start value of the first ScrollTrigger. If my first ScrollTrigger ends at 947px then my second one `top -0` basically is 947px instead of 0. What's going on?


Any help on this would be highly appreciated.

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