Search the Community

Hi, I need to switch content by scrolling. [ALD-2-distance line- ], [ALD-2-distance-text] [ALD-2-traced-image] Radiological zoning from 1970. Gambier Islands located 273km from the test sites are placed just outside the limits of the so-called danger zone, as if it is possible to determine precisely through a straight line how the wind and nuclear fallout would behave. [ALD-2-dz-atolls] [ALD-2-traced-image] [ ALD-2-dzone1] [ALD-2-dzone1-area] [ALD-2-dzone2] [ALD-2-dzone2-area] Tureia and Tematangi atolls – both with small populations – are too close to the test sites to be excluded from the danger zone like Gambier islands. However these are not the only islands within the danger zone where local people lived. Another 300 people temporarily inhabited Maruteia and surrounding atolls. Some of these atolls have houses where polynesians temporarily stay or are used for coconut plantations, fishing and nacre (mother of pearl) cultured pearl farming. However, these atolls were registered as simply uninhabited n the official french documents. Each text paragraph explains map. These are names of may layers: [ALD-2-distance line- ], [ALD-2-distance-text] [ALD-2-traced-image] I have logic to transition map layers but don't know how to interactive with scrolling. Text paragraph is placed in the left top and mapbox is full screen. When I scroll down or up, each map layer changes and text paragraph should be sticky. Scroll down. [ALD-2-distance line- ] disappear, [ALD-2-distance-text] disappear, [ALD-2-traced-image] appear Scroll up: reverse above actions Text panel: Radiological zoning from 1970. Gambier Islands located 273km from the test sites are placed just outside the limits of the so-called danger zone, as if it is possible to determine precisely through a straight line how the wind and nuclear fallout would behave. During these 3 scrolls, text panel is sticky in the left-top. Text paragraph is placed in the left top and mapbox is full screen. When I scroll down or up, each map layer changes and text paragraph should be sticky. Scroll down. [ALD-2-distance line- ] disappear, [ALD-2-distance-text] disappear, [ALD-2-traced-image] appear Scroll up: reverse above actions Text panel: Radiological zoning from 1970. Gambier Islands located 273km from the test sites are placed just outside the limits of the so-called danger zone, as if it is possible to determine precisely through a straight line how the wind and nuclear fallout would behave. During these 3 scrolls, text panel is sticky in the left-top. It repeats again and again. Please submit the abstract solution and reach out my email: spring.scene@hotmail.com or alexgreat609520@gmail.com

Hi, I'm new here and I hope I do this correct 😬 In my codepen I think you can see what I'm trying to do. The page scrolls vertically until it gets to the projects-section where the pages starts scrolling horizontally until the last contact-section. Now, everything works, but I'm not happy with the result. 1. When you scroll down, and leave the last project, the page kind of takes a "shortcut" down to the contact part. In reverse the same happens when you leave "projects" and enters "about". I believe this has to do with the scrub-function(?), but is there a way to get around this? 2. The horizontal part scrolls smooth, but too fast I think. Help please. 3. As mentioned, the horizontal part scrolls smooth, but not the vertical. Can I wrap the whole thing in another scrollTrigger and add a scrub, or is there a better way to get smooth scrolling through the whole page? I know it was a lot, but if I just could get a hint on at least one question I would be super thankful. Cheers

Hi Guys, I am trying to create a seamless "clipMask Text Marquee", with a timeline. The tl is started (and paused) by ScrollTrigger. Basically everything works as desired, but I have trouble with resizing. The height of the text (trigger Element) is changed by a js function. After Resizing the hight, the position of the triggers become wrong. Is there a way to update them? Or is there generell a better apporach? I am not a big expert (as you guessed) and very thankful, for honest “code critique”. Furthermore I wonder, if and how I have to kill the timeline in PJAX-context. By now it works, when I kill the ScrollTrigger (before entering) the Page and call the createMarquee (after entering) again. Is this enough or is the (old and unused) Timeline (created by function) still present somewhere in memory? Sorry for my English and many thanks in advance.

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?

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

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.

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