parallax overlay text

[Abdo2000 0 Likes (Newbie)]

Hello guys, i saw this website (https://demo.themetorium.net/html/tank/portfolio-list-overlay.html) i think he is using animation, I'm new to the community and i would like to know how to do the effect on images(The scale and overlay text), thanks

[Rodrigo 5,376 Likes (Superhero)]

Hi @Abdo2000 and welcome to the GreenSock forums!

 

Those effects can be done with ScrollTrigger:

See the Pen oNwmPmY by GreenSock (@GreenSock) on CodePen

See the Pen OJzZpVZ by GreenSock (@GreenSock) on CodePen

 

Then you can add ScrollSmoother to the mix and it looks even better:

See the Pen PoOpobM by GreenSock (@GreenSock) on CodePen

See the Pen bGaWjpw by GreenSock (@GreenSock) on CodePen

 

ScrollSmoother is a benefit of Club GreenSock members though, but is worth exploring all the perks and tools you get.

 

For the mouse follow animation this is a good starting point:

See the Pen xxpbORN by GreenSock (@GreenSock) on CodePen

 

Also check this thread:

 

Finally, if you're just starting with GSAP, I would start with some simple things and then move up to more complex animations.

 

If you get stuck and have any GSAP related question, let us know and don't forget to include a minimal demo.

Happy Tweening!