renny Posted July 4, 2022 Share Posted July 4, 2022 i need to create animation like below. See the Pen GRxpQOM by solace-digital (@solace-digital) on CodePen Link to comment Share on other sites More sharing options...
GSAP Helper Posted July 4, 2022 Share Posted July 4, 2022 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 More sharing options...
renny Posted July 5, 2022 Author Share Posted July 5, 2022 i have post minimal demo now can you please help to get this result Thanks Renny Link to comment Share on other sites More sharing options...
GreenSock Posted July 5, 2022 Share Posted July 5, 2022 I assume you wanted something like this: See the Pen GRxpQad?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
renny Posted July 5, 2022 Author Share Posted July 5, 2022 thanks for this solution But how to second image load as per video ? Thanks Renny Link to comment Share on other sites More sharing options...
GreenSock Posted July 5, 2022 Share Posted July 5, 2022 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 More sharing options...
renny Posted July 5, 2022 Author Share Posted July 5, 2022 i put another image on there, but not work can you pelase check that ? Thanks Renny Link to comment Share on other sites More sharing options...
GreenSock Posted July 5, 2022 Share Posted July 5, 2022 You're nesting it wrong. I assume you want something like this: See the Pen ExEVEeb?editors=1010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
renny Posted July 5, 2022 Author Share Posted July 5, 2022 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 More sharing options...
GreenSock Posted July 5, 2022 Share Posted July 5, 2022 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 More sharing options...
renny Posted July 5, 2022 Author Share Posted July 5, 2022 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 More sharing options...
renny Posted July 5, 2022 Author Share Posted July 5, 2022 just tell me how to stop stigger if this last image are display in full screen Link to comment Share on other sites More sharing options...
Cassie Posted July 5, 2022 Share Posted July 5, 2022 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 More sharing options...
renny Posted July 5, 2022 Author Share Posted July 5, 2022 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 More sharing options...
Cassie Posted July 5, 2022 Share Posted July 5, 2022 I don't understand what that means Renny. Are you asking how to unpin the purple image? Link to comment Share on other sites More sharing options...
renny Posted July 5, 2022 Author Share Posted July 5, 2022 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 More sharing options...
Cassie Posted July 5, 2022 Share Posted July 5, 2022 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 More sharing options...
renny Posted July 5, 2022 Author Share Posted July 5, 2022 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 More sharing options...
Cassie Posted July 5, 2022 Share Posted July 5, 2022 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 More sharing options...
renny Posted July 5, 2022 Author Share Posted July 5, 2022 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 More sharing options...
Cassie Posted July 5, 2022 Share Posted July 5, 2022 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 More sharing options...
renny Posted July 5, 2022 Author Share Posted July 5, 2022 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 More sharing options...
Cassie Posted July 5, 2022 Share Posted July 5, 2022 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts