I found a hacky solution. 
Thanks @CassieEvans, for sharing gsap match media function docs.
Quick Demo 
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
Breakpoint Based GSAP Powered Webflow Interactions - Webflow
YouTube tutorial link
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 
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 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>
’
