Reveal effect restart possibilites

[ChrisDark86]

<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]

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]

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]

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]

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]

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]

So something like this?

See the Pen yLeYoJV?editors=0010 by GreenSock (@GreenSock) on CodePen

[ChrisDark86]

Hi Zac,

So close, but I would like to do with swiper like this.

See the Pen GRogVbN by ChrisDark (@ChrisDark) on CodePen

[ZachSaucier]

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]

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]

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.