Is it possible to desactivate animations for specific breakpoint in the new GSAP timeline panel

Design help Animations & Interactions
9

I found a hacky solution. :smiling_face_with_sunglasses:

Thanks @CassieEvans, for sharing gsap match media function docs.

Quick Demo :backhand_index_pointing_down:

preview

Focus on the IRON MAN text appear effect. On desktop device it’s come from bottom. But on mobile device it’s come from top

Webflow cloneable link :backhand_index_pointing_down:
:link: Breakpoint Based GSAP Powered Webflow Interactions - Webflow

YouTube tutorial link :backhand_index_pointing_down:
Breakpoint Based GSAP Powered Webflow Interactions

Please consider using English Subtitle/CC when watch on youtube

So the solution is, add GSAP powered Webflow interaction based on Combo Class [e.g. .element.cc-desktop, .element.cc-mobile]. Then add or remove that combo class top of the main class, according to breakpoints using gsap.matchMedia() function and little bit of Jquery code.

<script defer>
let mm = gsap.matchMedia();
mm.add(
  {
    isDesktop: "(min-width: 480px)",
    isMobile: "(max-width: 479px)",
  },
  (context) => {
    let { isDesktop, isMobile } = context.conditions;
    $(".text").toggleClass("cc-desktop", isDesktop);
    $(".text").toggleClass("cc-mobile", isMobile);
  }
);
</script>

If the above codes :backhand_index_pointing_up: not work for you, then try to create Custom event trigger interaction for different breakpoints, then trigger that Custom event via ix3 emit function with your Custom event name. Here is the codes example, for how you can trigger your Custom event based on different breakpoints.
Remember, you need to include the codes above :backhand_index_pointing_up: for toggle your element classes based on different breakpoints.

<script defer>
Webflow ||= [];
Webflow.push(() => {});
const ix3Module = Webflow.require("ix3");
ix3Module.ready().then(() => {
  mm.add(
    {
      isMobile: "(max-width: 479px)",
    },
    (context) => {
      let { isMobile } = context.conditions;
      if (isMobile) {
        ix3Module.emit("Page load interaction for mobile"); // Your Custom event name
      }
    }
  );
});
</script>
1 Like