Responsive Site

[kerubq]

Hello,

 

I just started using GSAP and ScrollMagic two days ago.

 

My question is what is the best way to approach responsiveness? 

 

I set my initial elements positions with CSS absolutes and transform: translate. I then animate them via {y: "number%"} or {y: number} but I started using {yPercent: number} which gives me better responsiveness result but not pixel perfect.

 

Enjoying GSAP w/ ScrollMagic!

 

Thank You.

[ZachSaucier]

Hello kerubq and welcome to the GreenSock forums.

 

ScrollMagic isn't a GreenSock product and we don't support it here so you may not get much of a response from other forum members.

 

With that being said, it's generally best to keep all transforms done with GSAP and not mix CSS styles with GSAP because it makes it harder for GSAP. We do our best to make it work but we can't fix every case.

 

Maybe this thread can help you: 

 

[kerubq]

Thank you! 

 

I am still a bit confused with what you mean by keeping all transforms done with GSAP and not mix CSS styles with GSAP. If I have CSS on a div with

position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)

and at some point on the site transform that div with GSAP by

.to(someDiv, 3, {yPercent: -55})

is that considered mixing css styles with gsap? If so, I am guessing I should be using .set() to position all my elements on page load.

 

Sorry, I am still trying to wrap my head around this.

[ZachSaucier]

On 11/2/2019 at 12:48 PM, kerubq said:

If so, I am guessing I should be using .set() to position all my elements on page load.

Yes, that's what I mean  That way GSAP is fully accountable for the transforms on the element. Most the time it accounts for it properly, but sometimes it can't and so it's good to be in a habit of telling GSAP the transforms from the start.