Use function at "top" property

[GwSr]

Hi guys!

I love your tool for animation but I really struggle to create my idea into workable, responsive project. And I wasted couple weeks to find a solution of the problem.

 

I thought I must use a function inside the "top" property to set the if condition based on window.innerWidth although it still use original value 130vh.

Also I remove all media queries in css because ScrollTrigger give a bug that it can't set a proper start and end positions of an element.

 

I'm waiting for your thoughts and advices.

 

See the Pen QWMvVJJ by gwsrleadmadowl (@gwsrleadmadowl) on CodePen

[Cassie]

Hi @GwSr

Welcome to the forums, this looks like a fun project.

 

Could you explain what you're trying to acheive animation-wise? It's likely there's a better route to solving this but we'll need to know what the goal is.

 

 

Thanks!

[GwSr]

Thanks for your respond @Cassie!

My first goal was to make transparent "fg_2b" and "fg_2a" when a viewport going to section blogs that allows us to see the "street" image in my webpage.

As usually, I used media query to put every images as I wanted and then I used a GSAP ScrollTrigger to make my elements transparent.

On desktop resolution it works fine for me but on mobile and tablet it's don't.

I used a "top" parameter of css to put my images on website and use a function to set condition of window's width to change values depends on width.

Maybe I used to an yPercent for manipulation of images. Actually it also isn't make a wanted result or also don't affect on it( 

[GwSr]

20 hours ago, Cassie said:

Hi @GwSr

Welcome to the forums, this looks like a fun project.

 

Could you explain what you're trying to acheive animation-wise? It's likely there's a better route to solving this but we'll need to know what the goal is.

 

 

Thanks!

Thanks for your respond @Cassie!

My first goal was to make transparent "fg_2b" and "fg_2a" when a viewport going to section blogs that allows us to see the "street" image in my webpage.

As usually, I used media query to put every images as I wanted and then I used a GSAP ScrollTrigger to make my elements transparent.

On desktop resolution it works fine for me but on mobile and tablet it's don't.

I used a "top" parameter of css to put my images on website and use a function to set condition of window's width to change values depends on width.

Maybe I used to an yPercent for manipulation of images. Actually it also isn't make a wanted result or also don't affect on it( 

[Cassie]

Hey @GwSr,

 

If you're trying to achieve different things based on screen size you can use scrollTrigger.matchMedia()

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

Does this help?

[GwSr]

Yes! That's what I wanted. Thank you ❤️

See the Pen bGrRjyB by gwsrleadmadowl (@gwsrleadmadowl) on CodePen

Next I'll write an another post with an another problem 😣