Samalander Posted June 8, 2022 Share Posted June 8, 2022 Beginner to GSAP so sorry if this is a stupid question - I have a section with an image inside of it. I'd like the section to pin, and the image to zoom in, stop, then zoom out and stop being pinned. I know how to pin it and make it zoom in, but I can't figure out how to make it zoom back out. https://imgur.com/8lYXybi <- Video of what I have so far Code: https://replit.com/@Samalander/compprof?embed=true (Click show files in the upper left) Thanks! Link to comment Share on other sites More sharing options...
GSAP Helper Posted June 8, 2022 Share Posted June 8, 2022 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. Link to comment Share on other sites More sharing options...
Samalander Posted June 8, 2022 Author Share Posted June 8, 2022 I linked a Repl (Kinda like codepen), does that work? Link to comment Share on other sites More sharing options...
Cassie Posted June 8, 2022 Share Posted June 8, 2022 My advice for creating a scrollTriggered animation with multiple actions is to first create a timeline that does what you want - then to hook the timeline up to ScrollTrigger. Why don't you give that a bash in the template above - don't worry about styling just zoom in a coloured div for now and we'll help you hook it up to scroll and give you any pointers you need. Good luck! Link to comment Share on other sites More sharing options...
Solution Cassie Posted June 8, 2022 Solution Share Posted June 8, 2022 Ah, sorry I thought the repl was a video recording because of the big play button. Still we'd prefer a minimal demo in codepen if that's ok? We don't need to see your whole project, just some simple coloured divs and the necessary GSAP code. Link to comment Share on other sites More sharing options...
GreenSock Posted June 8, 2022 Share Posted June 8, 2022 Yep, I'd follow Cassie's advice - just focus on the animation part (don't worry about hooking it up to the scroll). Zoom in, wait, then zoom out, all in one timeline. Then once you're happy, add the ScrollTrigger with pin/scrub to that timeline. Boom! 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