[ScrollTrigger's markers don't refresh after window resize.]

@Rodrigo it's finally fixed! It was my mistake on forgetting to refactor the way I was retrieving the height of some elements, that was necessary at certain point, but not anymore. Code blindness 😅

But it totally worth, as i didn't know that way of indenting and identifying  the markers. That's soooo useful!!! Thanks a lot!

Thanks to @mvaneijgen too

[ScrollTrigger's markers don't refresh after window resize.]

Thanks a lot for the answer @mvaneijgen. Yes, I am aware about the capabilities (and magic) of the timeline, but thanks for remembering.

In the example function above, I use class toggling as a decision, as I am not planing actually to animate with a transition as the timeline could, but take advantage of the triggers to change the state from visible to invisible in each element, synchronised with my content. I could use display:none; for example, by removing the elements totally and adding it back.

In the exemple function above I switch the visibility of one Lottie animation to the next animation, so I fake a seamless animation. One element appears exactly in the time and position the other disappears.  My animation is made in many pieces (as required from the design I have).

The animations themselves are actually controlled by lottie player in the case of my project. You can see it here: http://kunden.brueckner.studio/frankwords/

///

Unfortunately I could not reproduce the bug as I can see in my project on CodePen. There it seams I have a kind of limitation on the definition of the scroller defaults, (maybe) so it is quite not related to my trouble of resizing the window.  So I would not focus on the minimal demo.

But I add it here anyway. (:

See the Pen xxBawaM?editors=1111 by QuitoSometimesMarcos (@QuitoSometimesMarcos) on CodePen

///

So I still in the trouble of refreshing the markers after resize, when I have the scrolltriger defaults pointing another scroller.

Any ideas?

Thanks

[ScrollTrigger's markers don't refresh after window resize.]

Hello,

I am using Scrolltrigger to animate several elements of my project. Everything works fine until I resize the window. I am already using ScrollTrigger.refresh(); everytime any element can potentially modify my flow, it still not working.

I suppose my problem is caused by a custom container I am using as scroller to avoid the weird resizing on mobile browsers, I wrapped my content on and it works fine. But still thought the markers are not being updated when i resize the window.

 

ScrollTrigger.defaults({
  scroller: "#scrollable-container",
});

Here is one example animation:
 

function manageScrollAnimations() {
  //// CHANGE ANIMATION OPACITY ON SCROLL
  const contentRows = document.querySelectorAll(".has-animation");

  contentRows.forEach((row, index) => {
    const animation = row.querySelector(".animation");

    if (index !== 0 && index !== contentRows.length - 1) {
      animation.classList.add("invisible");
    }

    ScrollTrigger.refresh();
    ScrollTrigger.create({
      trigger: row,
      start: "top center",
      end: `bottom center`,

      onEnter: () => {
        animation.classList.remove("invisible");
      },
      onLeave: () => {
        if (index !== contentRows.length - 1) {
          animation.classList.add("invisible");
        }
      },
      onEnterBack: () => {
        animation.classList.remove("invisible");
      },
      onLeaveBack: () => {
        if (index !== 0 && index !== contentRows.length - 1) {
          animation.classList.add("invisible");
        }
      },
      markers: true,
      scrub: true,
    });
  });

//// resize 

  window.addEventListener("resize", handleResize);
  
  function handleResize() {
    manageTopBarTextAnimations();
    positionAnimatedWords();
    updateTopBarHeight();
    resizeAnimationWrappers();
    manageScrollAnimations();
    ScrollTrigger.refresh();
  }

I am kind of running out of options. I read something about ScrollTrigger.scrollerProxy, that (maybe) can solve my problem (not sure), but I could not understand how to implement it.

I also used a eventListener, it logs and still thought the markers nothing.

ScrollTrigger.addEventListener("refresh", function () {
  console.log("Refreshed");
});

Here is the link of the project, as a code pen would not serve the issue.
http://kunden.brueckner.studio/frankwords/

Any thoughts about what can be wrong?

Thanks a lot ✨

[Repelling Interaction with Elements]

Thanks a lot Rodrigo,

I will definitely take a look on the resources you recommended, hope I can find a solution there. 

Also I will take a look on the possibility of removing the css filters to improve the performance. At the moment I know no other option to achieve the effect of merging bubbles, but there must be another option.

Thanks again <3

[Repelling Interaction with Elements]

Hey!

I have been studying possibilities to create a repelling effect triggered by my cursor on the "blob-mask" elements of that animation I am creating. The fact is that, after trying different approaches, I have no idea how to  do something like this.

I found this topic and tried to apply what I leaned there. But the only thing I could do was to break my original code

Does someone could give me some guidance on that task, I am pretty lost.

Thanks a lot! 

 

See the Pen abjLjvZ by QuitoSometimesMarcos (@QuitoSometimesMarcos) on CodePen

[Looking for a elegant solution: one scrollTrigger for different animations]

Thanks for your answer, @OSUblake.

I experimented changing the duration to really small or really big values and now I can see how it influences.

It was kind of hard to determine the right duration, in my case it means that secondary animation should end together with the others. Is there a way to precise it?
 

[Looking for a elegant solution: one scrollTrigger for different animations]

Hello @Cassie, thanks a lot for your answer. It worked! ((((::::

Funny that I have been trying something similar before, adding the last animation to the first timeline,  but in my attempt I didn't include the duration and position parameter.

So I am now asking myself why the duration would influence the scrollTrigger, as the animation is connected to the scroll distance, and has no defined time in seconds. I am kind of surprised.

Would you give me a glimpse of it?

Thanks again!

[Looking for a elegant solution: one scrollTrigger for different animations]

Hello!

I would like to have different animations triggered by the same scrollTrigger settings. Most of the animations are added to an Array with a loop, and they work pretty fine.

One of them is not in the array and didn't worked until I created another timeline with the same scrollTrigger settings. So I was wondering if there is another (and more elegant) solution with just one timeline.

Following the code I wrote until now. I could not add a codepen as I don't have an pro account to upload the assets.

Thanks a lot! (:
 

 

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: "#cover",
    start: "top top",
    end: "bottom top",
    pin: true,
    pinSpacing: false,
    scrub: true,
    markers: true,
  },
});

const delayValue = -30;
tl.set(".slices", {opacity: 0, scale: 0.1, delay: delayValue});

const slices = gsap.utils.toArray(".slices");

// SHUFFLE ARRAY
const shuffle = (arr) => {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
};

const shuffled = shuffle(slices);

//

slices.forEach((slice) => {
  tl.to(slice, {
    scale: 1,
    opacity: 0.85,
    delay: delayValue,
  }).to(slice, {
    scale: 0.85,
    opacity: 0,
  });
});

// GRADIENT

const gr1 =
  "linear-gradient(90deg, rgba(87, 103, 56, 1) 0%, rgba(204, 128, 97, 1) 20%, rgba(138, 128, 186, 1) 100%)";

const gr2 =
  "linear-gradient(120deg, rgba(138, 128, 186, 1) 0%, rgba(204, 128, 97, 1) 80%, rgba(87, 103, 56, 1) 100%)";

let tl1 = gsap.timeline({
  scrollTrigger: {
    trigger: "#cover",
    start: "top top",
    end: "bottom top",
    pin: true,
    pinSpacing: false,
    scrub: true,
    markers: true,
  },
});

tl1.fromTo(".headline", {backgroundImage: gr1}, {backgroundImage: gr2});