IsaGomez Posted August 29, 2022 Share Posted August 29, 2022 Hi Everyone, I'm working on making an animation by drawing images in a pinned section and when scrolling the content appears in text and its corresponding image. The problem is that my images have a transparent background and I would like to be able to make the image disappear before the next one appears. I have tried to work with the visibility in the tween but it doesn't work correctly. Maybe the most interesting thing would be to add an onUpdate callback function in the scrollTriggers but but I would like to know if someone can give me a little guidance on how to do it. Best Regards, Isa. See the Pen XWELwGm by isagoga (@isagoga) on CodePen Link to comment Share on other sites More sharing options...
GSAP Helper Posted August 29, 2022 Share Posted August 29, 2022 Hi there! Apologies for the lack of response so far, but it looks likely that people are struggling to help with this question. Vague details like 'it's broken' or 'it doesn't work correctly.' are very difficult for people to help with. Here's some tips that will increase your chance of getting a solid answer! A clear description of the expected result - "I am expecting the purple div to spin 360degrees" A clear description of the issue - "the purple div only spins 90deg" A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" A minimal demo - if possible, using no frameworks, with minimal styling, only include the code necessary to show the issue. Link to comment Share on other sites More sharing options...
GreenSock Posted August 29, 2022 Share Posted August 29, 2022 10 hours ago, IsaGomez said: The problem is that my images have a transparent background and I would like to be able to make the image disappear before the next one appears. I'm not exactly sure what that means. Things could disappear by fading, but wiping, masking, moving, etc. It sounds like maybe a timing issue with where you're setting up your start/end values on the ScrollTriggers. Another approach is to do all the animation in one timeline and just scrub through the whole thing instead of trying to do one by one as all separate ScrollTriggers. In that case, I'd recommend getting the animation looking just right by itself, and THEN wire it up to the scroll position with ScrollTrigger. Good luck! Link to comment Share on other sites More sharing options...
IsaGomez Posted August 30, 2022 Author Share Posted August 30, 2022 Hi Jack, Thanks for your reply. I'm sorry I didn't explain the problem in more detail. My goal is to show a single image each time you scroll. I would like only one image and its text to be shown when scrolling. That is, when you scroll to the next step, hide the image that appeared in the previous step and show the image corresponding to that step. I understand that this should be done by working on the opacity. I have updated the pin and added opacity 0 at the start of the timeline and opacity 1 at the end of the timeline but I am still having problems because it shows an image for each step but when going to step two the image from step 1 is still visible. I hope I have explained it a bit better now :) Best Regards, Link to comment Share on other sites More sharing options...
Cassie Posted August 30, 2022 Share Posted August 30, 2022 Hi Isa, I'm a bit confused here - you don't have a timeline in your pen at all. There are many ways to achieve this, triggering tweens in callbacks, using one timeline, using multiple scrollTriggered tweens. Do you have a question that's relevant to your current approach? Link to comment Share on other sites More sharing options...
IsaGomez Posted August 30, 2022 Author Share Posted August 30, 2022 Hi @Cassie Thanks for your quick reply I'm very new to GreenShock and haven't quite grasped the concepts. How can I then add a timeline to achieve this effect? I thought the tl variable referred to the timeline. On the other hand, do you know if there is any free or paid training that can help me to better understand how to create different animations with GSAP? Thank you very much, Isa. Link to comment Share on other sites More sharing options...
Solution Cassie Posted August 30, 2022 Solution Share Posted August 30, 2022 Hi again Yes - sorry for the confusing phrasing, you do have a timeline in your pen - but you haven't added any tweens to it. A timeline is like a container to put tweens in, your timeline is empty, it doesn't have any tweens added. Give this article a read - I would also recommend starting without scrollTrigger. Just focus on understanding tweens, timelines and the position parameter for now! Link to comment Share on other sites More sharing options...
IsaGomez Posted August 30, 2022 Author Share Posted August 30, 2022 Thanks @Cassie, I'll keep an eye on the link 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