Search the Community
Showing results for tags 'scroll'.
-
how I can animate my cards like ios notification on lockscreen, attached example scroll I need to make exactly the same card scroll animation position, transparency, movement, all this should be as similar as possible to the example
-
Hi everyone I'm learning Gsap, and I managed to set up a GSAP animation on a collection list with multiple items (currently 3, but the client will add more later). My animation works, but once the last item has been made visible, the page doesn't scroll again. I don't know if the scroll is blocked on the animation section, or if the scroll takes place behind the animation. see here the issue : https://www.awesomescreenshot.com/video/37492533?key=fa46aceeb47f8291b1c8089e8edf0289
-
Hi everyone, I can't get my custom cursor to trigger when the target is hovered over during scrolling. Could you show me how to achieve this based on the following example? Thank you! https://codepen.io/GreenSock/pen/GRYLMzX
-
Hello, I'm trying to create a text effect whose background is a video, and when scrolling down the text grows until it becomes the new screen with the video, I will share the code. I succeeded in the effect I want, which is simply that the text grows and you get the new background. https://codesandbox.io/p/sandbox/new Gaming.jsx Gaming.scss -
Hey everyone, I’m trying to create a scroll-triggered text effect using GSAP, but I’m not sure where to start. Here’s what I want to achieve: Initial State: The text “ELEVATING PERSPECTIVES” should appear in solid white on a black background. Scroll Effect: As the user scrolls down, the video should start appearing inside the text from the bottom. The video should follow the scroll movement, meaning scrolling up/down should affect how much of the video is visible inside the text. Final Effect: Once the video completely fills the text, I want to add a zoom effect on the text for emphasis. I’ve attached reference images of what I’m trying to achieve. Would really appreciate any guidance, code snippets, or direction on how to achieve this effect.
-
How to determine the height of a pinned section based on the number of scroll
Mitiss posted a topic in GSAP
Hello everyone, I am trying to solve a problem of synchronizing a section (pinned with scrollTrigger) with a certain amount of scroll until I reach the end of the scrollTrigger. Basically I have a counter that is inside my pinned section. Once it is pinned I have a Gsap Observer that animates my counter from counterSequence[n] to counterSequence[n+1] (this is obviously for an imageSequence animation). That means each time I scroll inside my pinned Section, I activate an animation of my counter... until I reach the end of my counterSequence (meaning my last frame on my real project). The problem is that scrollTrigger only allows to specify a start and end of the section and I don't know how to synchronize it with my number of scrolls until I finish all my counter Sequences (for now I did end: "+=800%" so that I am sure I have enough space to scroll to get all my counter sequences). Do you have any idea of the direction I should take ? (No need to spend too much time on my codepen just any idea ^^) Thank you ! -
Hello, I want to recreate the slide transition effect on this site: https://elementis.co/destinations. If anyone can help me, here is the CodePen. Thank you in advance.
-
Hello, I want to create a horizontal scroll animation with GSAP, like on this site: https://vantage.ava-case.com/work. I’m wondering if there are any resources I could consult, as I haven’t been able to find them. I found this CodePen: https://codepen.io/GreenSock/pen/BaQXjWw, which seems like a good starting point, but I can’t quite implement it correctly. See my GSAP starter template. Thank you in advance
-
Hello friends! I wanted to create an animation using GSAP and ScrollTrigger, but I can't. The essence of the animation is that when scrolling, the large picture is fixed in the center of the screen and decreases. Then, when the user scrolls to the section with the slider, by default these slides are transparent. As soon as the user scrolls to the slider, this fixed picture should decrease to the size of the pictures from the slider, and then from 1 fixed picture, 3 others should move out from under it to take the place of the pictures of the sliders, after that the title and description should appear in the slider. I was able to fix the picture, but I can't do anything further. Tell me how to do it. Thanks in advance! That is, when the user scrolls the page and sees a large picture in the middle of the screen, the picture itself should be fixed. Then, when scrolling down, it should decrease (I think it should decrease to the size of the pictures that are located in the slider) Then the user scrolls down and sees the section with the slider. Initially, the slides are transparent by default. But we see a fixed picture in the center (which we fixed earlier). And as soon as it becomes at the level of the pictures in the sliders, 4 pictures should come out of this picture (possibly under 1 large one, place 3 more that will be transparent). And these pictures should be placed in the place of the slide pictures, after that the title and description should appear in the slides.
-
Hello, I'm trying to create a diagonal scrolling effect on a large div. I have a wrapper div that is pinned and hides the overflow, and a grid div to diagonally scroll over. My problem is that despite setting pinSpacing to false, if you scroll down to the end of the animation pinspacing is suddenly set to true, and the page is doubled in length. This spacing does not appear before reaching the bottom of the animation, as indicated by the scroll bar. Any help is appreciated.
-
I’m trying to make a grid at first only first div of the grid should be visible then it should zoom out and show the other grids like this
-
Hi, I am stuck in a position where I need some help. I am currently using using these scripts on my webflow website: <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/Observer.min.js"></script> <script src="https://unpkg.com/splitting/dist/splitting.min.js"></script> <script src="https://qe6cmz.csb.app/script.js"></script> This is the working Animation and It works perfectly https://www.judexaya.com/anomalies But one I use a Hash link to navigate to my slide, it show the correct slide but then the animation breaks and It won't work. Neither the scroll works nor the Navigation buttons works. Here is the link to the Problem : https://judexaya.webflow.io/anomalies#ZENITH Is there any way to fix this problem? I want the animation to work even with the URL with hash.
-
Hey everyone, I'm new to GSAP and trying to learn. I've hit a roadblock. I'm trying to make something scroll immediately after it's pinned, but it's not behaving as I want. When it gets pinned, I need it to jump to 25% right away, and then jump again to the next 25% each time I scroll. Even though I tried adding snap, it's not happening instantly. I don't want it to stop scrolling at any point except every 25%. Something like this but I want it in GSAP: https://codepen.io/Fahad-Aameer/pen/YzgmeGY
-
Hi, community! I need your help with making this 3D carousel. It has multiple effects like, scroll effect, drag effect, hover effect. Is there any example which has all of these effects or could you kindly guide me? Thanks advance for your help! vlc_L4LvqzyFxC.mp4
-
Hi there! I'm trying to make this horizontal section to "stick" or "snap" the next or prev slide based on the scroll wheel event, but i'm unable to do so. The main goal is, no matter how long the scroll event lasts, it should simple move/scroll to the next or prev slide. Am taking the wrong approach for that (using scrollTrigger and end())? https://codepen.io/jimmyadaro/pen/jOWaZZV I've tried copying this Codepen since it achieves what i'm looking for, but had no success with that. https://codepen.io/mikeK/pen/eoyrWK?editors=0010
-
as you can see on CodePen, my scrolling is not smooth (at least the horizontal animation), I've tried to add ease for horizontalLoop function but it didn't work, what should I do? I don't have much experience with ScrollTrigger, that's my first time using it. what I want to achieve with this section is a smooth horizontal scrolling, like, take more time after scrolling in a more natural way than now. One other thing, if you notice, the cloned items (I clone the images inside the row to make the seamless loop with js) don't have space between the first and last item of the row, I also don't know why, I've tried adding some margin left to the last item but that didn't work because of gsap transforms (to make animation alive).
-
how to create this pinning effect the same as this website https://www.airvoir.com/
-
Hello GSAP people, I already know the answer is probably easier than I think, but I can’t seem to figure it out. Here’s a small demo: https://codepen.io/PhilippeGoulliart/pen/PoMwPoX I'm trying to set up horizontal scrolling of the "train" inside the frame. The problem is that when I reach the middle of the scroll, I expect to see only the purple square—meaning that the train has translated by 33.333%, which is half the translation I want. However, instead of seeing only the purple square, I end up further into the timeline, seeing half of the purple square and half of the pink one. I’ve tried adjusting the scrub to a number and changing the easing values, but nothing seems to solve the issue. Thanks in advance for any help you can provide!
-
Hello everyone, Im new to Gsap, I'm trying to learn it. but right now I'm stuck at creating a vertical animated Timeline. i also applied scrollTrigger but my code is messed up!. Please look at my code. once and correct my mistake. This is what i want to make :- https://youtu.be/qTeqwp7Uvro and this is my code pen:- https://codepen.io/Mohit-Mishra-the-looper/pen/abggwpx?editors=1000 what i want is that. 1. when user scrollDown the height of the ".timeline-inner" will increase. and when the ".timeline-inner" hits the ".dot" of the specific box then the opacity of that's h2 and paragraph become 1
-
Hi guys does anyone has a clue how to do a double horizontal row with a scroll in React Native. I've already made a double row scroll with 2 lines but there's 2 scroll (one on first line and second on second line). I would like to create, for example, 3 blocs on the first line and 3 blocs on the second line (and the others blocs). If the user scroll on top, second line scroll too and vice versa Before scroll : Line 1 : 1,2,3 Line 2 : 4,5,6 (and 7 to 20 hided) After scroll : Line 1 : 2,3,4 Line 2 : 5,6,7 (and 8 to 20 + bloc 1 hided) import React from 'react'; import { View, Text, StyleSheet, ScrollView, FlatList, Dimensions } from 'react-native'; const { width } = Dimensions.get('window'); const itemWidth = width / 3; // Largeur de chaque élément (3 colonnes) const listData = Array.from({ length: 20 }, (_, index) => ({ id: index.toString(), title: Item ${index + 1}, })); const GridItem = ({ item }) => ( {item.title} ); const HorizontalScrollingGrid = () => { return ( horizontal showsHorizontalScrollIndicator={false} directionalLockEnabled={true} alwaysBounceVertical={false} > contentContainerStyle={{ alignSelf: 'flex-start' }} numColumns={Math.ceil(listData.length / 2)} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} data={listData} renderItem={({ item }) => } keyExtractor={(item) => item.id} /> ); }; const styles = StyleSheet.create({ item: { width: itemWidth, height: itemWidth, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0', margin: 5, borderRadius: 8, }, itemText: { fontSize: 16, fontWeight: 'bold', }, }); export default HorizontalScrollingGrid;
-
First of all sorry, but I can't provide a codepen, I will try to describe the problem the best I can. Basically I have this type of structure: <div class='middle'> <div class='canvas-holder'> <!-- [Three.js Canvas] --> </div> </div> This is the CSS each of this element have: .middle { position: relative; margin-top: 7rem; } .canvas-holder { position: absolute; height: 100%; // [Three.js Canvas] canvas { position: sticky; top: 0; } } The Three.js canvas has a certain size (window.innerWidth, window.innerHeight), with GSAP I wanted to animate the position of a model inside the Three.js canvas. I wanted to move up the model by 5 when I scroll, so I wrote this: // peeler_model is the model I want to move gsap.to(peeler_model.position, { y: 5, scrollTrigger: { target: middle_div, // I wanted to take the div as a reference point for the markers start: "top top", end: "bottom bottom", scrub: true, markers: true } }) Now with this what I thought would've happened is that by setting the target as the middle_div the first top at the start would have went at the top of the middle_div like this: But instead what happened was that START went at the top of the body. I don't know how to really fix it, I used percentages instead of top and bottom to fix it a bit, but it would be really helpful if top would go at the top of the target like it always did for me. The only thing I can think of of why this is happening is because the canvas has a parent with absolute positioning, but that's really strange. Anyways thanks in advance for the help.
-
Hello Guys, iam trying to recreate this scroll animation https://lulufinserv.com/products/gold-loan/ on this section "10 Reasons that prove LuLu Gold Loans", i tried creating it https://codepen.io/Rare4pple/pen/BagJrNv . but im stuck
-
Hello Everyone My Gsap working correctly with scroll trigger on desktop however not working correctly on mobile As you can see in video, on mobile scroll trigger not work well and I think the issue have relationship with start and end Any idea to fix it ? I attached demo link Desktop : https://streamable.com/bg7m8s Mobile : https://streamable.com/jvksfn My Code Snippet export const fadeInUp = ( element: HTMLElement, isScroll: boolean, delay?: number ) => { const fromOptions = { opacity: 0, y: 50, }; const toOptions = { opacity: 1, y: 0, delay: delay, duration: 1, }; if (isScroll) { const scrollToOptions = { ...toOptions, scrollTrigger: { trigger: element, toggleActions: "play none none reverse", start: "top 60%", // Adjust the start value for mobile end: "top center", markers : true }, }; return gsap.fromTo(element, fromOptions, scrollToOptions); } return gsap.fromTo(element, fromOptions, toOptions); }; Thank you
-
When i enable pin on my text reveal, it just jumps to the bottom
hdjdgskshdjdnfkshshd posted a topic in GSAP
Hello there, at first it works good, but after i enable pin it just jumps to the bottom and only works when scrolling back up, how can i pin it the same position and after the revealing is done, and then i can scroll pass that, thank you in advance, i attached a video (sorry for the compression, 1mb limit) const About = () => { gsap.registerPlugin(useGSAP,ScrollTrigger); const text = new SplitType('#target') gsap.from(text.chars, { scrollTrigger: { trigger: "#target", start: 'top 70%', end: 'top 00%', scrub: true, pinSpacing: false, markers: false }, opacity: 0.1, y: 20, stagger: 0.01 }) return ( <div className='about content-center items-center text-center overflow-hidden py-12 p-5 lg:px-72'> <p id='target' className='lg:text-5xl text-3xl font-bold text-neutral-200'> I’m Dilukshan, a fullstack web developer from Sri Lanka with a passion for creating dynamic and engaging digital experiences. </p> </div> ) } Desktop 8-6-2024 1-34-01 Am (2) (2) (2) (2).mp4 -
Hi, Can you help me to do this nicely? My requirement is First, when this section enters the viewport, it should become sticky. While sticky, the image should zoom slightly based on the user's scroll direction—zooming in when scrolling down and zooming out when scrolling up. Next, as the user continues to scroll, the product backside and price should animate into view from left to right. Following this, a cross mark should appear in the middle, cutting through the image. The entire section, including the product image, price, and cross mark, should then fade out smoothly, and image 2 should transition from bottom to top with a slight zoom effect. This sequence should repeat for image 2, where the price animates from left to right, the cross mark cuts the image, the section fades out, and image 3 appears with a slight zoom. Finally, after completing this sequence, the section should unpin and transition to the next section. Sticky Section: The section becomes sticky when it enters the viewport. The image slightly zooms based on the scroll direction: Scrolling down: Zoom in. Scrolling up: Zoom out. Product Backside and Price Animation: Reveal the product backside as the user scrolls. Animate product price from left to right. Cross Mark and Image Transition: A cross mark appears in the middle and cuts the image. The entire section (product image, price, and cross mark) fades out. Image 2 transitions smoothly from bottom to top with a slight zoom effect on the scroll. Repeated Animation for Image 2: Price animates from left to right. Cross-mark cuts the image. The section fades out. Image 3 transitions into view. Final Sequence for Image 3: Price is displayed. Image 3 slightly zooms on the scroll. Section unpins, transitioning to the next section.
