s94QREspJB

Thank your for asking for clarification. So let's work on question by question. My first question aks why it is not working to use several sections as a reference. What I mean by that is: as I scroll, I want the current section to be reference container for it's background-image to scroll within (as indicated on line 16 in the example). So rather than using the window object here to use the whole viewport as scroll height for the parallax, I only want to use the height of the current section. This should lead to each section to have its own parallax with its background-image. My goal with this is to contrain the parallax to the height value of the current section. I hope this is more clear now.

Hi community, once again I wanted to use your universal and broad wisdom. I have multiple sections following each other with different heights and each of them can have a background image. This implemented as a direct child, is positioned absolute, has the size of the section and, of course, has a background-image set. This image's position can vary, depending on what the user selected in the backend. What is now relatively tricky for me is to use each section as the actual container where the bg image parallaxes in. So not the whole window but only the current section's height should be used. I found this demo this demo to start off with: https://codepen.io/GreenSock/pen/QWjjYEw and I adjusted it to the version you see now at the end of the post. My questions now are: 1. How can this work with multiple sections as the reference container? 2. How can this work with different bg positions? 3. Why do I need the ratio calc in there' Wouldn't the acutal height of the section suffice? Hope it's clear what my problem is and looking forward to your ideas! Have a nice one!

Alright, thx for clarifying! I did disable the syncInterval now as it did not seem to make any difference, even with the correct implementation. normalizeScroll() set globally did stop the scrolling from working. The user could not scroll at all. I was unable to find out why this is the case. If it matters: we are developing on Vue.js v.2.6. Might be that the threading is mixed up somehow? Oh, sure! I did not use the latest version of GSAP in the Pen but have the latest as of now in use in my project. We did change the code to make it work again. Therefore we removed the conditions with isLopping int he callbacks. If I do this in the pen, it stops working however because then both triggers are called at the same time. In (most) of the browsers, it works fine, though. Did you look at the pen on your iPad or the actual link of the project I provided? If it was the latter, could you try it again now that we've updated the code? It works fine but sporadically stops scrolling as it reaches top or bottom of the page. It should, just as before keep on scrolling due to the endless scroll we implemented. It happens on all mobile browsers and also on iOS as well as Android (at least that's what I tested with browserstack) and the GSAP version does not matter. It happens all the same. Here's the link of the project again and this is a screen cast of what I mean.

Hello there! I tried this but unfortunately, it does not fix our problem. Resizing due to the address bar transitioning in and out still takes place. In my understanding, normalizeScroll() is a method you'd use on the whole instance of your Scroll Trigger, therefore I placed it beaneath the actual initialization. Not sure if it does something now. Also, if I store the instance in a variable and use it like so this.scrollTrigger.normalizeScroll(), it's throwing an error saying that normalizeScroll() is not a function. Does this only work globally on all instances? If this implementation is correct, the problem could still persist due due to the fact that we're on the latest iOS which was pointed out to not work with normalizeScroll(). Seen in the docs with: I then tried ignoreResize: true as a config parameter which also does not seem to change anything. In the updated pen attached, you will find the way I implemented both methods. Might be that I missed something. https://codepen.io/spar-nation-alleluia/pen/ZEaXrKx Due to these (to me) unresolvable issues, I reverted back to the code to make it at least work. I found that on mobile, the trigger does not work at all anymore. Pen reflects current code. Does anyone know why this is the case? In CodePen, it does work just fine. This is the link to the screen capture of the live project to help you understand the problem: https://drive.protonmail.com/urls/3W8WQVTPXM#GcTSjdGcPQkv Thanks for your help guys and have a nice day!

