[Help me figure out the adaptive slider]

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! 👌

[Help me figure out the adaptive slider]

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");
}

 

[I can't make a normal horizontal scroll ScrollTrigger]

16 hours ago, Cassie said:

 

 

 

Hi!

The problem is that your sections have different widths, and the solution you used depended on them being the same width.

This solution will work better for you, it translates the container rather than the individual elements

 

----

 

Привет!

Проблема в том, что ваши секции имеют разную ширину, а решение, которое вы использовали, зависело от того, что они были одинаковой ширины.

Это решение будет работать лучше для вас, оно переводит контейнер, а не отдельные элементы

 

 

Thanks a lot, this is what I need. To all the good who helped thanks, Cassie and thank you very much.

[I can't make a normal horizontal scroll ScrollTrigger]

19 hours ago, Rodrigo said:

Hi,

 

I've been reading this a few times and I'm having a few issues trying to completely get what you're doing in your code. From the example you posted I believe that you want horizontal sections and snapping to the start of each section, right?

 

For the sake of simplicity I removed all the content from your HTML and left just this:

<section class="customContainer flex flex-nowrap bg-[#FFCE1F]">
  <div class="el  bg-red-500 flex items-center h-screen font-oswaldM text-main text-[677.95px] uppercase">
    chevrolet
  </div>

  <div class="el flex flex-nowrap item-wrap w-[300%]">
    <div class="item flex items-center bg-red-300 h-screen w-screen">
    </div>

    <div class="item flex items-center h-screen w-screen bg-amber-500">
    </div>

    <div class="item flex items-center h-screen w-screen bg-blue-900">
    </div>
  </div>
</section>

With the javascript code you have I can see a problem that could be the cause of your issues. You are creating two different sets of ScrollTrigger instances for two different collections of DOM nodes.

let items = gsap.utils.toArray(".item");
let el = gsap.utils.toArray(".el");

gsap.to(el, {
  xPercent: -100,
  ease: "none",
  scrollTrigger: {
    trigger: ".customContainer",
    pin: true,
    scrub: 1,
    end: () => "+=" + document.querySelector(".customContainer").offsetWidth,
  },
});

gsap.to(items, {
  xPercent: -100 * (items.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".item-wrap",
    pin: true,
    scrub: 1,
    snap: 1 / (items.length - 1),
    end: () => "+=" + document.querySelector(".item-wrap").offsetWidth,
  },
});

First you create a GSAP instance for the el array that is triggered when the top ".customContainer" element hits the top of the viewport (default start point). Is worth noticing that the top of the trigger element is at zero px so as soon as you start scrolling that instance starts. Then you create another GSAP instance for the items array that is triggered when the top of the  ".item-wrap" element hits the top of the viewport. The top of this element is also zero px, since vertically both elements are at the same point, so this starts at the same time as your other GSAP instance's ScrollTrigger. See the issue now? You have two different ScrollTrigger instances running and being updated at the same time with different snapping points and being affected by the same scroll position.

 

My recommendation is to add everything in a single GSAP Timeline instance so you have a single sequence of animations and remove ScrollTrigger of the equation completely, just get your animations working without ScrollTrigger and when they are working as you expect, then you add ScrollTrigger to the mix.

 

@Cassie made a great video with a simple example of this particular recommendation:

Give that a try and let us know if you have more questions.

 

Happy Tweening!

Hi, Rodrigo Thank you for taking the time to describe the problem, but since I'm new and have only been here for a few weeks, I didn't understand anything except that you wrote that you need to do everything in one instance of Gsap. I've watched the video you sent me from Cassie more than once, but unfortunately I didn't understand it either. Due to the fact that you didn't understand, I just need Chevrolet to stop at the beginning of the next section after the word, or Chevrolet to scroll through without binding, and everyone else has already scrolled through one section. Because of this logic, I actually created two Gsap instances in the hope that I would be doing two different things. To make it even clearer, I overwritten my code:

See the Pen ZERLJZw by ibrakhimzhanov (@ibrakhimzhanov) on CodePen

, but as you can see, there is an empty space after the word Chevrolet, I don't understand why:( I did from this example:

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

[I can't make a normal horizontal scroll ScrollTrigger]

5 hours ago, Trapti said:

I don't think you need two horizontal scroll as per the example site you have shown https://karinasirqueira.com/projects/mailchimp

To me looks like you want to achieve like below pen. Just add your content ans style.  Remove all the navigation.

 

 

 

Sorry if I understood your problem incorrect. 

Yes, we misunderstood each other, but I think it's my fault, I couldn't formulate the question clearly. I need an exact copy of the work from the site https://karinasirqueira.com/projects/mailchimp / because I have the inscription Chevrolet because the card and the card are both on her website.

[I can't make a normal horizontal scroll ScrollTrigger]

People, I looked for solutions, and slightly altered the code, now it looks like this: 

See the Pen bGKBYEN by ibrakhimzhanov (@ibrakhimzhanov) on CodePen

 

There is one problem left😑, when scrolling, it is necessary to salt to the second element of the el class, that is, the scroll should stop as soon as the word Chevrolet ends. I created two methods with gsap.to() but for some reason it works clumsily. I will be glad if you guide me on the right path.

[I can't make a normal horizontal scroll ScrollTrigger]

13 hours ago, Cassie said:

Hi there.

Could you please explain a bit more? 

Thank you

 

Всем привет. Не могли бы вы объяснить немного больше? Спасибо

Hi, I need to execute exactly the same logic as on this site -> https://karinasirqueira.com/projects/mailchimp

[I can't make a normal horizontal scroll ScrollTrigger]

Работаю вторую неделю, помогите ребята. Мне нужно сделать горизонтальную прокрутку для всего раздела. Пример с этого сайта , там тоже используется Gsap, но я не вижу его кода

 

 

 

Это должно быть так https://karinasirqueira.com/projects/mailchimp/

 

See the Pen mdKraWW by ibrakhimzhanov (@ibrakhimzhanov) on CodePen