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. Hi All Please take a look at animation in full view mode https://codepen.io/av-fwstudio/full/BaOrYOm Couldn't figure out how we can pin the rim so it will go till the end of the yellow container?
  2. Hi everyone ! I am planning to create this sort of website (refer to the video linked below) where as you can see the mockup of a phone, so in that phone, a lottie animation should run when the user scrolls down and in the right, you can see the heading and some description, while scrolling down, the phone's mockup is stuck through out and doesn't get scrolled down, only the animation inside it runs while the right side of the page (heading and text and all) gets scrolled down. (The phone part is what I have been able to pull off so far, but I am stuck with the part on the right) Please let me know how can I achieve this ? Thank you a lot in advance. @GSAP Helper @OSUblake (sorry for the audio in the video, kindly ignore)
  3. Hello, I'm currently working on a project where I would need to pin a container and keep the scroll going in the right column. However I'm running into an issue where the ScrollTrigger markers seems to be offset with the panels. I can't get the left content ends when it reaches the next trigger. Here is a simplified version: https://codesandbox.io/s/romantic-fast-xwfefy I notice that the speed of the right columns seems to be "parrallaxed" to the markers. What I am trying to do: Coordinate the appearing of the pinned left content while scrolling the right content. Thank you
  4. Hey everyone! I would like to prevent the Scrolltrigger from playing each the time the window is resized; basically, I just want each heading to be played once and never again (except or a full page refresh). I'm aware that a normal tween might've been a better solution for what I'm trying to achieve, but I'm rolling with it for now. Rory
  5. I have a SPA react app in where i have several horizontal scroll triggers which are pinned to certain sections as wrapper. The problem is when i want to scrollY on the vertical to an element that is positioned after the last scrolltriggered section. The problem is the pin mode. What i do is disable and enable all scrolltriggers during scrollIntoView action. The problem on scroll complete (i tried the scroll with gsap.to and window.scrollTo and element.scrollIntoView), when i enable all the scrolltriggers again, the last scrolltrigger recognized the scrollbar having been moved beyond its start/end points and moves to the last position on the horizontal scroll . I think it has to do with the toggleActions: "play pause none reset". I would need to scrolltrigger somehow to tell to not do anything after .enable(false, false) call but it does because of the pin mode. I want to reset only if i move up over then end point again. So maybe disable or override the toggleActions or i have to manually enable/disable and remember the scroll position ... not sure what is the best way. I dont have a code pen as it is complex Any idea
  6. I just started learning react.js with gsap and stuck at this point useEffect(() => { const cx = gsap.context(() => { const tl = gsap.timeline({ scrollTrigger: { trigger: '.home', start: 'top top', end: "+=" + window.innerHeight * 3, pin: true, scrub: 1 } }) }, main_ref) return ()=>{ cx.revert() } }) my question is that, How can I declare this timeline globally because I want to use this timeline in multiple components or there is any other way to perform the same thing. And yeah, this timeline is declared in the App.jsx file which is the main file of my project. Thanks in advance.
  7. Hello all. Total beginner GreenSock user here, please bear with me. I've set up a demo to switch out images on the left while the user scrolls text on the right. It's heavily based on the official "Pinned content based on section - ScrollTrigger" demo. It works ok but I'm looking for advice on how to tweak the functionality slightly. Below is my wish list, but if anyone who cares to help could also explain what I'm missing or doing wrong as well it would be greatly appreciated, as I wish to learn more about GSAP and use it in different applications. The first image needs to be immediately visible i.e. on page load, as soon as the user starts to scroll past the header. When scrolling through, Image Number Two needs to become visible when the horizontal line between Text Number One and Text Number Two is vertically aligned with the Image Number One placeholder text. Currently, Image Number Five is never displayed. Per the above, it should come into view when the top of Text Number Five is vertically centred with Image Number Four. When scrolling ends, the bottom border of Text Number Five should be vertically aligned with the bottom of Image Number Five. In my current demo, scrolling ends when the text pane is only half way up the image pane. I feel like this is related to problem #2 above, but not sure how to tweak it. Thanks in advance for any help or suggestions. Cheers
  8. yahia

    React issue

    hello there, im trying to create section with cards to scroll horizontal in (React), the animation works fine but when i add scroll trigger to start animation when the section in viewport, something is wrong. here is a demo on codesandbox https://codesandbox.io/s/intelligent-rain-866rkd?file=/src/Services.js
  9. Hi team greensock, First off, thank you for building such an amazing animation library! Having only discoved greensock recently I can honestly say I haven't had this much fun making things for the web since the days of yore when flash ruled supreme. I think I might have come across a weird edge case in which nested scrollTrigger animations don't seem to be initializing properly, please see the codepen. It's a relatively straightforward setup with a pinned container. Inside the container is a horizontally moving list in which each of the items has it's own animation. The items are positioned to look more or less random, and the scrubbed item animation moves them back to their initial state. Before the container animation hits the start point for the first time, the nested items are positioned as if they themselves are off screen, rather than the position they should actually be in according to the scrubbed timeline. Once the start point of the container has been hit, they jump into place. From there on everything is fine. Perhaps I am doing something wrong myself, although there does also seem to be a difference between different gsap versions. If you change the version in the codepen to 3.11.1 or lower, the items are positioned correctly the first time. Gsap 3.11.2 or higher, and they're not. Any ideas what might be going on? And what could be done to fix the initial position? Thanks! Bart
  10. Hi Guys I make a code for horizontal scroll and its work perfectly in desktop devices but in the mobile device when I scrolling with touch it's create some leg. Here Is The Problem: 2023-02-10-00-26-59_KaHU5Lcj (1).mkv Here Is My Code: useEffect(() =>{ const panel = document.querySelectorAll(".panel"); const panels = document.querySelectorAll(".panel").length; const containers = document.querySelector(".containers"); const pin = document.querySelector(".container"); const ctx = gsap.to(panel, { xPercent: -100 * (panels - 1), ease: "none", scrollTrigger: { start:"center center", trigger: containers, pin:pin, scrub: 3, end: () => "+=" + containers.offsetWidth }, }); setTimeout(() => { ScrollTrigger.refresh() if (ctx && ctx.scrollTrigger && ctx.scrollTrigger.scroll() > ctx.scrollTrigger.start) { ctx.scrollTrigger.scroll(ctx.scrollTrigger.start); } }, 200); return () => { ctx.revert() } },[activeTab,]) Please Make me solution of this. Thanks😊
  11. Hey everyone, So as you'll see I have a sidebar menu that when you click on the anchors it scrolls to the section. However the entire menu moves when you click on the anchor. I'm imagining this might be caused by the fact the navigation bar is inside the scrollAreaWrapper and scrollContent div. So either there is something I'm missing or I need to move the navigation somewhere else. Any guidance or help would be appreciated. Thank you, Dilion Smith
  12. 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
  13. 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
  14. 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?
  15. 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
  16. 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
  17. 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.
  18. 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?
  19. 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/
  20. 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..
  21. Hi, when I add multiple videos, the video scrolltrigger is also giving problems. Can you help me?
  22. 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
  23. 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?
  24. 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, });
  25. 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