Update: after implementing and testing the code suggested in the articles above it seems again that only setting the body element to overflow: hidden and it's child to overflow: auto (as described in my post above) helps to prevent viewport height changes. This can't be the solution, though, because the markers flicker in their position and are not fixed as you would expect it from desktop experiences. Is there something that can be done here? See the screen cast on iOS 15.3.1 on Safari here: https://drive.protonmail.com/urls/YMTBPAXHZW#tLm15WgQq1QO Additionally, if none of the options described in this thread are applied, the scroll trigger does resize but only once the user has finished scrolling. This does not work reliably as it should happen immediately after the viewport changes. Is there some option or function to tell the scroll trigger to resize immediately rather than waiting for the scroll to finish? See the screen cast for this issue on iOS 15.3.1 on Safari here: https://drive.protonmail.com/urls/A1FCWDTY44#qyesN99JRMP3 The code is in both cases the same as in the OP, instead of changing the scroller for option 1 to the overflowing child container like so (done with Vue.js v2.6.12): this.scroller = document.getElementById('scroller'); createScrollTrigger() { // ... this.scrollTrigger = ScrollTrigger.create({ scroller: `#scroller`, // ... }, Pen posted again here for the sake of completion: https://codepen.io/spar-nation-alleluia/pen/ZEaXrKx Greatly appreciating any help and thanks in advance!

Yeah, that's so. We found some workarounds, though. What we did was to set the height of the html and body elements to 100% and prevent the body element from overflowing. Then, instead set its child (or the one with all your content) to overflow: auto and also set it's height to 100%. This way, you can prevent the address bar from moving in and out. There are some other articles on that topic that I discovered in the forum here. I will link that here just in case they could help someone. First, there is CSS Tricks with an overview and then Matt Smith with a WebKit solution. Not tested though but will do that now since we encountered another issue: the markers of the trigger scroller-start and scroller-end, seem to react to the actual scrolling. They flicker and move up and down quickly by about 50px or so. This might be the reason for why the scroller does not work reliably on mobile browsers (issue encountered on all mobile browsers). Maybe that's just due to the way I implemented this. Will keep this thread updated, though.

Hi all, we recently did a project with a scroll trigger that creates an endless scroll behaviour. See attached codepen for the markup. Therefore, we need the callbacks of onLeave and onLeaveBack to trigger immediately, also while scrolling: as soon as its marker is hit, the scroll position is updated to either top or bottom 0 values. It works fine on all desktop browsers but not in Safari. It kinda "waits" until the scroll is finished and only then navigates. This means the scrolling stops for a sec, updates the values and then the user has to start scrolling again. Ideally, this should be one fluid motion. Did anyone ever encounter this issue and knows some way to fix this? We think it might be Safari's easing of the scroll that interferes. I'm not sure if you guys can see this in the CodePen example cuz this seems to work just fine. We think this is due to the fact that the interface does not change when scrolling is happening, e.g browser bar moves in and out. So here is the production website https://dev.mensingtimofticiuc.com as well. Thankful for any hints or tipps and thanks in advance!

Hey @Cassie, thx for your reply. I tried it and it did work, indeed. Just modified the flag to be controlled by a scroll event listener to keep it dynamic. In my application, I additionally used a slight throttle (lodash) of 10ms. The only problem is that it sporadically stops working. So for instance I scroll a few times upwards, which works, then scroll downwards and after a few times, the callback gets executed but does not perform the scrollTo. I adjusted my code to only work with one Scroll Trigger to eliminate the possbility of the two Scroll Trigger instances messing with each other (should work, though) and also to keep my code relatively lean. Still, the same error occurs. This is also experiencable in your demo. I tried to update my pen but for some reason, the scrollTo with document.body.scrollHeight does not work anymore. If I put in a number in px (500, for instance), it does work, however. I think it's due to the fact that the reference to scrollHeight does no longer yield a result. https://codepen.io/spar-nation-alleluia/pen/ZEaXrKx So, my questions are: 1. Does anyone know how to fix that to make the demo work 2. If the demo works: can you guys see the issue described above (alternatively: check out @Cassies modified pen) 3. How can this issue be resolved? 4. on mobile: anyone ever had the issue of having to resize the scroll trigger after the OS-browser related menu bars opo up? How would I go about that? Puh, a lot, I know. Hope anyone here can help out! Thanks guys!

