renny Posted August 19, 2022 Share Posted August 19, 2022 Hi Guys, this is demo of what i need I have done a little bit in this demo, but I do not know how to manage the image which is coming in the right hand side See the Pen YzaBzeW by renny-solace (@renny-solace) on CodePen Link to comment Share on other sites More sharing options...
GSAP Helper Posted August 19, 2022 Share Posted August 19, 2022 We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free "how do I recreate the cool effect I saw in this video?" 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...
Cassie Posted August 19, 2022 Share Posted August 19, 2022 Hi there! What exactly is it you're struggling with? You'll be more likely to get help if you narrow it down a bit. Do you need help with timing, markup, planning it out, easing or a specific part of the animation? What have you tried, where have you got stuck? More focused information or a GSAP specific question gives us more to work with! Link to comment Share on other sites More sharing options...
renny Posted August 19, 2022 Author Share Posted August 19, 2022 i need to display right image on scroll with opacity on scroll Link to comment Share on other sites More sharing options...
Cassie Posted August 19, 2022 Share Posted August 19, 2022 Well you currently don't have that image in the markup so that's probably step one! Then you just need to do exactly what you've already done for the other tweens, but animate opacity instead of xPercent or scale. Link to comment Share on other sites More sharing options...
renny Posted August 20, 2022 Author Share Posted August 20, 2022 i have almost complete that animation, but not properly trigger start and end 1. ready to scan image display after right side dashboard full set 2. success image left side display after rady to scan show complete Link to comment Share on other sites More sharing options...
Cassie Posted August 20, 2022 Share Posted August 20, 2022 I recommend taking a look at timeline's for sequencing your animation, the position parameter for precise timing and then the scrollTrigger docs and video for more information about how to handle ScrollTriggered animations. The video is really useful! Introducing ScrollTrigger for GSAP from GreenSock on Vimeo. https://greensock.com/docs/v3/Plugins/ScrollTrigger If there's something that you're struggling to grasp, let us know! 1 Link to comment Share on other sites More sharing options...
renny Posted August 22, 2022 Author Share Posted August 22, 2022 can you help me in my code, basically im not understand how to start and end Link to comment Share on other sites More sharing options...
Cassie Posted August 22, 2022 Share Posted August 22, 2022 Hey again! I think the difficulty here is that you're trying to create an animation sequence with separate tweens. One of the main features of GSAP is the fact that you can create sequenced animation timelines 🥳 So let's step through the right way to approach this. step 1. Create a timeline with the complete animation sequence here's a starting point - See the Pen xxWBLyE?editors=0010 by GreenSock (@GreenSock) on CodePen If you need help positioning elements on that timeline then give this article a read. step 2. Add one ScrollTrigger to that timeline. Pop back when you have a timeline you're happy with and I'll help you with this part too. 1 Link to comment Share on other sites More sharing options...
renny Posted August 22, 2022 Author Share Posted August 22, 2022 thanks for your help but recently i have complete using start and stop trigger 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now