Jump to content
Search Community

Update y value with ScrollTrigger after content changes

Fabian W test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hi guys,

We have two divs with a different height which lay next to each other.

If the user scrolls gsap scrolltrigger scrolls the divs in a way that on the bottom of the page (scroll end) they are aligned at their bottom line.

This works easy if we calculate the leftover space to scroll with body height - div height.

 

If one of the divs holds an expandable element the height of the div changes dynamically.

 

Is it possible to refresh not only the start and end scrolltrigger values, but also the y value of the to tween?

 

All the best,

F

See the Pen wvXYEGE by anothercodepen (@anothercodepen) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @Fabian W and welcome to the GreenSock forums!

 

First thanks for being a Club GreenSock member and supporting GSAP! 🥳

 

What you are looking for is the invalidateOnRefresh configuration option in the ScrollTrigger configuration object:

 

Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values.

https://greensock.com/docs/v3/GSAP/Tween/invalidate()

 

This seems to work the way you intend:

let t1 = gsap.to(c1, {
  scrollTrigger: {
    scrub: true,
    start: () => 0,
    end: () => 'max',
    markers: true,
    invalidateOnRefresh: true,// <- HERE
  },
  y: () => document.body.clientHeight - c1.clientHeight,
  ease: 'none',
  overwrite: 'auto'
});
let t2 = gsap.to(c2, {
  scrollTrigger: {
    scrub: true,
    start: () => 0,
    end: () => 'max',
    markers: true,
    invalidateOnRefresh: true,// <- HERE
  },
  y: () => document.body.clientHeight - c2.clientHeight,
  ease: 'none',
  overwrite: 'auto'
});

Hopefully this helps. If you have more questions let us know.

 

Happy Tweening!

Link to comment
Share on other sites

Hi,

 

I think it would be possible but it might require a bit of work, because you'll have to update the height of the element as it changes (in this case one swift change) with the current position and the progress of the ScrollTrigger instance that it represents. When you increase the height of the element the distance between the bottom of the element and the end point of the ScrollTrigger instance is less than before so that progress has changed.

 

I'll try to come up with something when I have the time, but in the mean time you can take a look at this example and see if you can abstract the logic from it to your particular scenario:

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

 

This is the thread that example stems from:

 

Happy Tweening!

Link to comment
Share on other sites

  • 6 months later...

I have one soluction, but i'dont now if is the better, first i'm create one ler var for timeline e after create a "ResizeObserver", in observer the first line is for kill before "timeline" and i set the new "timeline" in the let var.

 

sorry for my bad english, if your speak portuguese has a translate in down.

Eu tenho uma solução, mas não sei se é a melhor, primeiro eu crio uma variavel do tipo let para a "timeline" e em seguida crio um "ResizeObserver", na primeira linha do observer, eu mato a "timeline" anterior e crio uma nova na mesma variavel, dessa forma sempre que atualizar a pagina em qualquer direção, ele vai recriar o "start" e o "end", mantendo sempre correto.
 

let timeline = null as gsap.core.Timeline | null

const resizeObserver = new ResizeObserver((entries) => {
  if (timeline) timeline.kill()
  
  timeline = gsap.timeline({
    scrollTrigger: {
      trigger: '.table',
      start: "top top",
      end: "bottom bottom",
      scrub: 1,
      pin: true,
      // markers: true,
    }
  })
});
resizeObserver.observe(document.body);

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...