Jump to content

Search the Community

Showing results for tags 'scrolltriger'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hello everyone, i try to make this example https://codepen.io/oldskool123/pen/mdrrbyo in react js, but i don't understand why what I did does not work, I am applying what I saw in the documentation but it has not worked, I want to learn how to use this great tool but I have not been able to apply a more complex example in react js. I need some guidance, thanks. :') Here the code sanbox https://codesandbox.io/s/gsap-react-horizontal-scroll-mr4gb1?file=/src/App.js
  2. I have sections and one of them has boxes. I would like to have the snap effect for each section and each box Is it possible to have the snap effect for nested elements? As far as I understand native CCS snap does not work with nested Elements.
  3. Hi there, I'm trying to replicate this effect: https://codepen.io/jayanthracharya/pen/OJxyPpa but I can't figure-it out how to make this working with ScrollTrigger. Here my demo: https://codepen.io/maqquo91/pen/YzjqJZw Any Ideas why isn't working?
  4. Hi folks, I'd like to control the scroll behavior by forcing it to scroll to the next section. I've tried to follow this example https://codepen.io/GreenSock/pen/NWxNEwY but my pen isn't working. It is stuck to the first section. Do you have any idea why that's happening? Here is my demo: https://codepen.io/maqquo91/pen/LYBNovZ Thanks in advance
  5. Hi, I wanted to create a vertical/horizontal scroll but I've meet a problem where when using react 18, project just dont work. Could someone help me fix this issue so I can use react 18? https://codesandbox.io/s/test-forked-i9ng90?file=/src/App.js
  6. Hi! I was trying to achieve a similar effect to this codepen (found it in the gsap showcase) , but without all the complications of the loop. Most precisely, I was trying to achieve that instant snap effect, but without restarting when the array ends. Something exactly like this. I spent several hours yesterday without catching it, I would really apprec.iate any start point to work arround. Thanks in advance
  7. Hello, I want the footer part to come from the bottom like a parallax. I did it partially, but there is a space at the bottom. Can you help with this?
  8. Hello, the problem I'm facing is that when I scroll pin, the top part gets darker and smaller slowly. I made it smaller, but I couldn't center the beginning in the darkening part, you will see other markers. When I do " start: "center center , end: center center"," the markers do not appear. When the site is first opened, it is not actually white, but actually a very slightly dark color. This should not happen with white > and then > dark tone with scroll... I would appreciate it if you could help. I am sharing the test link I made in this project. https://clever-seahorse-227af4.netlify.app/
  9. Hello, first time asking here, hope I'll do it well ^^ On my pen, I successfully got a sliptText animation starting when mouseenter the black box. But at first, I was expecting the sliptText animation starting when #creation enters in viewport (using ScrollTrigger) which isn't the case here. Any ideas ?
  10. I want to change my horizontal scroll element click on tabs . I try it in my main project but I can't do this. Codesandbox Link : https://codesandbox.io/s/horizontal-tab-content-xfwmwn I just simply make this template for fix this. so, please help me to complete this. Please Thanks..
  11. Hi, when I add multiple videos, the video scrolltrigger is also giving problems. Can you help me?
  12. Hello, I want to play and pause video with horizontal scrolltrigger. I did the playback but couldn't find a solution to stop it. Can you help me?
  13. please help me. i must make animation like this https://drive.google.com/file/d/1D_XU-TUWO5_emH4sR_UaAhZz_ZxnP-85/view?usp=sharing
  14. 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, });
  15. 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
  16. 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
  17. Sukru

    Horizontal Timeline

    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...
  18. 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!!!!
  19. 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
  20. 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?
  21. 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
  22. 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
  23. 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
  24. 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.
  25. 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.