Hey guys, I've recently been working on a site that features endless scrolling, meaning, as soon as a user reaches the end of the site (.outro in the CodePen example), the site should jump back to the top. This is done seamlessly by repeating the intro and outro component (components meaning SFC's via Vue.js 2.6). With the help of the ScrollTrigger, this works like a charm for top to bottom scrolling which is managed by introScrollTrigger. Now I'd like to implement this also for the other scroll direction. Therefore, I set up another instance of ScrollTrigger, outroScrollTrigger, which sets the scroll position to the end of the site as soon as the bottom of .intro is reached. It technically works as well but as you might've guessed, they trigger themselves once a user scrolls down and jumps back to the top because the other trigger kicks in. I attached a CodePen for you to check this issue out. Just scroll and you will see what I mean. To solve this, I thought about another trigger to only set up the outro trigger as soon as, say, a user reaches the middle of the content and when the jump is done, is deactivated somehow again. But then it has to be disabled and activated everytime which seems super cost-effective and not the cleanest approach to handle this. Has anyone of you ever encountered this before and knows a solution to this? Any help would be greatly appreciated! Thank you guys in advance and have a great day wherever you are!

Hi Zach, Thanks for your reply. Sure here it is. Forked this one from another Vue library called "vue-flip-toolkit", which kinda illustrates the desired behaviour. The blue box should be an image, which, on click, leads to a new route and transitions the image to full screen or some different size. I also added the GSAP function and id's but uncommented it to indicate where I reckon they belong. https://codesandbox.io/s/tzq9r Oh really, that would be really helpful! Is there any due date when we might be expecting these tuts? Will look into that lib you mentioned, though...

Hi all, first of all thanks for the new Flip-Plugin! All I saw are supernice and easy transitions. Currently wanting to use it in a project, where I transition from an image on a project-list.vue to some kind of header image on the respective project detail page. It is the same image but two different instances of it and, of course, they're lying in two different files and also routes. From what I saw in the Flip-Plugin, it is totally possible to animate two different targets but I was wondering how that might work if the targets are not in the same file. How can I get the state of the other target? Emitting an event with the state as a payload will problably not work as project.vue will only be loaded once the user navigates to it. This is btw. exactly whats the purpose of this animation: a page transition. This example only uses two divs in the same file. Short excerpt of my code looks like this: in project-item.vue // project-item.vue // event handler to start transition <div @click="transitionImage" /> // ... // the html structure with the flip-id <image-zoom v-if="project.fields.image_top.length && isCurrent" :image="project.fields.image_top[0]" class="image" data-flip-id="img" /> // ... transitionImage() { // TODO: get state of other image in project.vue const state = Flip.getState('.image') Flip.from(state, { duration: 0.6, fade: true, // make sure iamges cross-fade rather than just swap ease: 'power1.inOut' }) } and in project.vue // project.vue <div data-flip-id="img" class="image"> <base-image :image="page.fields.image_top[0]" /> </div>

Just stumbled upon this issue today and was wondering if there is another way now that we have GSAP 3? Used this approach and it seems to work but also to trigger the animation 2 times. Here's the particular part within my Vue.js v2.6.11 project: accordionEnter(el, done) { if (this.isCurrent) { const enter = gsap.fromTo( el, this.duration, { height: 0 }, { height: 'auto' } ) // Based on: https://greensock.com/forums/topic/12241-get-end-value-of-classname-tween/ enter.progress(1) // emit to default to animate box to enable scrolling to top EventBus.$emit('current-item-height', el.offsetHeight) enter.progress(0) } } // code for elements that are not current follow here...

Hi guys, I am currently working on an accordion which, on click on an element, animates it from height: 0 to height: auto with GSAP 3. Height: auto is required as the content is quite dynamic. Additionally, the currently clicked item has to scroll to the top of the page. This works nicely overall but since the content is so dynamic, there are elements which are not long enough to be able to scroll to the top of the page but just by the amount of their respective height. I came across the idea to insert a <div> between the accordion and its sibling, the footer, which stretches in its height accordingly to extend the scrollable area. This would mean to pull the height in a kinda real-time fashion from the currently opening element OR know the height its giong to be before the animation starts and pass it to the div-animation. I found something in the forum which points in a direction but its now 5 years old and I was wondering if there is something similar in GSAP 3. I am working with Vue.js v.2.6.11 and GSAP 3.5.1. Here's the link of the forum: Also, if anyone has another way how to approach this I am happy to hear! Thank you guys in advance and happy new year to y'all!