The Elton John Effect (ScrollTrigger pinned with SVG Color)

[lightyear 1 Likes (Newbie)]

Hello,

I saw this cool effect on www.eltonjohn.com and now really want to recreate it.

Unfortunately, I've reached my limits as far as the script is concerned.

Can someone explain to me how to get the start and end point of the trigger on the top edge of the panel? Then this should actually work...

 

Only the transition is better with the Elton John example, but they have overlaid the SVGs. Is there a better way to do this with the trigger?

 

Many thanks in advance

See the Pen vYpevYw by spitzbub (@spitzbub) on CodePen

[akapowl 5,482 Likes (Superhero)]

 

Welcome to the GSAP forums @lightyear

 

Most likely you will have to create a bunch of duplicates for things to work like that example in the first place - all of the ways to do it mentioned below, do so too.

 

You can either get an effect as such only by clever positioning and pinning...

 

See the Pen qBpPwqg by akapowl (@akapowl) on CodePen

 

 

 

Edit:

Here also is an alternative to the approach above with resize changes included.

 

See the Pen zYpEQKg by akapowl (@akapowl) on CodePen

 

 

 

...or alternatively by scrub-tweening on the height of a surrounding element from and to specific points, like in this older thread.

Alternatively to the height in that thread it could probably also be a clip-path or something in that direction.

 

 

 

 

 

You see, it sure is possible with ScrollTrigger - but setting it up to begin with, making it responsive to resizes and getting the proper ST setup up and running etc. can be much a bitmuch to grasp, so I'm also oing to give you the recommendation, that there are nifty libraries (not related to GSAP / ScrollTigger) out there, that can take care of most of that for you with regard to that type of effect. They can especially be very helpful if you want to do something like that in multiple places and different elements and setting things up manually via ScrollTrigger would be a whole lot of work.

 

Immerser is one that was mentioned by another user recently with regard to something similar.

 

I hope this will help a bit.

 

[lightyear 1 Likes (Newbie)]

Thank you so much for this solution!
Of course with this many duplications it would't be very nice. I will look at other libraries, as immerser. Thank you for the tip.

But sometimes you can't avoid something like that...

 

GSAP still offers me many advantages that I don't want to miss.

So until the next question that I can't solve on my own