Search the Community
Showing results for tags 'scrolltriger'.
-
HI, I would like to make an animation which will scroll inside a section. And the BG image will remain sticky until I complete my second scroll. But, I'm unable to complete my animation and need help badly. So this is my need- 1. Main section will remain until I finish the nested Scroll. 2. When The nested scroll first appear It has to an Scale up effect. There will be no effect for the rest. 3. Only 1 nested scroll can be pass at a time. No matter if it's slow or first scroll. 4. There will be an indicator which will be automatically marked. I mean which no of slider is viewing now will have an active color. I've tried the following but it skips the section. https://codepen.io/aaronmeder/pen/vYZGyJq Live Demo URL can be found http://18.136.138.101/ (Under the Globe Section)
-
Hi, while scrolling in horizontal direction. I need the fade in and fadeout effects for the each image. I used opacity also I can't able to achieve that. while scrolling from LTR the first image has to be fade in and scrolled image has to be in fade out. Kindly help me out. Thanks in advance
-
I have a basic gsap animation set up with matchMedia. ScrollTrigger.matchMedia({ "(min-width: 700px)": function () { let containerWidth = parseInt(getComputedStyle(document.querySelector(".see-through")).width); let tl = gsap.timeline({ scrollTrigger: { / .... } }); tl.to(".logo-transparent", { x: containerWidth/2, scale: "0.8" }); }, "(max-width: 699px)": function () { let containerHeight = parseInt(getComputedStyle(document.querySelector(".see-through")).height); let tl = gsap.timeline({ scrollTrigger: { / .... } }); tl.to(".logo-transparent", { y: containerHeight/2, scale: "0.9" }) } }); Now what I want is to update the values of containerWidth and containerHeight on each resize event. I tried adding an eventListener for resize event and updating the variables, but it still has no effect on the animation. Perhaps the animation is not updated on each resize unless the media breakpoints change. What approach can I follow for the desired effect? -
Hi there! So I've setup a purely horizontal scroll site with ScrollTrigger, however now I've added in ScrollSmoother there is no ability to scroll! I did have an issue where it was scrolling diagonally, however I realised I had the wrapper and content selectors the wrong way around. Has anybody else had this issue? The attached codepen is a representation of the site, on the dev site I'm using it with Wordpress & the Divi theme, so if you're wondering why the odd selectors, that's why! Thanks in advance, Ben Elwood -
Hi, I am trying to animated section with scroll created as components in React. You can find a similar effect to what I am trying to achieve here (the text on the right or the images inside the phone). In my animation I would like the headingOne to appear from the bottom of the screen and fade away towards the top of the screen, followed by the headingTow that should come from the right or left followed by the cards while the section is pined and only after the animation finished the normal scrolling would begin again. Doing this I have encountered some difficulties. One of which beaning an error that says ";" expected while using the TweenLite and I don't really see why... Also I am not use that I used gsap correctly. For the headingOne I would like to display it none, but only after the fade away animation finishes so the headingOne would come into the middle of the screen. I would greatly appreciate is you could take a look at the code pen and point out my mistakes. Thank you!
-
Hello, I'm trying to make an animation that switches the viewport's background color depending on your scrolling position. The animation works great on Chrome and on FireFox, but Safari just looks bad, very laggy and the colors don't transition into the page, but rather just pop up with a delay. Here is my animation code (I am using Vue.js) backgroundAnimation() { let $projects = gsap.utils.toArray(this.htmlID + " .project-wrapper"); let projectListTl = gsap.timeline({ scrollTrigger: { trigger: this.htmlID, start: "top center", end: "bottom center", ease: "none", scrub: true, markers: false, onLeave: ({ progress, direction, isActive }) => document.documentElement.style.setProperty("--background", "white"), }, }); $projects.forEach(($project, i) => { projectListTl.to("html", { duration: 0.1, "--background": $project.dataset.projectColor, }); projectListTl.to("html", { delay: 0.3, duration: 0.2, "--background": "transparent", }); }); }, (The method above runs when there is an update on the component) updated: function () { this.$nextTick(function () { this.backgroundAnimation(); const self = this; ScrollTrigger.matchMedia({ "(min-width: 1024px)": function () { self.scrollAnimation(); }, }); }); }, Any ideas? Not sure where to start looking even. Thanks! -
Hello Gsap community, i'm trying to create a Website, where when I scroll through it, the Time of the Video which is permanently in the Background is connected to the Scroll. While i'am scrolling and passing certain points in the Video, different HTML Elements should appear / disappear. So for example from Second 2-6 from the video i want to display elements which explain this part of the video and so on. The Elements should not be pinned tho, because the Video itself has a scroll through like effect aswell. I unfortunatly don't have any working prototype.
-
Hello, I would like to accomplish the following: Step 1. Scroll down to horizontal scroll section. Keep scrolling until image sequence finishes in slide 1. Step 2. After image sequence is finished, we need to horizontal scroll to slide 2. Then, we need to animate a background image position in slide 2 with some overlay text. Step 3. Stop horizontal scroll functionalities and scroll to rest of the page See attachment for a visual explanation. I have a basic understanding of ScrollTrigger, but I think this is a trick which can be implemented in a very specific way. Can someone please help me with this? Thanks!
-
I'm coming to this having started from that support question. Many years ago I'd built a site based on this very old tutorial. Then, a few months ago I got some assistance on this in order to create a simple horizontal scroll, which worked pretty nicely. Today I've started to try and combine the scripts from support question responses, and the horizontal scroll pen, in the one I've included here (somehow I don't think that sentence makes any sense except in my own head) in order to emulate the behavior from that old tutorial. In any case, I'm not sure why it's not really working the way I think it should. I'm still fairly new to gsap, so I apologize in advance for not seeing things that should probably be obvious.
-
Hi all, I just wondered the best practices when using Scrolltrigger and any smooth scroll library? I appreciate you guys want isolated code examples but due to the nature of this problem being sitewide I can't really do that. I'd really appreciate a bit of insight on how to make scrolling interactions less laggy in general. All I'm really doing is using a bunch of scroll triggers, nothing complicated and under 250 lines of code so really it should not be lagging. I don't need someone to fully audit the code or anything, rather I'd appreciate if someone could just have a quick look in the inspector and see if there's anything standing out that's causing my issues. I've come up with a few things that could be causing the problem. - Image size - RAF triggering too much - Not using dynamic scroll triggers with "for each" etc Here's my site i'm using scrolltrigger x asscroll - https://scrollablegsapdemo.webflow.io/
-
Hello there, I have this script in use and it works great. My question now is, how to add a stop at the last slide and start the vertical scrolling with a button. Is that possible? Thanks for your help! Mirja
-
I want to scroll trigger animation on the same element which has a gsap timeline animation running. In my code pen i have two elements ".H1" and ".SpinWrap h1". I want to spin ".H1" while gsap timeline is running, i want to do it in a way that gsap timelines and scroll trigger remember my scroll change value and get updated and keep playing when im not scrolling. If you look at ".SpinWrap h1" i can achieve the result by doing this hack of creating a wrap and target ".SpinWrap" and ".SpinWrap h1" by this way both gsap timeline and scroll trigger keep playing the way i want but i want to know is there any way that i can get the same result without creating wrap or targeting the same element.
-
Hi, here is how I can make the header appear only when the scroll moves up. I think smooth scroll is preventing this because of its own page calculation. I can see it when I go to the top of the page. I want to see the header when I scroll up. Like the example here; https://aydindoganvakfi.org.tr/
-
Hello, I want to do more than one pin operation, but it does not give a proper display in the second iteration. I want to see the visual content again after the pin content and then pin the content again
-
Hi There! I am new in. using gsap but i like it. I am trying to make pages scroll page by page through scrolltrigger all is working perfectly but i want to speed up snap speed from one to another. I not mean this by scrolling speed the speed when we leave the scroll and then snap take the while to set. Is there any solution for this
-
Hello, the structure i want to make is actually auto height at the top and layers from the bottom, and then the last part is independent of the layer. For this I am sharing the image
-
Hello, there is a reference scroll animation in the codepen link. Here, I want both the image and the caption text to appear as zoom in & out, how can I do that? Fade in & out right now I don't want that. Can you help me?
-
Hi, in the codepen example i shared i actually want to do the following. When the image is zoomed, the image goes to the next image and in the same way, it gets visual zoom and its text comes in. Can you help me with this?
-
Hi, I want to animate this three section (red, green & blue), when first(red) section come on top of the browser i want to animate this red section to top, to reveal second section (green). And so one... I almost solved it, but I wish there was no white space between the sections, when scroll. Animation like this: https://teamway.io/ Tnx
-
Hello, I wanted to do a development for my own project, but i ran into a problem. i am using Luxy Smooth Scroll in my project. I wanted to change the image by scrolling with the gsap pin, but Luxy Scroll is causing a problem and I couldn't solve it, can you help? This is my reference codes https://codepen.io/Danish_Khurshid/pen/jOByPGq
-
Hi, Does anyone have any idea how to make an animation from this website https://teamway.io/. It is an animation of three cards, which are animated up on the scroll event. https://teamway.io/ Tnx
-
Hi GSAP champs, I've been working on an animation in which I draw three SVGs located in one section. I'm drawing the svgs with scroll-trigger in same timeline and also pinning that section with pinSpacing: true and the once: true is working fine as expected that it kills the timeline on completion. but the issue is the space that is being added by pinSpacing: true is not removing it self when animation reaches the end. Please help to achieve this. codePen demo is attached already. Thanks in Advance
-
I have a section middle of page and into this section i have inner scroll When user reached this section firstly pin the section until inner Scroll end then unpin the section on the parent scroll child scroll run until child scroll end.... Please i need help
-
I used multiple timeline .When i scroll slowly everything works but scroll quickly animation jump and doesn't work . Anyone if you can help this,plz help me.
-
Hi Team! I'm trying to setup a simple animation with a boat moving along a path as the user scrolls down the page. I had the boat moving along the path correctly, but then I added the next step which was to pin the whole map so you could actually see the full animation before it scrolls off-screen - and this proved kinda tricky! I went through a few different iterations of path-mismatch, and now the boat does appear to be moving along a line of motion, but it's as if the path is rotated 90 degrees and the boat goes bouncing around towards the left instead of going down the map along the dotted line. I must be calling the motionPath before the asset has loaded or something, right? Any other suggestions where I am going wrong will be massively appreciated! Codepen here (brown box in place of the boat) https://codepen.io/Allanw/pen/jOarMaO
