ChrisDark86
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by ChrisDark86
-
-
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,
ChrisSee the Pen VwmZerV by ChrisDark (@ChrisDark) on CodePen
-
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.
See the Pen GRogVbN by ChrisDark (@ChrisDark) on CodePen
-
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! -
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. -
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
Swiper + SplitText animation
in Banner Animation
Posted
Thank you so much @ZachSaucier!
I'll solve the last bonus part ; )