Jump to content
Search Community

The Elton John Effect (ScrollTrigger pinned with SVG Color)

lightyear test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts


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

Link to comment
Share on other sites

  • Solution


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





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.


  • Like 5
Link to comment
Share on other sites

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

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