animation activation by swipe

[GrumpyDevoloper]

is there way to add gsap animation that runs on swipe? i have one page that has loading animations and click activations, but same page has touch swipe browsing too and i want to make animation there too

[mvaneijgen]

Have you seen the Observer plugin? Sounds like it does exactly what you are looking for.. 

 

Here is a great explanation video 

 

 

[GrumpyDevoloper]

Thank you will look more on this plugin.

 

Was trying to add functions on multiple difrent ways but no results 

[GrumpyDevoloper]

okey now i know this is the right way to make animation run on swipe, but i will need some help to set up observer function to run animation.
trying to figure this still out since havent used it before so any help would be nice

 

down below is animation function for onclick, but anyone knows how to make it as drag, swipe

$(".thumbs-container img").click(function () {
  gsap.from(".brand", {
    duration: 1,
    delay: 1,
    opacity: 0,
    x: "-30",
    ease: Expo.easeInOut,
  });
  gsap.from("header .navigation .navigation-items a", {
    duration: 2,
    delay: 1.3,
    x: "-200",
    opacity: 0,
    ease: Expo.easeInOut,
    stagger: 0.3,
  });
  gsap.from(".swiper-slide .text-content .title", {
    duration: 1,
    delay: 1,
    opacity: 0,
    y: "-50",
    ease: Expo.easeInOut,
  });

  gsap.from(".swiper-slide .text-content p", {
    duration: 1,
    delay: 1,
    opacity: 0,
    x: "-80",
    ease: Expo.easeInOut,
  });

  gsap.from(".swiper-slide .text-content .read-btn", {
    duration: 1,
    delay: 1,
    opacity: 0,
    x: "50",
    ease: Expo.easeInOut,
  });

  gsap.from(".bg-slider-thumbs", {
    duration: 1,
    delay: 1,
    opacity: 0,
    y: "50",
    ease: Expo.easeInOut,
  });

  gsap.from(".thumbs-container img", {
    duration: 2,
    delay: 1.3,
    y: "100",
    opacity: 0,
    ease: Expo.easeInOut,
    stagger: 0.3,
  });
});

[GSAP Helper]

Hi @GrumpyDevoloper. It's pretty tough to troubleshoot without a minimal demo. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. But if you're asking us to show you how to build entire functionality, that's beyond the scope of help these free forums can offer. Please see the forum guidelines. 

 

Good luck!

[GrumpyDevoloper]

minimal demo is hard to make since i have slider.js and swipe.js with three.js and gsap with jquary on there, but i got it it working making gsap on load animations and then used transition rules for css and it works now like i was thinking, but somehow css makes animations with gsap makes everything laggy so had to make lot of work to make all smooth small tweaks etc, but it works now.

thank you for all assistance and support i really like gsap it is so smooth when getting everything controlled to gsap and even better when using three.js as assistant

[GreenSock]

2 hours ago, GrumpyDevoloper said:

but somehow css makes animations with gsap makes everything laggy so had to make lot of work to make all smooth small tweaks etc

Ah yes, you should definitely avoid having CSS transitions applied to elements that you're animating with GSAP. That's terrible for performance because the browser would constantly be interrupting things. For example, let's say you animate width to 500px from 100px. On every single tick (requestAnimationFrame), GSAP would set the interpolated value but the CSS transition would basically say "NOPE! I won't let you do that yet...I'm gonna transition to that new value over the course of ____ seconds..." and it'd start interpolating. But on the very next tick, GSAP would set the new value and CSS transitions would interrupt and start over again, going to that new value. Over and over and over. 

 

That would not only add a bunch of stress to the browser, but it'd slow things down regarding the overall timing of the animation. For example, if the GSAP tween has a duration of 1 second and the CSS transition is also set to 1 second, that means it'd stop moving after TWO seconds!

 

Does that clear things up? 

 

Glad to hear you're enjoying the tools! And thanks for being a Club GreenSock member!  🙌

[GrumpyDevoloper]

that makes so much sense and i use css transitions so rare now trying to use gsap for all, but sometimes you need to make compromises like this today, but how you explained it makes even more easier now to play gsap and transitions if needed since i got good understanding how things work and what mistakes i made