Animate divs on scroll

[kkkl]

Hey guys, I've just started learning Gsap and would really like some help. https://rupert-rothschildvignerons.com/ The first transition on this site from the landing page is what i'm trying to achieve. I tried using simple css animation to transform and scale the three divs on scroll , but it isn't working. Any ideas on how this can be done? 

[GreenSock]

Welcome to the forums, @kkkl.

 

There are many effects on that initial page and transitions, so I'm not entirely sure what you're talking about. Unfortunately we don't have the resources to do custom development for free or deconstruct a live site and then do a tutorial explaining the steps involved, but we'd be happy to answer any GSAP-specific questions you might have. 

 

GSAP will let you do almost anything animation-wise, so I'm pretty confident you'll be able to do whatever effect you see there but I can't be sure without seeing exactly what you're talking about. Maybe record a video showing just the effect you're after. But again, these forums are really focused on just answering GSAP-specific questions. 

[akapowl]

 

2 hours ago, kkkl said:

I tried using simple css animation to transform and scale the three divs on scroll , but it isn't working. Any ideas on how this can be done? 

 

For the three bars moving on scroll, you'll want to take a look on the ScrollTrigger-Plugin, @kkkl

 

With the right CSS setup in combination with a scrub-controlled scroll-triggered tween that should be quite straight forward actually.

 

The bars could be positioned absolute in that second section for example and when that second section hits the bottom of the window (which would be a start of 'top bottom' together with an end of "+=100%" e.g. ) you could probably just tween them from their initial position in there to yPercent: -100. I'd suggest just giving it a shot yourself, as this actually feels like a good example case to get yourself started with ScrollTrigger.