Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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. I am having trouble getting my ScrollTrigger animations to fire dynamic animations (those of which are housed in premade functions) that a user selects from a wysisyg on a tabbed template. My setup is using react in conjunction with the GSAP library and things are componentized so we don't really always know what's on the page so we need the component to be able to restart itself. The issue comes when I am trying to trigger the animation upon tab click. OnRefresh it would be great to key off the tab click to be able to restart the ScrollTrigger animation and have it actually only fire upon scr
  2. Hello! I had a new problem. I use GSAP and ScrollTriger. On mobile devices when I click on Input, the keyboard appears, because of this restart the animation. Animation is also restarted after the keyboard disappears. Is it possible to overcome? I really hope for your help.
  3. Hey, I have a question with an animation I'm doing. I have like text message bubbles and when you scroll they need to appear but when the bubbles are near the end they start overlapping each other. How can I make them keep the same space during the timeline?
  4. Hello! Please help me. I have a sample code on Codepen https://codepen.io/victor_trunov_/pen/vYgKmwM I have the following problem: 1) I clean the Google Chrome browser cache on Android. 2) I open the page and move to the end of the page. 3) All the effects that I applied through GSAP are updated in the visible area. The effect of blinking is created. Please help solve it. P.S. If I just refreshed this page without cleaning the cache, then there will be no problems.
  5. Hi all, So i'm new to GSAP in general and came to it for ScrollTrigger. I've been working on my site as shown above but have run into a few questions: (a) This is more general. Lets says something is pinned, i'm having no problem animating that pinned item but as soon as the animation is done the pin desists and the page keeps on scrolling. Is there a way to make the animation occur and then have the item remain pinned without an animation for a certain distance scrolled before the next content? I go around this in some extent on my title by using expo.in as the ease,
  6. hi first of all sorry for my english im trying to replicate navigation menu of http://www.alsafarproject.org/en/map ,its kinda cool it has some skew on scrolling and its smooth and its multi stage, for example when you click on countries in menu submenu will comeup with a nice animation. so i try to make it with gsap becuase why not😃 so here is my long list of question: 1- why my last <li> element is not showing? 2-when i use a low divider in (self.getVelocity/-2000), like -300 when you switch scroll direction fast you will get some choppy skew ani
  7. Hi! Thank you so much for this incredibly valuable forum. I've learned a lot lurking already. I am having trouble animating an alternating entrance point based on class name. In my example all 3 images "reveal" from left to right, but I'd like them to alternate so the images ON the right reveal from the right. Each block has a class of either "reveal-image-left" or "reveal-image-right" that could be leveraged instead if the "reveal-image" selector that's being used across all 3 images now. (The HTML is identical for each block with the alternating positioning done with Flexbox
  8. My goal is update a Three JS scene (colors, camera position, material properties, etc.) based on state properties set by the timeline. My scene is rendered inside of the BlobScene component which accepts an intensity prop. In the sample below, I'd like to update the intensity as the timeline is scrubbed which then updates the light intensity of my scene. In the pinned section, there are two columns: the left column contains text that will be translated into view and the right column contains the BlobScene. My ultimate goal is to change the color of the blob for each corresponding t
  9. Can anyone help me out this. I just want sticky section with smooth scroll. https://codepen.io/farrukh1194/pen/KKNLOZY
  10. Hi, I'm working on a pretty basic static scroll animation with scrolltrigger, but i have an issue where the section jumps after the animation is completed. The jump is super visible and I've been searching for a solution for close to a week now to no avail. It seems the issue is related to the translateY being added and removed to create the pin-spacing effect. Here's a link to a video showing the issue, if the issue isn't super obvious, i'll create a codepen and share that. Any help will be appreciated 🙏🏾
  11. by some reason my element pins fine if i scroll slow, but if i scroll really fast pin start in a very offset position. What could be the issue ? For the smooth scrolling i am using simple LERP value i apply with transform:translate on my wrapper Also "document.documentElement.scrollTop" is available at any point in chrome console, so i don't think i am doing any scroll jacking according to scrolltrigger documentation. I did read about scrollerProxy() but i cant figure out how to connect it with my own scroll smoothing javascript and do i have to if everything else works exempt inconsist
  12. Hey guys I have a question and I wanted to know if this is possible to do. I have a timeline with a ScrollTrigger gsap.timeline({ scrollTrigger: { trigger: element, scrub: 0.5, start: 'top bottom-=15%', markers: true } }) .to(element, {yPercent: -100}) .from($(element).find('.heading'), {yPercent: 20}, '<') .from($(element).find('.description'), {yPercent: 20}, '<') .fromTo($(element).find('.svg-path'), {drawSVG: "0"}, {duration: 1, drawSVG: "100%"}) .to(element, {opacity: 0}, '>-0.2') On this timeline I have multiple tweens, one of those is a
  13. Hey guys, I have an issue an I'm looking for help. I have a page that has a parallax effect in all of the sections of a page whenever the user scrolls. So there are this black text blocks that are separated but whenever you scroll one of the blocks moves up to be next to the one on top, the issue is that this is causing a blank space between sections of the page. I want to know if there is a way, whenever the black text block moves up, to make the sections below move up as well, basically follow that text block whenever it goes up. I try this by just using a yPercent on the sections
  14. Hi Guys, Thanks for this awesome gsap lib again. I'm still learning it but the library is really powerful and quite fun to explore. I need some help with the animation where my container gets pinned on screen and then the image is horizontally moved with the scrolling. This part works fine in the codepen above. What I need with this is for the text in the adjacent container to smoothly show hide along with this image movement. Obviously the number of texts will be the same as the image movements so that wont be a problem. Thanks for any help in advance.
  15. 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
  16. 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 aro
  17. 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-co
  18. 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
  19. 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 ba
  20. 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
  21. 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?
  22. 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 pan
  23. 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.
  24. 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
  25. 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.