Jump to content
GreenSock

renny

how to scall image on scroll

Recommended Posts

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 if they'd like - we just want to manage expectations.  

 

You can 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. 

Link to comment
Share on other sites

i have post minimal demo now

 

can you please help to get this result 

 

Thanks

Renny

Link to comment
Share on other sites

thanks for this solution

 

But how to second image load as per video ?

 

Thanks

Renny

Link to comment
Share on other sites

Just put another image in your demo below the first one. 

 

Please give it a try and if you need help, provide a new minimal demo (like a fork of the CodePen). Keep in mind that these forums are not intended to provide free "build-to-order" custom consulting services, but we're happy to answer GSAP-specific questions (like about the API). 

Link to comment
Share on other sites

i put another image on there, but not work 

 

can you pelase check that ?

 

Thanks

Renny

Link to comment
Share on other sites

Thanks for your solution 

 

but i think it's wrong, basically when first image fit to screen then it's pin and second image scroll up into first image 

 

check video i add in topic

 

Thanks

Renny

Link to comment
Share on other sites

Here you go: 

See the Pen LYdpdKJ?editors=0110 by GreenSock (@GreenSock) on CodePen

 

This will likely be my last answer here, @renny - I have reworked 3 demos for you as a courtesy and you haven't even acknowledged my repeated warnings about your requests violating the forum guidelines

 

I hope this has been helpful. If you need more, you're welcome to seek paid assistance in the "Jobs & Freelance" forum.

 

Good luck with the project!

Link to comment
Share on other sites

thanks you so much for this solution 

 

finally i get same result 

 

Last one can you help me sortout issue into my projects ?

 

i update your code into my code file and something happen there or i think that code are conflict

 

Thanks

Renny

Link to comment
Share on other sites

just tell me how to stop stigger if this last image are display in full screen 

 

See the Pen GRxpQOM by solace-digital (@solace-digital) on CodePen

Link to comment
Share on other sites

Hi Renny - I don't understand this question I'm afraid.

Also just echoing what Jack mentioned. You're repeatedly asking for people to adjust your demos without acknowledging that your requests are violating the forum guidelines

 

Stagger documentation is here - https://greensock.com/docs/v3/Staggers

If you have a specific question about how staggers or scrollTrigger works, we're very happy to answer, but please take the time to explain your question in detail so that we can respond.

 

Link to comment
Share on other sites

it's too simple when "We are a leading video" section start i need to stop trigger on above image load into full screen 

 

and this si not a adjust demo, i just want to some way how to solve this issue 

 

Thanks

Renny

 

 

Link to comment
Share on other sites

I don't understand what that means Renny.

Are you asking how to unpin the purple image? 

Link to comment
Share on other sites

1 minute ago, Cassie said:

I don't understand what that means Renny.

Are you asking how to unpin the purple image? 

yes exactly,
that is last image from list and after last image load and fit screen need to unpin

Link to comment
Share on other sites

Ok! So right now the 'end' value for that image is set to 'max' - That means the end of the webpage.

Why don't you try changing that value and see if you can achieve the result you're after.

You can even define another element as an end Trigger - so you could use that 'leading video' section as an end trigger.
 

endTrigger: "#anotherelement",


Give it a go yourself and check back if you have questions about how it's working.

Link to comment
Share on other sites

i have alrady try with add some value and another class, but not get exact result as per my video post

 

can you check my codepen and try with some your logic ?

 

Because im almost there to get result 

 

Thanks

Renny

 

 

Link to comment
Share on other sites

Hi again Renny - There's no change to your codepen at all so I'm not sure what to check.

 

Here - this is slightly adjusted. I changed 'max' to "+=200px"

See the Pen RwMWvmx?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

i see that, but if we set value so that image not display full and not touch to top 

 

if you don't mine can you check this video ? so you will better understand what i need 

 

 

 

Link to comment
Share on other sites

Sure - Then you don't need to pin it at all - you can just remove the code that's pinning it.

Link to comment
Share on other sites

So can you do it on your code? So i can check with result and update my code

Link to comment
Share on other sites

Here is a pen with another adjustment 

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



I'm going to close this thread now as despite being warned you're still continuously asking for us to make adjustments for you. We're happy to guide, educate and explain the API. But you have been provided with the information necessary and are still asking for us to write the code.

This is not what the forums are for.

Feel free to pop back if you have questions about the API - but I'm afraid we don't have the resources to do your projects for you. 

  • Like 2
Link to comment
Share on other sites

  • Cassie locked this topic
Guest
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
×