ChrisDark86

Thank you so much @ZachSaucier! I'll solve the last bonus part ; )

Dear GSAP Team! The target would be a proper running animation right after when the slide change. ( you could swipe with your mouse now if you wouldn't like to wait 10s for each of them ) I've the following problems because lack of my knowledge with GSAP yet. Don't know how to hide the first slide text on init function It seems there are delays on each slide ++ Bonus task: before slide change it to the prev/next slide the text would collapse with similar but opposite animation. I'm newbie here, any help would really appreciate it! ; ) // Swiper API Events https://swiperjs.com/swiper-api#events Best, Chris

Dear GSAP Team! I'd like to understand how could I create the same effect with SplitText plugin. At the moment it has a delay somehow on every slide change. <div class="swiper-slide"> <?php if ( $title ) : ?> <div class="swiper__title"> <h2><?= $title ?></h2> </div> <?php endif; ?> </div> <!-- Swiper --> <script src="<?php echo get_template_directory_uri(); ?>/js/swiper.min.js"></script> <!-- GSAP --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script> <!-- Split Text --> <script src="<?= get_template_directory_uri() ?>/js/SplitText.min.js"></script> <script> gsap.registerPlugin(SplitText) var swiper = new Swiper('#post__slider .swiper-container', { effect: 'fade', speed: 1000, watchSlidesVisibility: true, autoplay: { delay: 10000, disableOnInteraction: false, }, allowTouchMove: true, loop: true, runCallbacksOnInit: true, on: { init: function () { splitTextFunction(this.$el); }, slideNextTransitionStart: function () { splitTextFunction(this.$el); }, slidePrevTransitionStart: function () { splitTextFunction(this.$el); } } }); function splitTextFunction(sliderDOM) { let split let animation = gsap.timeline({}) const slideActive = sliderDOM.find('.swiper-slide-active'); const slideCaption = slideActive.find('.swiper__title'); const oldActive = sliderDOM.find('.swiper-slide-prev, .swiper-slide-prev'); const oldCaption = oldActive.find('.swiper__title'); //animation.clear().time(0); //split.revert(); gsap.set(slideCaption, {autoAlpha:1}) split = new SplitText("h2", {type:"words, chars"}) animation.from(split.chars, {opacity:0, y:50, ease:"back", stagger:{ from:"start", each:0.05, }}) } </script> Thanks in advance for your help! Best, Chris

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!

Hi Zac, So close, but I would like to do with swiper like this. https://codepen.io/ChrisDark/pen/GRogVbN

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!

reveal_problem.php 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

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.

<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