Fabian W Posted December 2, 2022 Posted December 2, 2022 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.
Solution Rodrigo Posted December 2, 2022 Solution Posted December 2, 2022 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!
Fabian W Posted December 5, 2022 Author Posted December 5, 2022 Hi Rodrigo, That seems to work, thanks. Unfortunately I ran into another issue: Is it possible to tween between the old y value and the new y value? Because invalidate() lets the elements jump to their new position. (Or should I open another topic for this?) See the Pen VwdVJOa by anothercodepen (@anothercodepen) on CodePen. Cheers, F
Rodrigo Posted December 6, 2022 Posted December 6, 2022 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!
lkt226 Posted July 6, 2023 Posted July 6, 2023 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);
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now