Jump to content
GreenSock

GwSr

Use function at "top" property

Go to solution Solved by Cassie,

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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( 

Link to comment
Share on other sites

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( 

Link to comment
Share on other sites

  • Solution

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?

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×