ChrisDark86 Posted June 5, 2020 Posted June 5, 2020 <script> /* Reveal Effect ------------------------------------------ */ const options = { root: null, rootMargin: "0px", threshold: 0.8 }; let revealCallback = (entries, self) => { entries.forEach(entry => { let container = entry.target; let img = entry.target.querySelector("img"); const easeInOut = "power3.out"; const revealAnim = gsap.timeline({ ease: easeInOut }); if (entry.isIntersecting) { revealAnim.set(container, { visibility: "visible" }); revealAnim.fromTo( container, { clipPath: "polygon(0 0, 0 0, 0 100%, 0% 100%)", }, { clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)", duration: 1, ease: easeInOut } ); revealAnim.from(img, 2, { scale: 1.2, ease: easeInOut, delay: -1, }); self.unobserve(entry.target); } }); }; let revealObserver = new IntersectionObserver(revealCallback, options); document.querySelectorAll(".woocommerce-product-gallery__image, .reveal").forEach(reveal => { revealObserver.observe(reveal); }); </script> Hey GSAP members! My target would be use the image reveal effect continously in slider. When I hit the next or prev button I'd like to see this effect. At the moment it does it once on each ( slide ) image but I would like to do every time. Thanks in advance!Chris
ZachSaucier Posted June 5, 2020 Posted June 5, 2020 Hey Chris. Welcome to the GreenSock forums. The main issue is self.unobserve(entry.target);. Remove that and it should work, though the .from() tween should probably be changed to a .fromTo() in order to not be messed up on future iterations. Alternatively, create the whole timeline outside of that function and control it using control methods. I talk more about how to do that in my article on animating efficiently. I think you're going to love GreenSock's new ScrollTrigger plugin! It makes it easy to play and replay animations as they enter the screen. Side note: This doesn't do anything: gsap.timeline({ ease: easeInOut }); Timeline's don't have an ease property and easeInOut is not a valid ease. I think you might be trying to do something like this? gsap.timeline({ defaults: { ease: "power1.inOut" } }); Let us know if you have specific questions.
ChrisDark86 Posted June 5, 2020 Author Posted June 5, 2020 Hey Zach! I want the effect again when I hit the prev or next button ( arrow ) on those image what I already did once. So the perfect event for example would be the SlideChange event in my case.https://swiperjs.com/api/#events The GSAP function add inline style visibility: visible and clip-path as it should. After I tried this way via Swiper Event, but in this case it'll be stay visibility:hidden without effect. I hope you understand my problem with the following examples.
ChrisDark86 Posted June 5, 2020 Author Posted June 5, 2020 reveal_problem.php 4 hours ago, ZachSaucier said: Hey Chris. Welcome to the GreenSock forums. The main issue is self.unobserve(entry.target);. Remove that and it should work, though the .from() tween should probably be changed to a .fromTo() in order to not be messed up on future iterations. Alternatively, create the whole timeline outside of that function and control it using control methods. I talk more about how to do that in my article on animating efficiently. If I remove theself.unobserve(entry.target);than the fromTo timeline will be infinitive loop. I'd be more than thankful if you could show me my modified code as you mean. Attached a file which helps you to test it. reveal_problem.php
ZachSaucier Posted June 6, 2020 Posted June 6, 2020 Hey Chris. None of the images you attempted to show work for me. Can you please create a minimal demo of the issue in a CodePen so that we can not only see but also edit the code ourselves? Additionally, did you try using ScrollTrigger instead? It's pretty great.
ChrisDark86 Posted June 8, 2020 Author Posted June 8, 2020 Hey Zac, I'm newbie to creating reveal effect via GSAP, so I'd be more than happy if you could create a reveal effect what I would like to reach by the first post. Simply I want to create clip-path effect on each image when I scroll into the area via the new ScrollTrigger plugin.Thank you for your help!
ZachSaucier Posted June 8, 2020 Posted June 8, 2020 So something like this? See the Pen yLeYoJV?editors=0010 by GreenSock (@GreenSock) on CodePen. 2
ChrisDark86 Posted June 8, 2020 Author Posted June 8, 2020 Hi Zac, So close, but I would like to do with swiper like this. See the Pen GRogVbN by ChrisDark (@ChrisDark) on CodePen.
ZachSaucier Posted June 8, 2020 Posted June 8, 2020 There's no reason to use intersection observers or ScrollTrigger if buttons are controlling things. Just fire the animation instead. Please create a CodePen demo that recreates the issue if you'd like our assistance fixing something.
ChrisDark86 Posted June 8, 2020 Author Posted June 8, 2020 It wouldn't be reason but what about the first appearance ( I want the effect first when I reach that section also ( not only via buttons but also ) )? The previous post I attached my codepen demo. I hope that could be understandable, but if you've a better solution I'm happy to see that!
ZachSaucier Posted June 8, 2020 Posted June 8, 2020 2 minutes ago, ChrisDark86 said: what about the first appearance ( I want the effect first when I reach that section also ( not only via buttons but also ) )? So pair my demo with your demo See the Pen rNxOzod?editors=0100 by GreenSock (@GreenSock) on CodePen. Your code would benefit from stripping out the intersection observer stuff.
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