Search the Community
Showing results for tags 'scrolltriger'.
-
I am currently creating a page using gsap. When the screen is refreshed or strongly refreshed, the gsap markers are adjusted to a different position each time. If the slick slider is operating in the previous section, the gsap animation effect is entered for each section. Does anyone know why this is happening and how to fix it? gsap.from(".sec_tit3", { scrollTrigger: { trigger: ".sec_tit3", scrub: 1, start: "-100px center", end: "top center", toggleActions: "restart pause reverse pause", markers: true, }, opacity: 0, y: 100, }); gsap.from(".f_notice_list", { scrollTrigger: { trigger: ".f_notice_list", scrub: 1, start: "-100px 85%", end: "top 65%", toggleActions: "restart pause reverse pause", markers: true, }, opacity: 0, y: 200, });
-
Hi folks I am using trying to use this technique Animated horizontal scroll technique in m y project but when I am using it the normal page scroll stop smooth scrolling and page get disturbed. * in my code i just add 2 parent divs ( <div id="smooth-wrapper"> <div id="smooth-content"> ) and its code let smoother = ScrollSmoother.create({ wrapper: '#smooth-wrapper', content: '#smooth-content', smooth: 1, smoothTouch: 0.1, effects: true }); After adding this the horizontal scroll get discrubed. Thanks in advance -
Hi, I'm really stressed, I don't know if you can help me. I tried everything but for some reason the menu keeps moving with respect to the size of the window, what can I do? if I disable the trigger the menu does not move, and also the rest of the panels do not move, the only one that changes is the pined one. can you help me
-
Hi, I want to do something similar to history. There will be years and articles and photographs of that year. And I want to make them parallax when scrolling horizontally. I created a demo codepen. I thought I did that because each panel class needs to have auto-width in itself, but everything overlaps. I am sharing a site as an example. https://transmissions.cristobalbalenciagamuseoa.com/2019-21/moe-matsuoka.html Thank you so much...
-
Hi - I have a simple local website built with Wordpress. GSAP works great here. I have the auth token loaded in my npmrc file and am enqueueing the scripts I need (gsap.min.js and ScrollTrigger.min.js). However, when I copy the files up to my production site (all files match at this point), ScrollTrigger is not working. I'm registering it in my .js file ( gsap.registerPlugin(ScrollTrigger); ) and again it works perfect on my local site. I have searched and not found a solution that helps. Also tried adding (lazy:false) with no luck. I feel like I am missing how to correctly install/use gsap on production server. I've also watched the video on how to install - still think I am missing something. Can anyone give me simple/clear instructions on how to push local site using gsap successfully to a production environment? Thanks!!!!
-
Hello. Tell me how to make the text blocks in section 2 switch instantly, at the first scrolling with the mouse? Now there is a delay and the text blocks don't switch until you scroll to a certain position
-
Hi there. I'm trying to use scrollSmoother for smooth scrolling and various effects. However, i've run into a strange issue. In the example linked, I am using mix-blend-mode to create a "knockout" text effect over a video background. Then I'm pinning the section beneath with scrolltrigger. As you can see, the pinned section is choppy and glitchy looking on scroll. Removing mix-blend-mode on the text section seems to immediately solve this. Just that one line. I don't understand how the two are related, but I'd like to achieve the effect I'm going for with mix blend mode and still have smooth pins using scroll trigger. Any ideas here?
-
hello everyone, i am having trouble with scrolltrigger pin method. i seem to cannot solved is at all , cannot figure out if its reacts problem or gsap need help pleaseeeeeeeee https://codesandbox.io/s/zen-fast-ogesxo?file=/src/App.js
-
I am trying to implement timeline animation where each element will be coming up (from right to left) one by one on scroll down and reverse on scroll up At my end its not working on scroll down but working fine with scroll up I have tried the following. import { useEffect, useRef } from 'react'; import { gsap, Power1 } from 'gsap'; import {ScrollTrigger} from 'gsap/ScrollTrigger'; function WeHeard(props) { gsap.registerPlugin(ScrollTrigger); useEffect(() => { const animation = gsap.timeline({ scrollTrigger: { trigger: ".hearedListing", scrub: true, start: "top 10%", end: "bottom top", markers:false } }).from('.hearedListing li', { x:300, autoAlpha:0, duration:4, stagger:2, ease: Power1.out }); }, []); return <> <section className="heared-listing hearedListing" > <div className="container"> <div className="row"> <div className="col-md-12 text-center"> <h2 className="animate-heading">We heard</h2> <ul className="list-unstyled primary-text-color h4 mt-5"> <li >Here is my line one</li> <li >Here is my line two</li> <li >Here is my line three</li> <li >Here is my line four</li> <li >Here is my line five</li> <li >Here is my line six</li> <li >Here is my line seven</li> <li >Here is my line eight</li> <li >Here is my line Ten</li> </ul> </div> </div> </div> </section> </> } export default WeHeard; I am created a codesandbox here -
I am using the horizontalLoop function provided in the helper functions to animate different lengths of <h1/>s in my NextJS app. I am also using Sass to style my components. I have added the following code in my _app.js to make sure gsap calculates properly: import { useRouter } from "next/router"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; function MyApp({ Component, pageProps }) { const router = useRouter(); const refresh = useCallback(async () => ScrollTrigger.refresh(true), []); useEffect(() => { gsap.registerPlugin(ScrollTrigger); router.events.on("routeChangeComplete", refresh); return () => router.events.off("routeChangeComplete", refresh); }, [router.events, refresh]); return <Component {...pageProps} />; } The problem I think is the refresh is happening before the document is loaded. So, I added the following code in my Marquee component: const gsapAnimate = () => { const boxes = gsap.utils.toArray(`.marquee-item-${uniqueId}`), tl = horizontalLoop(boxes, { repeat: -1, speed: 4 }); ScrollTrigger.create({ trigger: triggerClass, start: "top bottom", end: "bottom top", // markers: true, onEnter: () => tl.play(), onLeave: () => tl.pause(), }); }; useEffect(() => { window.addEventListener('load', gsapAnimate); return () => { window.removeEventListener('load', gsapAnimate); }; },[]); Now, the calculations are correct and it's animating well but when I navigate away from the page and get back, the animation stops. How can I get around this? What I Want: expectation.mp4 Current State: reality.mp4
-
Hi, I'm new to GSAP and having trouble with a specific animation, I made a quick simplified (and ugly) pen to demonstrate the problem. I have two DIV's with separate animation that change on every section, I'm sure there is a cleaner way to do it. Thank in advance.
-
I'm animating the camera in a Three.js scene. I'm able to animate the camera position using a timeline, but I also want to animate a vector3 called cameraTarget to control where the camira is looking. However if I log cameraTarget's values it shows that they actually update but in my scene the camera keeps the same cameraTarget view from the beginning, so basically it's not animating the cameraTarget position. This is my camera and cameraTarget setup This is my timeline And here you can see if I log the cameraTarget values they change as they should, but I don't see the movement in my scene.
-
Hello, got a problem with creating an animation of mine: i have a vertical slides scrollDown-like tween, that has slides of height: 100vh (fullscreen) that i have to snap to screen as slide, and i have to lock scrolling down the slides, when the current slide (that has snapped on center screen) contains an inner div (overflow-y: hidden) that has lots of text, and it has to scroll down (mousewheel commanded) to the end of text before releasing the slides scroll. Of course everything is scrubbed if the scroll is reversed to the top. I have the HEADER + INTRO content which are not slides related content, and the FOOTER that ends the page, that also is not scroll related. Can it be achieved somehow? -
Hello guys, I have 3 questions. 1- How can I tell ScrollTrigger to end the scroll animation when 60% of the div height has been scrolled up? 2- How can I tell ScrollTrigger to end the scroll animation when (70%+5em) of the div height has been scrolled up? 3- Also, another question: I saw this format somewhere: end: ="+500" what does this mean? this is the one I have used but didn't work. ScrollTrigger.create({ trigger: ".s2-wr.projects", scroller: ".sections-wr", start: "40em 0%", end: 'center+=100px center', markers: true, scrub: 0.2, onEnter: () => gsap.to('.s2-wr.projects', { backgroundColor: "#ffffff", duration: 0.2, }), onLeave: () => gsap.to('.s2-wr.projects', { backgroundColor: "#000000", duration: 0.2, }), onLeaveBack: () => gsap.to('.s2-wr.projects', { backgroundColor: "#000000", duration: 0.2, }), onEnterBack: () => gsap.to('.s2-wr.projects', { backgroundColor: "#ffffff", duration: 0.2, }), });
-
Hi, I've got ScrollTrigger on a project and have implemented the pairing of horizontal and vertical scrolling. You can view the example code pen in this post. What I'm trying to do now is do some cool effects on each section as it scrolls into and out of view. I love this example: https://digilab.kunsthaus.ch/en/exhibition/ausstellung-zur-eroeffnung-des-kunsthauses-am-heimplatz?group=switzerland Hoping that someone very talented in these always helpful forums could point me in the right direction. Thanks -
Hi, I'm having issues trying to get horizontal scrolling and vertical scrolling working correctly using ScrollTrigger. I used a starting point from this great CodePen example: https://codepen.io/nicvh/pen/gOeZKOJ What I have done is actually have the horizontal scrolling panels be various widths as that is what is going to happen on the final project and have made the horizontal scrolling sections appear first before the vertical scrolling sections. As you can see from my CodePen example, there seems to be a huge gap at the end of the horizontal scrolling sections. If I make the individual scrolling panels 100% width then it works but for some reason, the x: () function is returning the incorrect value. I've been racking my brain on this for hours and am hoping that one of the geniuses in these forums can help me out. Thanks
-
My camera lags very much.. I dont know why. When its reaches trigger 5 its rotates and then it becomes normal. and when its reaches trigger 7 its lives own life:(
-
https://canal.luxurycollection.ae/ For example, please look at this site. When you go to it, you will see that when you scroll through the first block an animation (rotate) is triggered for the element on the left until the end of this block. I can also start scrolling in reverse order and the animation will also be triggered back. How can I do this? I tried to do something, but it did not lead to anything :( I would be happy for any help! Whether it's ready-made code or if you can just point me in the right direction by telling me what to use for it. Thanks :) -
I'm trying to zoom in into the video playing in laptop but the problem is the image that scale it appeared in the bottom of page , how can I hide it
-
Hello, tommorow I should show this gallery to some important people. The problem is, why on trigger 4 camera rotates 7 times around its axi? how can I solve it?
-
Hi I just started to use GSAP. I am facing some issues with implementation and hope this forum can help out. I am trying to create a component that compares multiple products with different colors. These are the 2 separate variations. But when I try to implement this, I am facing some weird issues. 1. For different widths/heights, the animation starts somewhere in between and doesn't complete. 2. If I have a component above and below this one, the animation keeps going but the below component scrolls along with it. 3. The component doesn't take full height of the viewport. 4. If I try to add a separate tag for background, the background scrolls with the animation If someone might be helpful that would be great. Thank you in advance.
-
Hello friends, when i scroll i want the svg to continue as a downward mask. How can i do that? Can you help me i have a presentation tomorrow. thank you so much... Examples; https://www.lemonade.com/giveback-2019
-
Hi, guys! I'm trying to achieve pinning bottom title of each section in horizontal scroll until section rich screen right side. Can't calculate correct end value for first section title and start/end for second section title.
-
Hi all, I would like to get help with an issue I'm facing. I've made an animation which start scaling after reach at the top of the window. But, I would like to start the scaling when it shows on the viewport. I mean it will scroll slowly and when the section reaches at the top, the animation will be complete. I've searched on the forum and found this can be done with the ScrollToPlugin. As a beginner I'm not sure how I can apply it on my code. Any help would be appreciated.
-
Good day, folks! I would appreciate any idea or workaround for the following interaction. After landing on a webpage and scrolling down to a particular section, I would like to see the background of the section zooms in as the mouse scroll continues (I can make it happen but I need your suggestions regarding the following steps.) 1. A popup appears (but the zoom-in effect stays). Note: That popup contains several slides that move vertically, and it doesn't cover the entire width of the screen, only half of the screen, leaving almost equal space on each side 2. I want to get the Nested Scrolling effect like the background with zoom-in effect stays until I'm done with scrolling until the last slider. 3. Also, while scrolling, I need to apply the Scroll Snap effect to each of those sliders. I would really appreciate your support. Thanks in advance!
- 1 reply
-
- 1
-
-
- scrolltriger
- scroll snap
- (and 1 more)
