How to scale an element's size up and down - Scroll trigger

[wasii_.]

Hey gsap community!
I'd like to copy this site's hero, can anyone help me do this?. i have created a simple demo to make the functionality. please help me 

https://www.pinkponycreative.com/

See the Pen zxOqxpm by waseem-majeed-the-looper (@waseem-majeed-the-looper) on CodePen.

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[mvaneijgen]

Hi @wasii_. welcome to the forum!

 

What in particular do you want to copy? I see some text changing and a pink horse rotating, but in your demo I see four boxes scaling up?

 

As with everything in GSAP it starts with an animation, so what I would do if I were you is break down the animation you want to happen in steps and tackle one step at a time. The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  

Currently you already have three ScrollTriggers and you'll be creating more and more and your code will become a lot more complex if you keep focusing on the scrolling part. So again remove ScrollTrigger and create an animation then when you're done with the animation it will be easy to hook it to ScrollTrigger. 

 

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ and check out our ScrollTrigger Youtube video. Hope it helps and happy tweening!