Help me figure out the adaptive slider

[Islam Ibrakhimzhanov]

Hello everyone and happy holidays
I have two questions:

The first one is:
       I have two horizontal sliders and I want all the sliders to stop working and become vertical elements when the size is less than 1024 pixels.  I looked through a couple of questions about this and saw that some of them are already outdated, since a couple of things have changed in Gsap 3, and I couldn't figure out the others. Please tell me how to resize to disable the animation as described in the documentation and re-run it at the desired window size? 

Second:   
         I have recently started learning Gsap and it seems to me all the time that I am doing the animation wrong, please review my code and let me know where to fix it. I will be very grateful for any idea.

P.s Sorry, I couldn't make you a demo version on codepen because I work at vue and have already broken the project into small parts.

 

 

 

 

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const tl = gsap.timeline();

let ww = window.innerWidth;

let sections = gsap.utils.toArray(".panel");

let container = document.querySelector(".wrap");

function mainPage() {
  tl.to(".boxes", {
    duration: 5,
    ease: "none",
    x: -ww,
    repeat: -1,
  });
  console.log(">>>>>One<<<<<");
  gsap.to(sections, {
    xPercent: -100 * (sections.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: container,
      pin: true,
      scrub: 1,
      snap: 1 / (sections.length - 1),
      invalidateOnRefresh: true,
      end: () => "+=" + container.offsetWidth,
    },
  });

  //! Two
  let customContainer = document.querySelector(".customContainer");

  gsap.to(customContainer, {
    x: () =>
      -(customContainer.scrollWidth - document.documentElement.clientWidth) +
      "px",
    ease: "none",
    duration: 4,
    scrollTrigger: {
      // markers: true,
      trigger: ".trigger",
      invalidateOnRefresh: true,
      pin: true,
      scrub: 1,
      // snap: 1,

      end: () => "+=" + customContainer.offsetWidth,
    },
  });
}

document.addEventListener("DOMContentLoaded", adaptive);
window.addEventListener("resize", function () {
  adaptive();
  ScrollTrigger.refresh();
});
function adaptive() {
  return window.innerWidth > 1024 ? mainPage() : console.log("TWO");
}

 

[Rodrigo]

Hi,

 

Unfortunately without a minimal demo is a bit hard to find out what the issue could be.

 

Although I can suggest you a few things.

 

When working with Vue always try to use the lifecycle methods(hooks) with GSAP Context in order to have a simple way to cleanup your GSAP instances when the component gets unmounted:

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import gsap from "gsap";

const main = ref();
const tl = ref();
const ctx = ref();

const toggleTimeline = () => {
  tl.value.reversed(!tl.value.reversed());
};
onMounted(() => {
  ctx.value = gsap.context((self) => {
    const boxes = self.selector(".box");
    tl.value = gsap.timeline();
  }, main.value) // <- Scope!
});

onUnmounted(() => {
  ctx.value.revert(); // <- Easy Cleanup!
});
</script>

Here you can read more about GSAP Context:

https://greensock.com/docs/v3/GSAP/Context

 

In the case of responsive animations use GSAP Match Media in order to better organize and execute your responsive animations:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Is worth noticing that, as you can see in the code examples, you don't need context when using MatchMedia. The Match Media wrapper takes care of everything Context does so no need to have both, just use Match Media.

 

Finally, regardless of the framework you are using, you can always create a Codepen example (simpler than codesandbox) in order to illustrate the issues you are having, at the end when animating we always are talking about DOM elements and Javascript so it makes no difference the setup for that, just the fact that we look at a live editable example that shows the issue you are having.

 

Let us know if you have more questions.

 

Happy Tweening!

[Islam Ibrakhimzhanov]

On 11/14/2022 at 7:23 PM, Rodrigo said:

Hi,

 

Unfortunately without a minimal demo is a bit hard to find out what the issue could be.

 

Although I can suggest you a few things.

 

When working with Vue always try to use the lifecycle methods(hooks) with GSAP Context in order to have a simple way to cleanup your GSAP instances when the component gets unmounted:

<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import gsap from "gsap";

const main = ref();
const tl = ref();
const ctx = ref();

const toggleTimeline = () => {
  tl.value.reversed(!tl.value.reversed());
};
onMounted(() => {
  ctx.value = gsap.context((self) => {
    const boxes = self.selector(".box");
    tl.value = gsap.timeline();
  }, main.value) // <- Scope!
});

onUnmounted(() => {
  ctx.value.revert(); // <- Easy Cleanup!
});
</script>

Here you can read more about GSAP Context:

https://greensock.com/docs/v3/GSAP/Context

 

In the case of responsive animations use GSAP Match Media in order to better organize and execute your responsive animations:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Is worth noticing that, as you can see in the code examples, you don't need context when using MatchMedia. The Match Media wrapper takes care of everything Context does so no need to have both, just use Match Media.

 

Finally, regardless of the framework you are using, you can always create a Codepen example (simpler than codesandbox) in order to illustrate the issues you are having, at the end when animating we always are talking about DOM elements and Javascript so it makes no difference the setup for that, just the fact that we look at a live editable example that shows the issue you are having.

 

Let us know if you have more questions.

 

Happy Tweening!

Thank you, indeed, you solved three of my problems at once with one answer) Now I can say: Happy Tweening! 👌