Search the Community
Showing results for tags 'scrolltriger'.
Found 241 results
-
ScrollTrigger, Locomotive Scroll, React parent-child components problem
DMIND posted a topic in GSAP
Hello guys. Please help me with some strange behavior. I have parent component (React) where i initialize ScrollTrigger.scrollerProxy with Locomotive Scroll as you recommended in docs (scrollerProxy). If i try to use scrollTrigger inside that parent component (using useEffect) - everything works fine. But if i use scrollTrigger inside child component and provide the same scroller element (with id #smooth-scroll) then i have an issue. I've already tried: to call ScrollTrigger.refresh() inside child component; make reference (useRef) to locomotive instance in parent component and pass it to child via props; make reference to scroller element using useRef inside parent and pass it to child via props; to initialize ScrollTrigger.scrollerProxy with Locomotive Scroll inside child component - this works, but if i have bunch of elements which calling this initialization - i have terrible performance issue. So i think the best way is to provide only one initialization inside parent (i.e. page) and pass it somehow to child components. Link to Codesandbox (to see smooth scrolling click "Open in new window" icon at top right in browser panel). Maybe someone else have the same problem? What i do wrong in this case?- 5 replies
-
- 1
-
-
- scrolltriger
- react
- (and 4 more)
-
I'm working on a loading animation that will transition into a page scroll scrub using ScrollTrigger, but I can't get the two pieces to mesh properly. Here's what we want: the sprinkles start off screen and fly up from the bottom (this is working) they fly up to a somewhat random y translation and random rotation (this is working) then, on scroll, I'd like them to scrub to their desired y translation (0) and rotation (defined in CSS) — this part is not working As you can see in the codepen, once you start scrolling, it seems like the translateY jumps back to 100vh and then scrubs to 0. It's not keeping the new translateY value that it's animating to on the initial load. I assume there is a way to reassign or save that y value to use in subsequent animations, but I can't figure out how. Hopefully that all makes sense—let me know if anything is unclear.
-
Hello, I have a problem but I can't seem to find an answer. I have this custom modal that has a Fixed position but it's scrollable since there is a lot of content. I need to animate something inside the modal so I create my scrolltrigger when I open the moda, but the trigger doesn't seem to work. Even if I scroll the trigger line never moves. I left an example as a codepen also I left an image of my site, on the image the start never moves to the scroll-start line of the trigger never move. I try using the scroller property but it's not working either. Any solutions I could try??
-
When the window is resized the ScrollTriggers are in the wrong place. The CodePen example catches this when you resize down. But on the live site, Business Bookkeeping and Accountancy - Blossom Books, it happens when you both resize down and up. Also I have a side issue where the element markers don't show on resize. I need to refresh for them to reappear. I've kinda fixed it I think by re-running the fadeInRotateParagraphs() function on resize but that's a bit janky (I haven't pushed that to the live site just yet). I'm pretty sure it's me not you. What am I doing wrong? Thanks
-
Greetings, I'll go straight to the point. Here's the expected behavior: - I would like the whole section (hero) to smoothly start scrolling out and lose opacity once end of the side panel is reached (last of the 'hello' blocks). Here's what currently happens: - The hero doesn't take enough space (I think?), and the section following it goes above it once a scroll point is reached. The hero doesn't fade out (I realize I haven't done anything for that part, but I'm not sure how to implement it so that it starts fading out once the end of the side panel is reached). Kind regards, Fidda
-
Hello, I have a question although I don't know if I can't find the answer here but I thought I should give it a try since I exhausted all other options. I have an image/video that needs to be pin and it's going to be move to another section, so what I need it's to be able to un-pin the image once the center of the image/video hits the center of the content of the section. The problem is that the image can be larger or smaller depending of the size of the screen (since it's inside a grid) so I don't know how to calculate this so the centers always meet regardless of the image size. Any help would be appreciated
-
How to seamless change background color with gradient between section
kevchcm posted a topic in GSAP
Hello, I'm working with scrolltrigger and I'm trying to create a background color from white to blue when the users scrolls. The problem is that I want that transition to be very smooth but the results I have it's that the blue color appears once the trigger starts. This website show an example of what I am trying to do https://demosnappy.webflow.io/product Here is a video as well Screen Recording 2020-12-03 at 9.16.57.mov -
Hey, This is my first post on the forum, loving gsap! I've ran into a little bit of an error. I have an SVG clip-path that I wan't to perform a simple scale animation on when in the viewport but for some reason it does not want to run in safari, I'm fairly new to gsap so don't have much experience troubleshooting SVG animations, so any help would be appreciated, cheers! NOTE: I've not included the scrollTrigger library on the codepen just so you don't have to scroll to play the animation, the bug still stands.
-
Animating elements with same class when each enter viewport with ScrollTrigger
dhaliwallambi posted a topic in GSAP
Hello, I want to animate images with same class when each of them enter the viewport. I've 5 images in my codepen each with a class 'z-out'. My JS is let exptl = gsap.timeline({ scrollTrigger:{ trigger: ".z-out", start: "top 85%", end: "top 5%", stagger: 1, scrub: 2, markers: true } }); exptl.from(".z-out", { x: 100, opacity: 0, duration: 1 }); The problem is when the 1st image enters the viewport, the animation happens for all the images. So, When I scroll further animation is already occured. I'm using this for my portfolio, I want to animate the some images with a common class when each enter the viewport. I don't want to create multiple classes and a tweens for each of them. Codepen: https://codepen.io/SahiljeetSingh/pen/qBNedNK -
Hi, I'm fairly new to GS and I'm already loving it. Thanks GS! So, in the demo... Cards change to a dark green color if they are in focus (basically, 80% width) and scroll when triggered. Issue 1: If we resize the window (eg: 50% width), we will notice that the animation works but the scroll positions are all messed up, including the background-color. Any idea on what I might be doing wrong? Is this implementation correct? Issue 2: If I change my (vue) route and come back to this view, I notice the trigger points have moved way down in the doc flow and thus my triggers don't work and the animations also doesn't work. Although, if I resize the window/ refresh the browser - Everything works correctly. (I'm finding a bit difficult to demo this issue here) Kindly help me, I've been searching for a solution for quite some time... Thanks.
-
Hi Everyone, Trying to figure out how I would initiate scroll trigger if my trigger was more then half way down a page. As you will see in my codepen example, the graphic I'm trying to animate which is below the purple container has already ran through the animation timeline without any scrolling interaction. I set up my trigger to start at ".center-container" but that doesn't seem to work any longer. How would I go about finding the exact start value of my trigger or how I get it to start properly at my desired trigger point? What should happen is when a user scrolls to that section/div it will cycle through animations until the end of that container. Thanks!!
-
Hey guys, I have a question regarding this plugin. I have a website that uses horizontal scroll, the main div has children sections and the sections have their content. Now a I have a separate navigation menu on top and what I need to do is to show which section you're in, so I need to track when a section has pass the middle of the screen so I can highlight the navigation menu. It's there a way to do this with this plugin. I don't have a codeped but here is the link to my website https://dev-shapetx.pantheonsite.io/ This is the code that I use to initiate the plugin this.scroll = gsap.to(this.container, { x: () => -( (this.container.scrollWidth - document.documentElement.clientWidth) ) + "px", ease: "none", scrollTrigger: { trigger: this.container, invalidateOnRefresh: true, pin: true, scrub: 0.2, end: () => "+=" + (this.container.scrollWidth - document.documentElement.clientWidth) } });
-
Hi Everyone, Having a small issue with using the pin property in scrolltrigger. I have a multi layer svg inside of a single div. When you scroll down different layers of the svg should appear and other layers should hide. I was able to accomplish this (with the help from this amazing forum) using css (position: fixed) but I'd like to see if this is possible using the pin property instead. As you can see from my pen when I scroll down all the layers appear. The scrolling svg should stop at the top of the second container div. Should I be using pin this way or should I separate the svg layers I have into separate svgs and add each in to separate divs so I can get pin to work? Thanks!
-
Hello, Thought I would post on here in case anyone has any good references on how I could recreate something similar to the section starting with 'Real Estate' on this example website: https://videinfra.com/ I am planning to use ScrollTrigger and pinning the overall section. Then translating the images and text based on different triggers. Just need some examples of how to translate the images in a similar way. If someone has a sample Codepen or other reference they could share I would really appreciate it.
-
I'm trying to figure out how to target the element within a batch process on scrollTrigger. In my simple example, I have a script that is using scrollTrigger to look for all elements with a particular class. When it comes into view, I'm toggling a class to change the color. I want to be able to possibly run other functions on that element as well. For example, I may want to add another class to it. Or, I may want to delay it based on a data attribute. But, I can't seem to figure out how to get each target element. I tried "this", I tried "this.target". I tried $(this). For the sake of this question, let's just say I want to add another class to each element after it comes into view. I would have thought something like this would work, but I must be doing something wrong. ScrollTrigger.batch(".animateOnLoad", { toggleClass: "inView", onEnter: function() { var element = this.target; setTimeout(function () { element.addClass('animationComplete'); }, 2000); }, once: true }); Any tips here would be much appreciated!
-
Hi there, I'm trying to speed rotation animation on scroll with use of ScrollTrigger. It works pretty well except when I do a fast scroll the rotation gets crazy and I don't really know how to limit the speed... Maybe I do it all wrong, I tried to clamp value but any ideas on how to limit that correctly? Thanks for your help ! Alex
